From 4c2db66cb9a64f0af3e44be7e743320788f90005 Mon Sep 17 00:00:00 2001 From: Susisu Date: Thu, 5 Sep 2024 01:37:18 +0900 Subject: [PATCH] =?UTF-8?q?Flat=20Config=20=E3=82=92=E5=85=88=E3=81=AB?= =?UTF-8?q?=E6=A1=88=E5=86=85=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/usage.md | 196 +++++++++++++++++++++++++------------------------- 1 file changed, 98 insertions(+), 98 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index b299081..734f4d1 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -1,5 +1,103 @@ # 使い方 +## `eslint.config.js` (Flat Config) を使う場合 + +Flat Config に対しては `@hatena/eslint-config-hatena/flat` から設定を作成するためのビルダー関数を提供しています。 + +最も簡単な利用方法は以下のようになります。 + +```javascript +import config from '@hatena/eslint-config-hatena/flat'; + +export default config(); +``` + +これは `.eslintrc` での以下の設定に相当します。 + +```javascript +module.exports = { + root: true, + extends: ['@hatena/hatena', '@hatena/hatena/+typescript', '@hatena/hatena/+prettier'], +}; +``` + +### TypeScript + +TypeScript に関連した設定はデフォルトで有効になっているため、特別に設定を追加する必要はありません。TypeScript の設定ファイルはデフォルトでは `./tsconfig.json` が使われます。 + +ESLint を実行するディレクトリが `tsconfig.json` が配置されているディレクトリと異なり、うまく `tsconfig.json` を解決できない場合は、`tsconfigRootDir` を指定してください。 + +```javascript +export default config({ + tsconfigRootDir: import.meta.dirname, +}); +``` + +参照する TypeScript の設定ファイルを変更する場合は `tsProject` オプションを使用してください。ただし、この設定をすると ESLint 以外のツールとの間で型情報の不一致が生まれる可能性があるため、非推奨です。 + +```javascript +export default config({ + tsProject: './tsconfig.lint.json', +}); +``` + +typescript-eslint v8 から追加された [`projectService` オプション](https://typescript-eslint.io/packages/parser#projectservice)は、現在オプトインとして提供しています。使用する場合は `tsProjectService` を有効にしてください (`tsProject` よりも優先されます)。 + +```javascript +export default config({ + tsProjectService: true, + tsconfigRootDir: import.meta.dirname, +}); +``` + +### React + +React に関連した設定やルールを有効化するには、`react` オプションを有効化してください。 + +```javascript +export default config({ + react: true, +}); +``` + +### Prettier + +デフォルトでは Prettier を併用することを想定して、Prettier と衝突するフォーマットに関するルールを全て無効化するようになっています。 + +Prettier を使用せず、ESLint を使ってフォーマットを行いたい場合は、`prettier` オプションを無効化した上でフォーマットに関するルールを有効化してください。 + +```javascript +export default config({ + prettier: false, +}); +``` + +### カスタム設定 + +ビルダー関数の第二引数には、カスタム設定の配列を与えることができます。プロジェクト固有の設定はここに追加するのがおすすめです。 +[typescript-eslint のユーティリティ](https://typescript-eslint.io/packages/typescript-eslint#config)をラップしているため、`extends` が利用できます。 + +```javascript +import config from '@hatena/eslint-config-hatena/flat'; +import globals from 'globals'; + +export default config({}, [ + { + files: ['src/**/*.js'], + extends: [somePlugin.recommended], + languageOptions: { + globals: { + ...globals.es2021, + ...globals.browser, + }, + }, + rules: { + 'no-console': 0, + }, + }, +]); +``` + ## `.eslintrc` を使う場合 - このライブラリでは `@hatena/hatena/+typescript` や `@hatena/hatena/+react` など複数の config を提供しています @@ -116,101 +214,3 @@ React を利用しているプロジェクト向けの config です。 ![required no](https://img.shields.io/badge/required-no-inactive) [![see source](https://img.shields.io/badge/see-source-yellow)](https://github.com/hatena/eslint-config-hatena/blob/main/lib/classic/prettier.js) prettier を利用しているプロジェクト向けの config です。 - -## `eslint.config.js` (Flat Config) を使う場合 - -Flat Config に対しては `@hatena/eslint-config-hatena/flat` から設定を作成するためのビルダー関数を提供しています。 - -最も簡単な利用方法は以下のようになります。 - -```javascript -import config from '@hatena/eslint-config-hatena/flat'; - -export default config(); -``` - -これは `.eslintrc` での以下の設定に相当します。 - -```javascript -module.exports = { - root: true, - extends: ['@hatena/hatena', '@hatena/hatena/+typescript', '@hatena/hatena/+prettier'], -}; -``` - -### TypeScript - -TypeScript に関連した設定はデフォルトで有効になっているため、特別に設定を追加する必要はありません。TypeScript の設定ファイルはデフォルトでは `./tsconfig.json` が使われます。 - -ESLint を実行するディレクトリが `tsconfig.json` が配置されているディレクトリと異なり、うまく `tsconfig.json` を解決できない場合は、`tsconfigRootDir` を指定してください。 - -```javascript -export default config({ - tsconfigRootDir: import.meta.dirname, -}); -``` - -参照する TypeScript の設定ファイルを変更する場合は `tsProject` オプションを使用してください。ただし、この設定をすると ESLint 以外のツールとの間で型情報の不一致が生まれる可能性があるため、非推奨です。 - -```javascript -export default config({ - tsProject: './tsconfig.lint.json', -}); -``` - -typescript-eslint v8 から追加された [`projectService` オプション](https://typescript-eslint.io/packages/parser#projectservice)は、現在オプトインとして提供しています。使用する場合は `tsProjectService` を有効にしてください (`tsProject` よりも優先されます)。 - -```javascript -export default config({ - tsProjectService: true, - tsconfigRootDir: import.meta.dirname, -}); -``` - -### React - -React に関連した設定やルールを有効化するには、`react` オプションを有効化してください。 - -```javascript -export default config({ - react: true, -}); -``` - -### Prettier - -デフォルトでは Prettier を併用することを想定して、Prettier と衝突するフォーマットに関するルールを全て無効化するようになっています。 - -Prettier を使用せず、ESLint を使ってフォーマットを行いたい場合は、`prettier` オプションを無効化した上でフォーマットに関するルールを有効化してください。 - -```javascript -export default config({ - prettier: false, -}); -``` - -### カスタム設定 - -ビルダー関数の第二引数には、カスタム設定の配列を与えることができます。プロジェクト固有の設定はここに追加するのがおすすめです。 -[typescript-eslint のユーティリティ](https://typescript-eslint.io/packages/typescript-eslint#config)をラップしているため、`extends` が利用できます。 - -```javascript -import config from '@hatena/eslint-config-hatena/flat'; -import globals from 'globals'; - -export default config({}, [ - { - files: ['src/**/*.js'], - extends: [somePlugin.recommended], - languageOptions: { - globals: { - ...globals.es2021, - ...globals.browser, - }, - }, - rules: { - 'no-console': 0, - }, - }, -]); -```