🔖

create-react-appを使わないReactにFlat configなESLint入れる

2023/03/14に公開

React

tech

はじめに

前回create-react-appを使わないReactのTypeScript化を行った。

このままだと開発しにくいので、ESLintとPrettierを入れてく。
なおESLintは現在（2023年3月9日）試験的機能として提供されているFlat configを用いて設定を行う。

成果物はこちら。

環境

eslint: v8.35.0
prettier: v2.8.4

※ 今回追加する主となるパッケージのバージョンのみ記載

手順

ESLintのインストール

下記のコマンドでESLintと関連パッケージをインストールする。
pluginやconfigは良いのがあれば追記していく。

$ yarn add --dev eslint eslint-plugin-import eslint-plugin-unused-imports eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier

eslint
- https://github.com/eslint/eslint
- ESLintのコアパッケージ
eslint-plugin-import
- https://github.com/import-js/eslint-plugin-import
- importする順序など、importに関するルールセットを提供する
eslint-import-resolver-typescript
- https://github.com/import-js/eslint-import-resolver-typescript
- eslint-plugin-importプラグインがTypeScriptを扱えるようにする
eslint-plugin-unused-imports
- https://github.com/sweepline/eslint-plugin-unused-imports
- 使用されていないimportなどに関するルールセットを提供する
eslint-plugin-react
- https://github.com/jsx-eslint/eslint-plugin-react
- React.jsに関するルールセットを提供する
eslint-plugin-react-hooks
- https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks
- React.jsのhooksに関するルールセットを提供する
@typescript-eslint/eslint-plugin
- https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin
- TypeScriptに関するルールセットを提供する
@typescript-eslint/parser
- https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser
- TypeScriptのコードをlintできるようにするパーサーを提供する
prettier
- https://github.com/prettier/prettier
- コードフォーマッター
eslint-config-prettier
- https://github.com/prettier/eslint-config-prettier
- prettierと競合するルールセットを全てオフにするためのプラグイン

ESLint設定ファイルを作成する

eslint.config.js

import pluginTypeScript from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import pluginPrettier from 'eslint-config-prettier';
import pluginImport from 'eslint-plugin-import';
import pluginReact from 'eslint-plugin-react';
import reactConfigRecommended from 'eslint-plugin-react/configs/recommended.js';
import pluginUnusedImport from 'eslint-plugin-unused-imports';
import pluginReactHooks from 'eslint-plugin-react-hooks';

export default [
  {
    ignores: ['./dist'],
  },
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: typescriptParser,
    },
    plugins: {
      '@typescript-eslint': pluginTypeScript,
    },
    rules: {
      ...pluginTypeScript.configs['eslint-recommended'].rules,
      ...pluginTypeScript.configs['recommended'].rules,
    },
  },
  {
    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
    settings: {
      react: {
        version: 'detect',
      },
      'import/resolver': {
        node: {
          extensions: ['.js', '.jsx', '.ts', '.tsx'],
        },
        typescript: {},
      },
    },
    plugins: {
      react: pluginReact,
      'react-hooks': pluginReactHooks,
      import: pluginImport,
      'unused-imports': pluginUnusedImport,
    },
    rules: {
      ...pluginImport.configs['recommended'].rules,
      ...reactConfigRecommended.rules,
      ...pluginPrettier.rules,
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'no-unused-vars': 'off',
      'unused-imports/no-unused-imports': 'error',
      'import/order': [
        'error',
        {
          groups: ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type'],
          pathGroups: [
            {
              pattern: '{react,react-dom/**,react-router-dom}',
              group: 'builtin',
              position: 'before',
            },
          ],
          pathGroupsExcludedImportTypes: ['builtin'],
          alphabetize: {
            order: 'asc',
          },
          'newlines-between': 'never',
        },
      ],
    },
  },
];

Prettier設定ファイルを作成する

.prettierrc.json

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto",
  "singleAttributePerLine": false
}

.prettierignore

node_modules/
dist/

package.jsonを修正する

package.json

{
  ...略
+  "type": "module",
  "scripts": {
    "start": "webpack-dev-server .",
-    "build": "webpack ."
+    "build": "webpack .",
+    "lint": "ESLINT_USE_FLAT_CONFIG=true eslint .",
+    "lint:fix": "ESLINT_USE_FLAT_CONFIG=true eslint --fix .",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
  },
  ...略  
}

実行

CLIで下記のコマンドを実行すると構文がチェックされる。

$ yarn lint

修正までしたい場合は下記のコマンドを実行する。

$ yarn lint:fix && yarn format

おわりに

Flat config以前で使っていたextendsオプションが使えればもっとコンパクトに記述できそうだけど、練習も兼ねてなるべく明示的に書いてみた。
書いてみたが、そもそも適切に書けているのか分からないので、ミスなどあれば指摘してくれると嬉しい。