Zenn
🍃

ESLint についてまとめてみた

2023/02/05に公開
ESLint
tech

これは何？

ESLint について調べては忘れてを繰り返しているので、
勉強ついでに自分用のリファレンスとしてまとめました。

ESLint 概要

JavaScript の静的解析のデファクトスタンダード。
ルールに基づいて構文エラーや不具合になりそうな箇所を警告してくれる。

準備

公式 Getting Started with ESLint

自動設定

いくつかの質問に回答すると自動で設定ファイルを作成してくれる。

npm init @eslint/config

設定ファイルを指定して自動設定

—config の後ろに , 区切りで npm で公開されているパッケージを指定する。

npm init @eslint/config -- --config @nuxt/eslint-config,eslint-config-prettier

マニュアル設定

eslint のインストールと設定ファイルの作成

npm install -D eslint
# 設定ファイルを作成する (json/yaml/yml/js/cjs)
touch .eslintrc.json

.eslintrc.json に設定を追記
eslint:recommended の ルール内容は Rule Reference を参照

{
  "extends": ["eslint:recommended"]
}

コマンドライン

Command Line Interface Reference

基本: npx eslint [options] [file|dir|glob]*

# 特定のファイル
npx eslint ./path/to/file

# 現在のディレクトリ
npx eslint .

# チェックと修正まで行う
npx eslint --fix ./path/to/file

設定

設定ファイルの形式

Configuration File Format

ファイル名： .eslintrc.*
対応フォーマット

  • YAML: yml,yaml
  • JSON: json
  • JavaScript: js,cjs

設定ファイルの階層

eslint は対象ファイルのディレクトリからルートに向かって設定ファイルを探していき、root ディレクトリ、もしくは 設定ファイル内に root: true が見つかるまでさかのぼって設定をマージしていく。
階層が深いほど優先度が高く、設定を上書きする。

意図せずさかのぼって設定されてしまうのを防ぐために、プロジェクトトップの設定ファイルには root: trueの設定を推奨

{
  "root": true
}

プロパティ

extends

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

{
  "extends": [
    "hogehoge",
    "plugin:eslint-plugin-abcd/setting_name" // eslint-plugin- は省略可能
  ]
}

plugins

npm で配布されているプラグインを元にルールの追加などを行える。
配列形式で複数記載することができる。
plugins ではルールの追加のみなので、extends や rule でルールの設定が必要。
なおパッケージ名が eslint-plugin-abcd となっている場合は eslint-plugin- を省略して abcd とだけ記載することができる。

{
  "plugins": ["abcd"],
  "extends": ["plugin:abcd/settingname"]
}

env

予め定義されている環境ごとのグルーバル変数を有効にする。
開発対象が ブラウザであれば window が定義してあるはずだが、eslint はどの環境で開発しているかわからないので、未定義のエラーとして検出されてしまう。
その際に env で browser を true に設定すればブラウザ環境下で使用できるグローバル変数が存在するものとできる。

複数の設定を有効化することが可能。

設定できる値：Specifying Environments

{
  "env": {
    "browser": true,
    "node": true
  }
}

parser

TypeScript や Vue の SFC など、素の JavaScript 以外を解析する場合に指定する。

{
  "parser": ["@typescript-eslint/parser"]
}

環境ごとのパッケージ

TypeScript

https://typescript-eslint.io/getting-started/

  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
npm install --D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

{
  "root": true,
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"]
}

Nuxt3

https://github.com/nuxt/eslint-config#nuxtjseslint-config-and-nuxtjseslint-config-typescript

  • 新

    • @nuxt/eslint-config
    npm i -D @nuxt/eslint-config eslint

    {
  "root": true,
  "extends": ["@nuxt/eslint-config"],
};

Nuxt2

  • JavaScript の場合

    • @nuxtjs/eslint-config
    • @babel/eslint-parser
    npm i -D @babel/eslint-parser @nuxtjs/eslint-config

    {
  "root": true,
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "extends": ["@nuxtjs"],
}

  • TypeScript の場合

    • @nuxtjs/eslint-config-typescript
    • @babel/eslint-parser
    npm i -D @babel/eslint-parser @nuxtjs/eslint-config-typescript

    {
  "root": true,
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "extends": ["@nuxtjs/eslint-config-typescript"]
}

prettier

https://prettier.io/

従来は eslint を実行したあとに prettier を自動で実行させる eslint-plugin-prettier の使用がスタンダードだったが、現在は eslint-plugin-prettier 使用するのは非推奨。

現在は eslint-config-prettier を使って prettier と衝突する書式関連に関するルールをオフにして、エディタのプラグインなどで対応することを推奨している。

https://prettier.io/docs/en/integrating-with-linters.html#docsNav

  • eslint-config-prettier
    • prettier と衝突する書式関連に関するルールをオフにする設定

VSCode

  • 拡張: ESLint
    リアルタイムで解析して VSCode のエディタ上や 「問題」ペイン に warning や error を表示してくれる。
    使用するためにはワークスペースフォルダ内か、グローバルに eslint がインストールされている必要がある。
    モノレポなどでプロジェクトがサブディレクトリに切ってある場合、eslint.workingDirectory にパスを追加するか、mode を auto にする必要あり

    {
  "eslint.workingDirectories": [{ "mode": "auto" }]
}
GitHubで編集を提案

Discussion