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