Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携)
Visual Studio CodeにESLintをインストールする方法です。このESLintで構文チェックを行います。
Ctrl + Shift + x
を押して、拡張機能を表示します。
「ESLint」とタイプすると以下のように表示されます。
一番上の「ESLint」をクリックするとインストールが始まります。
「再読み込み」と表示されたら、「再読み込み」をクリックします。
上記ウィンドウが表示されたら、「ウィンドウの再読み込み」をクリックします。
settings.jsonに以下3行が追加されていることを確認します。追加されて入れば保存時にlinterが走ります。
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
再読み込みのウィンドウが開かず、上記3行が追加されていない場合は、3行追加してください。
以上でESLintのインストールは完了です。
設定ファイル
Eclipseのcheckstyleと同じようにESLintも設定ファイルが必要になります。
上記の「.eslintrc」がお勧めです。
プロジェクト直下に.eslintrc.jsonとして配置すると反映されるはずです。
反映されない場合は、.node_modules.bineslint --initとタイプします。
C:UserstakahashiDocumentsvscodeapps>.node_modules.bineslint --init ? How would you like to configure ESLint? Answer questions about your style > Use a popular style guide Inspect your JavaScript file(s)
「Use a popular style guide」を選択すると以下の質問になります。
C:UserstakahashiDocumentsvscodeapps>.node_modules.bineslint --init ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you want to follow? (Use arrow keys) > Google Airbnb Standard
「Google」を選択すると以下の質問になります。
C:UserstakahashiDocumentsvscodeapps>.node_modules.bineslint --init ? 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 YAML > JSON
「JSON」を選択すると、「eslint-config-google」パッケージがインストールされます。
また、以下のようなメッセージが表示されます。
Successfully created .eslintrc.json file in C:UserstakahashiDocumentsvscodeapps
これを上記のファイルに差し替えると、ESLintのルールが変わります。
ESLintの警告を回避する
警告が出ている行の末尾に以下を記述します。
// eslint-disable-line
ESLint6.8.0
VSCodeのESLintプラグインはインストールされている前提です。
VSCodeのsettings.jsonには以下3行が追加されているはずです。これでjsファイル保存時にlinterが走ります。
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
ESLintの最新をインストールします。※2020/01/18時点
npm i -D eslint
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
「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
「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
「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
「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
「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
「JSON」を選択します。
Successfully created .eslintrc.json file in C:\Users\takahashi\Documents\vscode\linterと表示されたら、.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": {
}
}
デフォルトはルールがありませんのでこの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" // 到達不能コードのチェック
}
ESLint(静的解析) + Prettier(フォーマッター)連携
ESLintとPrettier連携に必要なモジュールをインストールします。
npm i -D eslint-plugin-prettier eslint-config-prettier prettier
| モジュール | バージョン |
|---|---|
| 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" // 到達不能コードのチェック
}
}
.eslintrc.jsonファイルは以下からダウンロードできます。
.eslintignore
.eslintrc.jsonファイルと同じ場所に.eslintignoreファイルを配置してlinter対象外のファイルを指定することが出来ます。
以下はtest配下のソースにlinterが効きません。
/**/node_modules/** test/*
参考サイト：JavaScript Standard Style、ESLint、Prettier
platoで静的解析のレポート出力する
成果物として静的解析のレポート出力を求められることがあります。
platoをインストールすればhtml形式で出力することができます。
npm i --save-dev plato npx plato -e .eslintrc.json -r -d reportDir -t "Hoge Project" src
src配下のファイルを対象ソースとして、reportDirディレクトリ配下にレポート出力します。
- -eオプションでlintします。(指定ファイルはjson）
- -rオプションで再帰的に解析します。
- -dオプションで出力先を指定します。この場合reportDirです。
- -tオプションでタイトルを指定して出力することができます。
最後のsrcが静的解析対象のフォルダです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント