Chapter 05

ESLintの導入

manycicadas
manycicadas
2021.01.14に更新

ESLintのインストール

ESLintとは、JavaScriptの静的解析ツールで、構文ミスを発見したり、該当プロジェクトで固有のルールを定義してそれが守られているかチェックすることができます。
以下のコマンドを実行し、ESLintをインストールします。

$ yarn add eslint --dev

ESLintの初期化

ESLintの初期化を行うため、以下のコマンドを実行します。
実行するといくつか質問の回答を求められるので、今回は以下のように選択します。

$ yarn run eslint --init
# ? 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
# ? What type of modules does your project use? … 
# ❯ JavaScript modules (import/export)
#   CommonJS (require/exports)
#   None of these
# ? Which framework does your project use? … 
#   React
#   Vue.js
# ❯ None of these
# ? Does your project use TypeScript? › No / ❯ Yes
# ? Where does your code run? 
# ✔ Browser
# ✔ Node
# ? What format do you want your config file to be in? … 
# ❯ JavaScript
#   YAML
#   JSON
# The config that you've selected requires the following dependencies:
# 
# @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
# ? Would you like to install them now with npm? › No / ❯ Yes

設定ファイル

プロジェクト直下に.eslistrc.jsが作成されます。
今回はこれといって独自のルールを定義したいとかもないので、このままにしようと思います。

module.exports = {
    "env": {
        "browser": true, // ブラウザ対応
        "es2021": true, // ES2021に対応
        "node": true // Node.js対応
    },
    "extends": [ // ESLintの推奨設定を使う
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
};

package.jsonの修正

package.jsonscriptsを追加し、以下のようにしましょう。
今回はsrc以下のTypeScriptファイルだけチェック対象とします。

{
  // 省略
  "scripts": {
    "lint": "eslint --fix 'src/**/*.ts'"
  },
  // 省略
}

ESLintの実行

これで、以下を実行するとESLintのチェックが行われます。
試しにsrc/index.tsに不要な変数を宣言して実行してみたら、以下のような警告が出ました。

$ yarn lint
# /Users/cigalecigales/Documents/hello-js-lib/src/index.ts
#   2:7  warning  'a' is assigned a value but never used  @typescript-eslint/no-unused-vars
# 
# ✖ 1 problem (0 errors, 1 warning)