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
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で検証されていることがわかります。
変更履歴
- 2016/08/20 修正しました。