Reactにeslintとprettierをインストールする。

Reactにeslintとprettierをインストールする。

viteを使ったReactにeslintとprettierをインストールする際のメモです。
Reactのimportを絶対パス表記にするのも一緒にしています。
importの順番を整理するプラグインと使っていないimportを消去するプラグインも一緒にインストールしています。

npm i -D eslint eslint-config-airbnb	eslint-config-airbnb-typescript prettier eslint-config-prettier eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-unused-imports vite-tsconfig-paths
npx eslint --init

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "airbnb",
        "prettier"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "import",
        "unused-imports"
    ],
    "settings": {
      "import/resolver": {
        "typescript": {
          "project": "./"
        }
      }
    },
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "react/react-in-jsx-scope": "off",
        "react/jsx-filename-extension": [
          1,
          {
            "extensions": ["ts", ".tsx"]
          }

        ],
        "import/order": [
            "error",
            {
              "groups": [
                "builtin",
                "external",
                "parent",
                "sibling",
                "index",
                "object",
                "type"
              ],
              "pathGroupsExcludedImportTypes": [
                "builtin"
              ],
              "alphabetize": {
                "order": "asc",
                "caseInsensitive": true 
              },
              "newlines-between": "always",
              "pathGroups": [ 
                {
                  "pattern": "@/components/common",
                  "group": "internal",
                  "position": "before"
                },
                {
                  "pattern": "@/components/hooks",
                  "group": "internal",
                  "position": "before"
                }
              ]
            }
          ],
          "no-unused-vars": "off", 
          "unused-imports/no-unused-imports": "warn",
          "jsx-a11y/label-has-associated-control": ["error", {
            "required": {
              "some": ["nesting", "id"]
            }
          }],
          "jsx-a11y/label-has-for": ["error", {
            "required": {
              "some": ["nesting", "id"]
            }
          }]
    }
}

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    host: '0.0.0.0',
    port: 3000
  }
})

{
	"compilerOptions": {
		baseUrl: "./src"
	}
}

参考記事

create-react-appをベースにeslint(airbnb)とprettierを導入