メインコンテンツへスキップ

フォーマットについて

ESLintをフォーマットに使用することはお勧めしません。代わりにPrettier、dprint、または同等のツールを使用することをお勧めします。

フォーマッターとリンター​

フォーマッターは、コード内の空白の問題（スペースや改行など）を確認して修正するツールです。フォーマッターは通常、コードロジックや命名ではなく、空白の変更のみを行うため、非常に高速に実行されます。

リンターは、コード内の論理的なスタイルの問題と空白以外のスタイルの問題（命名の一貫性やバグ検出など）を確認して修正するツールです。リンターは、コードに多くの論理ルールを適用するため、実行に数秒以上かかることがよくあります。

リンターをフォーマッターとして使用する場合の問題​

リンターは、解析、チェック、レポート、修正のサイクルで実行するように設計されています。これは、リンターがコードのフォーマットの問題を修正する前に、多くの仲介作業を行う必要があることを意味します。

さらに、リンターは通常、各ルールを互いに分離して実行します。これには、次のようないくつかの問題があります。

  • 2つのlintルールが設定を共有できないため、一方のlintルールの修正によって、もう一方のlintルールの修正に違反が発生する可能性があります（例：一方のlintルールが正しくないインデント文字を使用している可能性があります）。
  • lintルールの修正が競合する（同じコード範囲に適用される）可能性があり、リンターは追加のサイクルを実行して、修正をクリーンなコードセットに適用しようとします。

これらの問題により、リンターの速度が大幅に低下します。これは、型付きリンティングを有効にしているプロジェクトでは、さらに大きな問題になる可能性があります。リンターを使用したフォーマットは、専用のフォーマッターよりも一貫性がなく、エッジケースを処理する能力も劣ります。その結果、フォーマット関連のlintルールのメンテナンスコストは通常非常に高くなります。

Prettierなどの最新のフォーマッターは、元のフォーマットに関係なく、すべてのコードにフォーマットを適用するように設計されています。この設計により、フォーマッターはリンターよりもはるかに低いメンテナンスコストで、より包括的で一貫性のあるものにすることができます。

推奨される使用方法 - Prettier​

typescript-eslintもESLintコアも、推奨されるプリセットでフォーマット関連のルールを有効にしていません。ただし、一部のサードパーティプラグイン構成では、その悪いプラクティスが有効になっている場合があります。

ESLint構成でフォーマットルールが有効になっている場合は、eslint-config-prettierを使用して、ESLint構成でフォーマットルールを無効にすることをお勧めします。その後、ESLintとは別にフォーマッターを構成できます。

この設定を`extends`の最後に追加して使用します

eslint.config.js
// @ts-check

import eslint from '@eslint/js';
import someOtherConfig from 'eslint-config-other-configuration-that-enables-formatting-rules';
import prettierConfig from 'eslint-config-prettier';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...someOtherConfig,
  prettierConfig,
);

`prettier`以外のフォーマッターを使用する場合でも、`eslint-config-prettier`はすべてのフォーマットルールを**オフ**にするだけなので、使用できます。

eslint-plugin-prettier​

eslint-config-prettierは、eslint-plugin-prettierと同じではありません。

  • *設定*は、コアおよび他のプラグインからのルールのみを無効にします。
  • *プラグイン*は、ESLint内でPrettierを読み込んで実行します。

ESLint内でPrettierを実行すると速度が低下する可能性があります。パフォーマンスのトラブルシューティング > eslint-plugin-prettierを参照してください。ただし、ESLintでPrettierのロジックを再実装していないため、フォーマットにリンターを使用することについての前述の注意事項は、`eslint-plugin-prettier`にも適用されません。

ESLintコアとフォーマット​

ほとんどのlintルールは、2つまたは3つのカテゴリのいずれかに分類されます

  • 論理的：コードの実行時の動作のロジックに関係するルール（欠落している`await`や無効な論理チェックなど）。
  • スタイル的：コードの実行時の動作には影響するが、一般的にはロジックには影響しないスタイルの懸念事項に関係するルール。これらは主に命名、またはどの程度の同等の構文構造を使用するか（関数宣言とアロー関数など）に関するものです。
    • フォーマット：コードの実行時の動作に影響を与えることなく、トリビア（セミコロン、空白など）のみに関係するスタイルルール。これらのルールは、Prettierなどの専用フォーマッターと競合します。

ESLintの2020年のルールポリシーの変更に関するブログ投稿によると、ESLint自体は、 *フォーマット*ルールを含む *スタイル的*ルールから移行しています。

スタイルルールは凍結されています。スタイルルールにもうオプションを追加することはありません。すべての人の個人的な好みに満足させる方法はないことがわかりました。また、ほとんどのルールには、すでに理解しにくいオプションがたくさんあります。スタイルルールとは、スペース、規則、そして一般的にエラーやより良い方法を強調表示しないものに関するものです。

私たちは、ESLintチームの *フォーマット*および *スタイル的*ルールからの移行を反映しています。バグ修正を除き、フォーマットまたはスタイル関連の新しいプルリクエストはtypescript-eslintで受け入れられません。

注記

stylistic設定は非推奨でも推奨されていません。TypeScript関連のスタイルの一貫性を強制するために、これらの設定とそのルールは引き続き含まれます。

eslint-stylistic​

フォーマットに包括的なフォーマッターを使用することの欠点は、コードに厳密に意見が適用されることです。Prettierでコードを無視することや、`// prettier-ignore`コメントなどをインラインで含むなど、他のフォーマッターを使用することはできますが、フォーマッターはlintルールよりもはるかに意見が分かれています。

eslint-stylisticプロジェクトは、 *フォーマット*および *スタイル的*ルールを含むESLintプラグインを提供します。専用のフォーマッターを使用したくない場合は、このプラグインをフォーマッターとして使用できます。

そのプロジェクトの動機の詳細については、ESLint Stylistic > なぜ？を、設定方法については、ESLint Stylistic > はじめにを参照してください。