Mac で Vim ベースの JavaScript 開発環境を整える (その 1)


冬休みに入ったので、やろうやろうと思って放置してた、アプリ作りをしようと思い、結局、開発環境を新たに整えるのに時間を割いてて、アプリ作りをしていない今日この頃。
年取るにつれ、色々覚えが悪くなっているので、設定した内容をメモ。

きっかけ: Expo でアプリ開発を試したい

React Native でも手軽にアプリ開発感があったんですが、さらに手軽さが増しそうな、Expo を勉強しようと思い、Node JS の開発環境を、ちゃんとしようと思い立ったのがきっかけ。
Atom + Nuclide を試してましたが、Vim バインディングの完成度に満足できず、やめました。他も、Vim 使ってた便利さに勝るメリットは得られなさそう。
Expo は、expo init でプロジェクトを作成して expo start すると QR コードが出てきて、Expo のアプリで QR コードを読み込めば、すぐに iPhone 上でアプリを実行しながら、コード編集、リロードの流れで開発できる感じ。スタンドアロンのアプリとしてパブリッシュも可能。Expo 用の API があるが、ほば React Native の開発的な感じ。ドキュメントも丁寧。
何より XCode、Android Studio を使わなくても、アプリを作れそうな感じが素敵。XCode を使うためには、Mac 一択だった縛りがなくなるの
ただ、現状、バックグラウンドの処理実行など、色々制約があるので注意。ただ、開発は活発そうだから、制約も、時が経てば減っていきそう。

JS の Vim 開発環境は、こちらの記事の内容を試してみることに。

エディタ (Neovim、VimR)

Neovim を使うことに決めた。Neovim は、今では使わなくなった機能を消したり、今まで、ごく限られた人しか Vim のコードを把握できてなかったのを、いろんな人で開発できるようにソースコードをリファクタリングしてる Vim といった感じみたい。また、プラグインを、いろんな言語で作れるみたい。標準で、:terminal で Vim ないでターミナルエミュレータを開けるのも良さそう。
:terminal があるので、GUI の Vim を使おうと思い、VimR をインストール。Swift を中心に使ってる OSX 用の Vim GUI で、元は MacVim を使ってたけど、今は、NeoVim を使ってるとのこと。

Neovim のインストール

Homebrew で入れるだけ。

brew install neovim

VimR

ダウンロードして、解凍するだけ。
http://vimr.org/

:terminal の設定

ターミナルエミュレータ操作後は、そのままだと、Esc でコマンドモードに戻れない。戻れるようにするために、~/.config/nvim/init.vim に、以下を追加 (参考)。

tnoremap <silent> <ESC> <C-\><C-n>

あと、ターミナルエミュレーターでは、行数表示は消したいので、以下を追加 (参考)。

au TermOpen * setlocal nonumber norelativenumber

色変え

MacVim を使ってる時は、そのまま使ってたんですが、せっかく GUI を使うので、少しオシャレ感がでる colorscheme を使うことに。background が dark の時の色が良さそうだったので、SOLARIZED を使うことにしました。以下の画像は、SOLARIZED の GitHub より拝借。

ただ、そのまま altercation/vim-colors-solarized を使うと Neovim では動かないので、注意が必要。

frankier/neovim-colors-solarized-truecolor-only を使えば大丈夫。詳細は、こちらに書いてる。

vim-plug

Medium の記事に沿って、vim-plug をインストール。インストールは、curl でレポジトリのデータを落としてくるだけで簡単。
プラグインのインストールは、init.vim に、いれたいプラグインの GitHub のレポジトリ名を書いて、:PulgInstall するだけ。チュートリアルは、こちら

call plug#begin()
Plug 'w0rp/ale'
call plug#end()

init.vim

とりあえず設定した init.vim。プラグインは、設定途中。

~/.config/nvim/init.vim
set incsearch
set hlsearch
set ts=4
set et

syntax enable

set termguicolors
set background=dark
colorscheme solarized

set backspace=indent,eol,start
set clipboard+=unnamedplus
set number

set encoding=utf-8
set fencs=utf-8,iso-2022-jp,sjis,euc-jp

au TermOpen * setlocal nonumber norelativenumber
tnoremap <silent> <ESC> <C-\><C-n>

call plug#begin()
Plug 'w0rp/ale'
call plug#end()

やりのこし

JS 開発用の、プラグインの設定。