LoginSignup
9

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-24

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

きっかけ: 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 一択だった縛りがなくなるの
ただ、現状、バックグラウンドの処理実行など、色々制約があるので注意。ただ、開発は活発そうだから、制約も、時が経てば減っていきそう。

exp start を実行した時に表示される QR コード

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 より拝借。

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 開発用の、プラグインの設定。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9