Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携)

Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携)

Visual Studio CodeにESLintをインストールする方法です。このESLintで構文チェックを行います。

を押して、拡張機能を表示します。

「ESLint」とタイプすると以下のように表示されます。

一番上の「ESLint」をクリックするとインストールが始まります。

「再読み込み」と表示されたら、「再読み込み」をクリックします。

上記ウィンドウが表示されたら、「ウィンドウの再読み込み」をクリックします。

settings.jsonに以下3行が追加されていることを確認します。追加されて入れば保存時にlinterが走ります。

"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

再読み込みのウィンドウが開かず、上記3行が追加されていない場合は、3行追加してください。

以上でESLintのインストールは完了です。

設定ファイル

Eclipseのcheckstyleと同じようにESLintも設定ファイルが必要になります。

https://github.com/felixge/node-style-guide

上記の「.eslintrc」がお勧めです。

プロジェクト直下に.eslintrc.jsonとして配置すると反映されるはずです。

反映されない場合は、.node_modules.bineslint --initとタイプします。

「Use a popular style guide」を選択すると以下の質問になります。

「Google」を選択すると以下の質問になります。

「JSON」を選択すると、「eslint-config-google」パッケージがインストールされます。

また、以下のようなメッセージが表示されます。

これを上記のファイルに差し替えると、ESLintのルールが変わります。

ESLintの警告を回避する

警告が出ている行の末尾に以下を記述します。

ESLint6.8.0

VSCodeのESLintプラグインはインストールされている前提です。

VSCodeのsettings.jsonには以下3行が追加されているはずです。これでjsファイル保存時にlinterが走ります。

"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

ESLintの最新をインストールします。※2020/01/18時点

npm i -D eslint

view raw
gistfile1.txt
hosted with ❤ by GitHub

ESLint6.8.0では以下のように変更されていました。

C:\Users\takahashi\Documents\vscode\linter>npx eslint –init
? How would you like to use ESLint? (Use arrow keys)
To check syntax only
> To check syntax and find problems
To check syntax, find problems, and enforce code style

view raw
gistfile1.txt
hosted with ❤ by GitHub

「To check syntax and find problems」を選択します。

C:\Users\takahashi\Documents\vscode\linter>npx eslint –init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use?
JavaScript modules (import/export)
> CommonJS (require/exports)
None of these

view raw
gistfile1.txt
hosted with ❤ by GitHub

「CommonJS」を選択します。

C:\Users\takahashi\Documents\vscode\linter>npx eslint –init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use?
React
Vue.js
> None of these

view raw
gistfile1.txt
hosted with ❤ by GitHub

「None of these」を選択します。

C:\Users\takahashi\Documents\vscode\linter>npx eslint –init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? (y/N) N

view raw
gistfile1.txt
hosted with ❤ by GitHub

「N」を入力します。

C:\Users\takahashi\Documents\vscode\linter>npx eslint –init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run?
( ) Browser
>(*) Node

view raw
gistfile1.txt
hosted with ❤ by GitHub

「Node」のみを選択します。スペースを押して選択肢を選べます。

C:\Users\takahashi\Documents\vscode\linter>npx eslint –init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Node
? What format do you want your config file to be in?
JavaScript
YAML
> JSON

view raw
gistfile1.txt
hosted with ❤ by GitHub

「JSON」を選択します。

Successfully created .eslintrc.json file in C:UserstakahashiDocumentsvscodelinterと表示されたら、.eslintrc.jsonファイルが作成されます。initコマンドで作成せずに.eslintrc.jsonファイルを自前で用意しても良いです。

.eslintrc.jsonファイルは以下の通りです。

{
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
}
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

デフォルトはルールがありませんのでこのrulesキーのvalueにルールを書いていきます。

私の環境はとりあえずこんな感じです。

"rules": {
"indent": ["error", 2], // インデントを2にする
"quotes": ["error", "single"], // ダブルクォートの禁止
"semi": ["error", "never"], // セミコロンの使用禁止
"block-spacing": "error", // {}内の半角スペースを入れる
"eol-last": ["error", "always"], // 最終行に1行追加する
"no-var": "error", // varの使用禁止
"max-params": ["error", 3], // 引数4以上でエラーにする
"eqeqeq": ["error", "always"], // 比較演算子===と!==の厳密な使用を要求
// const使用すること、配列のindexはマジックナンバー許容
// "no-magic-numbers": ["error", { "enforceConst": true,"ignoreArrayIndexes": true }],
"yoda": "error", // ヨーダ記法禁止
"no-shadow": "error", // シャドーイング禁止
"no-dupe-args": "error", // 関数の重複引数禁止
"no-unreachable": "error" // 到達不能コードのチェック
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

ESLint + Prettier連携

ESLintとPrettier連携に必要なモジュールをインストールします。

npm i -D eslint-plugin-prettier eslint-config-prettier prettier

view raw
gistfile1.txt
hosted with ❤ by GitHub

モジュール バージョン
ESLint 6.8.0
eslint-plugin-prettier 6.9.0
eslint-config-prettier 3.1.2
prettier 1.19.1

PrettierとESLintが連携されるようになります。

.eslintrc.jsonファイルを以下のように書き換えます。

{
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended" // eslint-plugin-prettier,eslint-config-prettierを有効にしてPrettierをESLint上で実行する
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"plugins": ["prettier"],
"rules": {
"prettier/prettier": [ // Prettierルール
"error",
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"semi": false,
"trailingComma": "none", // es5
"bracketSpacing": true,
"arrowParens": "avoid" // アロー関数の引数が1つの場合は()が省略可能. alwaysを指定すると省略不可
}
],
// ESLintルール
"indent": ["error", 2], // インデントを2にする
"space-infix-ops": "error", // 演算子の間に空白がない場合エラー
"comma-spacing": ["error", { "before": false, "after": true }], // カンマの前後の空白設定
"brace-style": "error", // if-elseの{}は同一行に記述する設定
"quotes": ["error", "single"], // ダブルクォートの禁止
"semi": ["error", "never"], // セミコロンの使用禁止
"block-spacing": "error", // {}内の半角スペースを入れる
"eol-last": ["error", "always"], // 最終行に1行追加する
"no-var": "error", // varの使用禁止
"max-params": ["error", 3], // 引数4以上でエラーにする
"eqeqeq": ["error", "always"], // 比較演算子===と!==の厳密な使用を要求
// const使用すること、配列のindexはマジックナンバー許容
// "no-magic-numbers": ["error", { "enforceConst": true,"ignoreArrayIndexes": true }],
"yoda": "error", // ヨーダ記法禁止
"no-shadow": "error", // シャドーイング禁止
"no-dupe-args": "error", // 関数の重複引数禁止
"no-unreachable": "error" // 到達不能コードのチェック
}
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

.eslintrc.jsonファイルは以下からダウンロードできます。

.eslintignore

.eslintrc.jsonファイルと同じ場所に.eslintignoreファイルを配置してlinter対象外のファイルを指定することが出来ます。

以下はtest配下のソースにlinterが効きません。

/**/node_modules/**
test/*

view raw
gistfile1.txt
hosted with ❤ by GitHub

参考サイト:JavaScript Standard StyleESLintPrettier

platoで静的解析のレポート出力する

成果物として静的解析のレポート出力を求められることがあります。

platoをインストールすればhtml形式で出力することができます。

src配下のファイルを対象ソースとして、reportDirディレクトリ配下にレポート出力します。

-tオプションでタイトルを指定して出力することができます。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

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

CAPTCHA