Zenn
Closed6

ESLintを咀嚼する

ESLint
ShionShion

超なんとなーく使っていたので頑張って理解できるようにしてく。
何はともあれまずは公式から。
https://eslint.org/

ShionShion

ESLint とは

ESLint はコードを静的に分析して問題を素早く見つけます。ほとんどのテキスト エディターに組み込まれており、継続的インテグレーション パイプラインの一部として ESLint を実行できます。

つまり、JavaScript コードの静的解析ツール。

特徴はこんな感じ。

  • 問題を見つける
  • 問題を自動的に修正する
  • 独自ルールでカスタマイズ

コーディングルールといった運用で縛るより ESLint を導入した方が時間もコストも節約できそう。

ShionShion

使い方

前提

Node.js がインストールされていること。
eslint のインストールに npm, yarn pnpm を使用するためである。

手順

今回は公式で紹介されている手動セットアップに沿って進めていく。

※ 前提として事前に yarn init で package.json を作成しておく。

1. インストール

今回は yarn を使用。
このコマンドでインストールおよび初期構築が可能。

yarn add -D eslint @eslint/js

2. 設定ファイル作成

touch eslint.config.js

注意点は、プロジェクトのルートに設置することくらい。
設定ファイルの詳細はこちらを参照されたい。

蛇足だが、eslintrc 形式は非推奨になっていた。

3. 設定ファイル記述

2 で作成した設定ファイルに以下を記述する。

eslint.config.js
import js from "@eslint/js";

export default [
    js.configs.recommended,
   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

4. 実行してみる

ESLint CLI を使用してコードをリントする。
適当に index.js を作成してクソコードを記述。

index.js
const        str = "this is string"



　　　　　console.log('hello eslint!');

そして、ESLint CLI を実行してみる。

yarn eslint index.js

実行結果

$ yarn eslint index.js
yarn run v1.22.22
  1:14  warning  'str' is assigned a value but never used  no-unused-vars
  5:1   error    Irregular whitespace not allowed          no-irregular-whitespace
  5:6   warning  'console' is not defined                  no-undef

✖ 3 problems (1 error, 2 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

.
.
.
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!!!

ちゃんとクソ部分を指摘してくれてる。ひとまず ESLint のセットアップ手順はこれで終わり。
次に詳細を見ていく。

ShionShion

設定ファイルの補足

ESLint のルールは基本的に設定ファイルに書いていく。
先ほどの手順で記載したルールを再掲する。

eslint.config.js
import js from "@eslint/js";

export default [
    js.configs.recommended,
   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

まず、 js.configs.recommended は定義済みの構成で ESLint が推奨するルール。
rules に書かれている no-unused-vars は未使用の変数を警告してくれる。
no-undef は宣言されていない変数の使用を警告してくれる。

この例から分かるように、定義済みの構成を使用して、追加で必要な個々のルールは rules に書いていくとよさそう。

ShionShion

設定ファイルの深掘り

プロパティ

設定ファイルは、定義済みの構成を除けば基本的にオブジェクト単位({ })で記載する。
オブジェクトには以下のプロパティで構成されている。

※ ほとんど公式からの流用

  • name - 構成オブジェクトの名前
  • files - 構成オブジェクトを適用する対象ファイル
  • ignores - 構成オブジェクトを適用しないファイル
  • languageOptions - JavaScriptのリント設定
    • ecmaVersion - サポートするECMAScriptのバージョン
    • sourceType - JavaScriptソースコードのタイプ
    • globals - リンティング中にグローバル スコープに追加する必要がある追加オブジェクトを指定するオブジェクト
    • parser - parse() メソッドまたは parseForESLint() メソッドを含むオブジェクト
    • parserOptions - パーサーの parse() または parseForESLint() メソッドに直接渡す追加オプションを指定するオブジェクト
  • linterOptions - リンティングプロセスに関連する設定を含むオブジェクト
    • noInlineConfig - インライン構成が許可されているかどうかを示すブール値
    • reportUnusedDisableDirectives -
  • prosessor - preprocess()メソッドとpostprocess()メソッドを含むオブジェクトか、プラグイン内のプロセッサ名を示す文字列
  • plugins - プラグイン名とプラグイン オブジェクトの名前と値のマッピングを含むオブジェクト
  • rules - 設定されたルールを含むオブジェクト
  • settings - すべてのルールで使用できる情報の名前と値のペアを含むオブジェクト

プロパティ深掘り(抜粋)

Plugins

ESLintルール、設定、プロセッサ、環境のセットを含むことができるnpmモジュール。
基本的にここはカスタムルールが含まれていることが多い。
また、ベストプラクティスなどの強要も可能。
下記の例では eslint-plugin-jsdoc の plugin を利用して JSDoc の記載を必須化する例。

eslint.config.js
import jsdoc from "eslint-plugin-jsdoc";

export default [
    {
        files: ["**/*.js"],
        plugins: {
            jsdoc: jsdoc
        },
        rules: {
            "jsdoc/require-description": "error",
            "jsdoc/check-values": "error"
        }
    }
];

より詳細はこちらを参照されたし。

このスクラップは4ヶ月前にクローズされました