Visual Studio CodeでESLintを使う

eslintをインストールする

ESLintがインストールされていない場合は、コマンドプロンプトから次のコマンドを実行して、ESLintをインストールします。

npm install -g eslint

ESLintがインストールされているかは、次のコマンドを実行して確認できます。

eslint -v

インストールされていれば、ESLintのバージョンが表示されます。

v3.3.1

VS Code ESLint extensionをインストールする

Visual Studio Codeで「Ctrl+P」を押します。

次のコマンドを入力し、Enterキーを押します。

ext install vscode-eslint

eslint01

eslint02

VS Code ESLint extensionがインストールされます。

VS Code ESLint extensionをインストールすると、設定ファイル(settings.json)の”eslint.enable”がtrueになります。

念のため、標準のJavaScriptの検証機能を無効にします。

メニューの「ファイル」→「基本設定」→「ユーザー設定」を選択します。

右側のウィンドウに「”javascript.validate.enable”: false」を追加します。

// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    // JavaScript の検証を有効/無効にします
    "javascript.validate.enable": false
}

npm init

「npm init」を実行して「package.json」ファイルを作成します。

npm init

コマンドを実行すると、設定について質問があります。適当に答えます。

eslintの設定ファイルを作成する

プロジェクトのフォルダーで、コマンドプロンプトから次のコマンドを実行します。

eslint --init

設定についての質問が始まります。
矢印キーで回答を選択して、Enterキーで確定します。

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in? JavaScript
Local ESLint installation not found.
Installing eslint, eslint-config-google

質問が終了すると、node_modulesフォルダーが作成され必要なファイルがダウンロードされます。
設定ファイル(.eslintrc.js)が作成されます。

Style GuideにGoogleを選択したので、「eslint-config-google」をインストールします。

npm install --save-dev eslint-config-google

eslintの設定ファイルを修正する

必要に応じて設定ファイルを修正します。

module.exports = {
    "extends": "google",
    "installedESLint": true,
    "env": {
        // browser グローバル変数を使用する
        "browser": true,
    },
    "rules": {
        // インデントスタイルは4スペースに強制
        "indent": ["error", 4],
        // 改行コードはWindows
        "linebreak-style": ["error", "windows"],
    },
};

ESLintで検証する

ここまで設定ができていれば、Visual Studio CodeはJavaScriptのコードをESLintで検証します。

JavaScriptファイルをVisual Studio Codeで開きます。
ESLintで検証されていることがわかります。

eslint03

変更履歴

  • 2016/08/20 修正しました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください