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

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も設定ファイルが必要になります。

GitHub - felixge/node-style-guide: A guide for styling your node.js / JavaScript code. Fork & adjust to your taste.
A guide for styling your node.js / JavaScript code. Fork & adjust to your taste. - felixge/node-style-guide

上記の「.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 StyleESLintPrettier

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が静的解析対象のフォルダです。

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました