White Space
WebLife

【Javascript】コード解析ツール ESLint を導入、設定する方法

  • Javascript

Javascript のコード解析ツール ESLint を導入すると、一定のルールに従ってコードの問題点を指摘してくれます。合わせてよく使われる Prettier の設定・連携に関しては下記を参照してください。

eslint をインストール

yarn add -D eslint

初期化と設定

npx eslint --init

こちらを実行すると、ESLint のセッティングが行われます。色々聞かれるので、全部答えると設定ファイルが生成されます。下記は一例です。

ESLint で何をするか

シンタックスチェックと問題探しだけ行います。

How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

プロジェクトで使っているモジュール

import/export を使います。

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

フレームワーク

特にフレームワークを使っていないので None of these。

? Which framework does your project use? … 
  React
  Vue.js
❯ None of these

Typescript を使うかどうか

今回は使用しません。No。

? Does your project use TypeScript? › No / Yes

どこで使うか（ブラウザ、Node.js）

両方にしておきます。スペースキーで選択しましょう。

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

設定ファイルの拡張子

拡張子はなんとなく Javascript にしてますが、YAML でも JSON でもお好みで。

? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

終わると、設定ファイル eslintrc.js が生成されます。

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true, // 追加しておくと良い
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};

Javascript にした場合、module.exportsが node の記法のため、node: trueを入れておかないと未定義変数エラーになります。避けるには node を true にするか、他の拡張子にしましょう。

Airbnb の config を使ってみる

フロントエンド界では有名な（？）Airbnb の config を追加するには下記。詳細はeslint-config-airbnb-base – npmを確認してみてください。

yarn add -D eslint-config-airbnb-base eslint-plugin-import

.eslintrc.js

module.exports = {
  ...,
  "extends": ["airbnb-base"]
  ...,
}

.eslintignore で無視するファイルを設定する

ESLint を通したくないファイルがあれば、.eslintignore を作成して設定しておきましょう。

.eslintignore の例

# static ディレクトリは無視する
static

ESLint を実行する（+スクリプトを追加する）

下記のコマンドで全ファイル ESLint をかけることができます。ルールに外れた記述があればエラーがたくさん見つかるはずです。

npx eslint .

しかし、このコマンドを毎回打ち込むのは面倒です。なので、package.jsonにコマンドを追加します。

package.json

...,
scripts: {
  ...,
    "lint": "eslint .",
  ...,
},
...,

yarn lintで実行できます。

今回は.（ドット）で全ファイルを対象にしているので、先ほどの.eslintignoreで無視するファイルを設定しておきましょう。

またコマンドの設定については https://zenn.dev/teppeis/articles/2021-02-eslint-prettier-vscode#cli-%2F-npm-scripts が参考になります。

Visual Studio Code で自動的に ESLint を実行する

Visual Studio Code の ESLint 拡張を追加します。これだけでファイルを開いているだけでコードを解析、問題点を提示してくれます。