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

0 件のコメント

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

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


目次


インストール

ESLint の インストール

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

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

    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. 以下のコマンドを実行して初期化処理を開始

    1
    eslint --init

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

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

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

検証

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

自動修正

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

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

  2. Fix all auto-fixable problems を入力

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

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

サンプルルール

サーバーサイド 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 の フォロー」 お願いします!!