概要
こんな感じのJavaScriptのスーパークソコードをvimで編集してるとして
functionhoge(k){varn=3varmfor(i=0;i<10;i++){n=i}returnm;}vim上で静的解析実行するvimプラグインであるsyntasticと、JavaScriptの定番静的解析エンジンのESLintを組み合わせると
いい感じにボロクソに指摘してくれる。
ESLintのインストール
eslint本体はnpmで入れます。
$ npm i -g eslint
最初は初期設定します。
$ eslint --init
質問に順に答えることで、ESLintのルールである.eslintrc.jsonを生成してくれる。
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /root/$ eslint --init
- ES6使うんか？
- ES6のmodule使うんか？
- ブラウザとnodeどっちで動くコードかいとるん？
- 改行コードはWindowsとUnixどっちにあわせる？
- CommonJS使うか？
- JSX使うか？
- インデントはスペースとタブどっちや？
- 文字列は
""と''どっちや？ - セミコロン入れる派か
- 設定ファイルのスタイルはJSONかYAMLどっちがええ？
これで以下のような.eslintrc.jsonが生成される。あとは個人的な好みとかプロジェクトのコーディング規約に会わせて適宜書き換える。
.eslintrc.json
{"env":{"browser":true,"es6":true},"extends":"eslint:recommended","parserOptions":{"sourceType":"module"},"rules":{"indent":["error",2],"linebreak-style":["error","unix"],"quotes":["error","single"],"semi":["error","never"]}}もちろんvimを使わずにeslint単体でも使える。
$ eslint hoge.js
/root/app/javascript/hoge.js
1:10 error 'hoge' is defined but never used no-unused-vars
1:15 error 'k' is defined but never used no-unused-vars
2:7 error 'n' is assigned a value but never used no-unused-vars
5:8 error 'i' is not defined no-undef
5:15 error 'i' is not defined no-undef
5:23 error 'i' is not defined no-undef
6:9 error 'i' is not defined no-undef
7:1 error Expected indentation of 2 spaces but found 4 indent
9:11 error Extra semicolon semi
✖ 9 problems (9 errors, 0 warnings)
2 errors, 0 warnings potentially fixable with the `--fix` option.
syntasticのインストール
syntasticはvimのプラグインなので、ここではneobundle使って入れる。.vimrcに以下を追加
NeoBundle 'scrooloose/syntastic.git'set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}set statusline+=%*
letg:syntastic_always_populate_loc_list=1letg:syntastic_auto_loc_list=1letg:syntastic_javascript_checkers=['eslint']これでvimを起動すると、syntasticがインストールされる。
この状態だと、JavaScriptファイルを保存するたびに自動で静的チェックが走るようになる。
しかし、ESLintの設定やコードの量によっては静的解析にも若干の時間がかかるので、保存のたびにチェックが走るのは億劫な場合もある。
そのような場合は、.vimrcに以下を追記する。
letg:syntastic_check_on_open=0letg:syntastic_check_on_wq=0
nnoremap <C-C>:w<CR>:SyntasticCheck<CR>これで、ファイル読み込み時及び保存時に自動で解析が走るのよ抑止できる。さらに、ノーマルモードのときにCtrl + cを押すことで明示的に静的解析を走らせることができようになる。個人的なオススメ。