Flat Config を先に案内する

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,
-    },
-  },
-]);
-```