Visual Studio Code でも 静的解析 を利用してできるだけチームがコード規約に沿って開発できるようにしたいと思います。 そのための手段の一つが ESLint による静的解析。
ここでは Visual Studio Code に ESLint を組み込み、自動で検証される環境を構築してみます。
目次
インストール
ESLint の インストール
何はともあれまずは ESLint の 本体 をインストールします。 ローカルインストールでも動作はするのですが…利便性を考えてグローバルインストールを行います。 グローバルインストールは以下のコマンドで行います。
-
以下のコマンドを実行
1npm install eslint --global
VS Code ESLint extension の インストール
コマンドインストールもできますが、以下では画面上から行う方法でインストールします。
インストール後は ESLint を有効化するため、 Visual Studio Code を再起動します。
使い方
初期設定
ESLint の ルール定義 はプロジェクト単位で保存されます。
なので、使うときも基本的にプロジェクトルートフォルダで初期設定を行います。
以下の手順ではすでに package.json
が存在している(npm初期化が終わっている)前提で進めます。
-
「プロジェクトルート」を開く
-
Ctrl + @ で統合ターミナルを表示
-
以下のコマンドを実行して初期化処理を開始
1eslint --init
-
ウィザードに従って質問に答えていきます
-
プロジェクトルートに設定ファイル (
.eslintrc.js
) が生成されます(設定例は以下の「サンプルルール」を参照してください)
検証
静的解析は通常設定だと入力と同時に検証されます。 エラーがあれば問題個所に赤の波線が表示されます。
自動修正
一部のエラーは自動修正することができます。 自動修正は以下の手順で行います。
-
Ctrl + Shift + P で コマンドパレット を起動
-
Fix all auto-fixable problems
を入力(部分入力で補完されるので、すべて覚えて入力できる必要はなさそうです)
-
一部のエラーが自動修正される
サンプルルール
サーバーサイド JavaScript と クライアントサイド JavaScript では設定が違うので、 それぞれサンプルルールを以下に載せます。
サーバーサイド
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | module.exports = { "env" : { "es6" : true , "node" : true }, "extends" : "eslint:recommended" , "parserOptions" : { "sourceType" : "module" }, "rules" : { "indent" : [ "error" , 4 ], "linebreak-style" : [ "error" , "windows" ], "quotes" : [ "error" , "single" ], "semi" : [ "error" , "always" ] } }; |
クライアントサイド
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | module.exports = { "env" : { "browser" : true , "es6" : true }, "extends" : "eslint:recommended" , "rules" : { "indent" : [ "error" , 4 ], "linebreak-style" : [ "error" , "windows" ], "quotes" : [ "error" , "single" ], "semi" : [ "error" , "always" ] } }; |
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!