Visual Studio Code に ESLint 機能 を 追加 する

Visual Studio Code でも 静的解析 を利用してできるだけチームがコード規約に沿って開発できるようにしたいと思います。 そのための手段の一つが ESLint による静的解析。

ここでは Visual Studio Code に ESLint を組み込み、自動で検証される環境を構築してみます。

---

目次

• インストール
  • ESLint の インストール
  • VS Code ESLint extension の インストール
• 使い方
  • 初期設定
  • 検証
  • 自動修正
• サンプルルール
  • サーバーサイド
  • クライアントサイド

---

インストール

ESLint の インストール

何はともあれまずは ESLint の 本体 をインストールします。 ローカルインストールでも動作はするのですが…利便性を考えてグローバルインストールを行います。 グローバルインストールは以下のコマンドで行います。

1. 以下のコマンドを実行

   npm install eslint --global
   

VS Code ESLint extension の インストール

コマンドインストールもできますが、以下では画面上から行う方法でインストールします。

1. 「拡張機能」を選択

   

2. 「ESLint」を検索

   

3. 「ESLint」の「インストール」を選択

   

インストール後は ESLint を有効化するため、 Visual Studio Code を再起動します。

使い方

初期設定

ESLint の ルール定義 はプロジェクト単位で保存されます。 なので、使うときも基本的にプロジェクトルートフォルダで初期設定を行います。 以下の手順ではすでに package.json が存在している（npm初期化が終わっている）前提で進めます。

1. 「プロジェクトルート」を開く

   

2. Ctrl + @ で統合ターミナルを表示

   

3. 以下のコマンドを実行して初期化処理を開始

   eslint --init
   

   

4. ウィザードに従って質問に答えていきます

   

5. プロジェクトルートに設定ファイル ( .eslintrc.js ) が生成されます

   （設定例は以下の「サンプルルール」を参照してください）

   

検証

静的解析は通常設定だと入力と同時に検証されます。 エラーがあれば問題個所に赤の波線が表示されます。

自動修正

一部のエラーは自動修正することができます。 自動修正は以下の手順で行います。

1. Ctrl + Shift + P で コマンドパレット を起動

   

2. Fix all auto-fixable problems を入力

   （部分入力で補完されるので、すべて覚えて入力できる必要はなさそうです）

   

3. 一部のエラーが自動修正される

   

サンプルルール

サーバーサイド 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"
        ]
    }
};

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter