ESLintインストールのメモ

ESLintとは

ESLintとは JavaScriptのコードが正しいかをチェックするツールの1つです。
エラーなどの問題が発生した場合は、自動で修正してくれることもあります。

ESLintのインストール

プロジェクトフォルダ上で以下のコマンドを入力します。

npm install --save-dev eslint

package.jsonの設定

毎回./node_modules/.bin/eslintと書くのは面倒です。
package.jsonを開いて"scripts"にlintを新しく定義します。

// package.json
"scripts": {
    "lint": "eslint ."
},

ESLintの実行

npmコマンドとして設定して、コードをチェックします。

npm run lint

設定ファイル

設定ファイルの一部を解説します。
各プロパティの意味

.eslintrc.cjs

// eslintでは特定のプラグインに依存したプラグインを利用する際に
// すべての依存関係を手動でインストールする必要があったが、
// それを自動で補ってくれるプラグインである。
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  // eslint は対象ファイルのディレクトリからルートに向かって設定ファイルを探していき、
  // root ディレクトリ、もしくは 設定ファイル内に root: true が見つかるまで
  // さかのぼって設定をマージしていく。
  // 階層が深いほど優先度が高く、設定を上書きする。
  // 意図せずさかのぼって設定されてしまうのを防ぐために、
  // プロジェクトトップの設定ファイルには root: trueの設定を推奨。
  root: true,

  // ECMAScriptのバージョンやJSXなどのパーサのオプションを指定
  // https://eslint.org/docs/user-guide/configuring#specifying-parser-options
  parserOptions: {
    // 最新のecmaサポートバージョンが設定される
    ecmaVersion: 'latest',
    // コードがECMAScriptモジュールにある場合は、
    // 「script」（デフォルト）または「module」に設定します。
    sourceType: 'module'
  },

  // npm で公開されている設定ファイルを元にルールの設定を行える。
  // 配列形式で複数記載することができて、後ろに行くほど順位が高く設定値が上書きされていく
  // なおパッケージ名が eslint-config-hogehoge となっている場合は
  // eslint-config- を省略して hogehoge とだけ記載することができる
  // プラグインが提供している設定ファイルを使用するためには plugin: をプレフィクスとして使用する。
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],

  // 個別のルールの設定 を登録する項目です。
  // extendsで指定した共有設定以外で個別に設定したい内容を記載します。
  rules: {
    'vue/multi-word-component-names': 'off'
  },

  // 特定のグローバル変数を許可する場合、
  // JSファイルの中にコメントを記述する形でも設定ファイルに記述する形でも、どちらでもよい。
  globals: {
    route: true
  }
}