ESLintとは？JavaScriptのリンターを解説

ESLintは、JavaScriptとTypeScriptを静的に解析するlinterであり、コードが実行される前に、起こりうるバグを検出し一貫したコードスタイルを強制します。

ESLintは、コードを実行せずに読み取り、おそらく間違いであるパターンやチームの規約に違反するパターンを指摘します。ルールやpluginを通じて高度に設定可能であり、JavaScriptおよびTypeScriptのpipelineにおける標準的なquality gateとなっています。

ESLintとは何か

ESLintは、JavaScriptおよびTypeScript向けのプラグイン可能な静的解析ツールです。コードをASTにパースし、その上で設定可能なルールのセットを実行し、問題をwarningまたはerrorとして報告します。pluginにより、フレームワーク（React、Vue）やTypeScript固有のチェックへと拡張されます。

ルールと設定

各ルールは1つのこと、例えば未使用の変数を禁止したり、特定のimport順序を要求したりといったことをチェックします。設定ファイル（flat configまたは古い.eslintrc）でルールを有効にし、その重大度を設定します。多くの場合、共有presetを拡張します。多くのルールは"eslint --fix"で自動修正可能で、これはルールを満たすようにコードを書き換えます。

使用例

ディレクトリに対してlintを実行し、修正できるものを自動修正します。

Common ESLint commands

# report problems
npx eslint src/

# auto-fix the fixable ones
npx eslint src/ --fix

CI/CDでの役割

CIでは、ESLintはエラーが見つかると非ゼロで終了するquality gateとして実行され、ルール違反があるとbuildを失敗させます。"--max-warnings 0"を付けて実行すると、warningを厳格なハード失敗に変えられます。lintは高速で早期に問題を検出するため、通常はpipelineの最初のチェックの1つとして、テストの前に実行されます。

代替手段

BiomeとOxlintは、より新しく、はるかに高速なRustベースのlinterで、速度の面でESLintとPrettierを置き換えることを目指しています。TSLintは古いTypeScript向けlinterでしたが、現在はESLintに取って代わられ非推奨となっています。ESLintは、その膨大なルールとpluginのエコシステムのおかげで標準であり続けています。

重要なポイント

ESLintはJS/TSを静的に解析し、バグを検出しスタイルを強制します。
ルールは設定可能であり、多くの問題は--fixで自動修正できます。
CIではエラーがあるとbuildを失敗させます。高速なquality gateとして早い段階で実行しましょう。