はじめに
クイックスタート
このページは、ESLintの新しい「フラット」構成形式を使用して、TypeScriptコードに推奨ルールを使用してできるだけ早くlintを開始するためのクイックスタートです。
注意
- 同じガイドで、ESLintのレガシー形式については、レガシーESLintの設定を参照してください。
- 型情報を用いたlintのクイックスタート情報については、型付きLintを参照してください。
ステップ1：インストール
まず、ESLint、TypeScript、および当社のツールに必要なパッケージをインストールします。
- npm
- Yarn
- pnpm
npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint
yarn add --dev eslint @eslint/js @types/eslint__js typescript typescript-eslint
pnpm add --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint
ステップ2：構成
次に、プロジェクトのルートにeslint.config.js構成ファイルを作成し、以下を入力します
eslint.config.js
// @ts-check
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
);
このコードは、lint用の推奨構成を有効にします。
ステップ3：ESLintの実行
プロジェクトのルートでターミナルを開き、次のコマンドを実行します
- npm
- Yarn
- pnpm
npx eslint .
yarn eslint .
pnpm eslint .
ESLintは、現在のフォルダー内のすべてのTypeScript互換ファイルをlintし、結果をターミナルに出力します。
詳細
tseslint.config(...)はオプションのヘルパー関数です。— 詳細はこちら。'@eslint/js'/eslint.configs.recommendedは、eslintの推奨構成を有効にします。...tseslint.configs.recommendedは、当社の推奨構成を有効にします。
次のステップ
これがうまくいかない場合は、トラブルシューティングとFAQをご覧ください。
追加構成
次の2つの構成を有効にすることを検討することをお勧めします
strict：バグをキャッチする可能性のある、より意見の多いルールを含むrecommendedのスーパーセット。stylistic：バグを大幅にキャッチしたり、ロジックを変更したりすることなく、一貫したスタイルを強制する追加ルール。
eslint.config.js
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
...tseslint.configs.strict,
...tseslint.configs.stylistic,
);
詳細については、共有構成ドキュメントを参照してください。
型付きLint
また、TypeScriptの型情報の力を利用した、強力なルールを多数提供しています。型付きルール設定ガイドについては、次のページをご覧ください。
ドキュメントリソース
- ESLintの構成については、構成に関するドキュメントで詳しく知ることができます。
- ESLintによって提供されるルールについては、ルールに関するドキュメントで詳しく知ることができます。
- typescript-eslintによって提供されるルールについては、ルールに関するドキュメントで詳しく知ることができます。