Vite + React + SWC + ESLintの環境を整える

# ローカル環境になければインストール
$ nodenv install 18.15.0
 
# v18.15.0を使用する
$ nodenv local 18.15.0
 
# nodeのバージョンを指定出来た事を確認
$ node -v
v18.15.0

$ npm create vite
# or
$ yarn create vite

cd vite-project
yarn
yarn dev

$ yarn add -D prettier

{
  "semi": true,
  "singleQuote": true,
  "bracketSameLine": true,
  "printWidth": 100
}

$ npx prettier --write .

$ yarn add -D eslint

$ npm init @eslint/config

Need to install the following packages:
  @eslint/create-config@0.4.2
Ok to proceed? (y)

? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? ...
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? › No / Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

? How would you like to define a style for your project? …
❯ Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? …
❯ Standard: https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript

? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.0.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@*
? Would you like to install them now? › No / Yes

? Which package manager do you want to use? …
  npm
❯ yarn
  pnpm

{
  "name": "vite-project",
  ・・・
  "devDependencies": {
    ・・・
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-standard-with-typescript": "^34.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.32.2",
    ・・・
  }
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:react/recommended', 'standard-with-typescript'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
}

$ yarn add -D eslint-config-airbnb eslint-plugin-react-hooks eslint-plugin-jsx-a11y

// 変更前
extends: ['plugin:react/recommended', 'standard-with-typescript'],
 
// 変更後
extends: ['plugin:react/recommended', 'airbnb', 'airbnb/hooks'],

$ yarn remove eslint-config-standard-with-typescript

$ npx eslint . --ext .js,.jsx,.ts,.tsx
 
 
/Users/yuu/src/github.com/yuki-takara/react-vite-sample/src/App.tsx
   9:5   error  'React' must be in scope when using JSX     react/react-in-jsx-scope
   9:5   error  JSX not allowed in files with extension '.      react/jsx-filename-extension
・・・

$ yarn add -D eslint-config-airbnb-typescript @typescript-eslint/parser

// 変更前
extends: ['plugin:react/recommended', 'airbnb', 'airbnb/hooks'],
 
// 変更後
extends: ['plugin:react/recommended', 'airbnb', 'airbnb-typescript', 'airbnb/hooks'],

// 変更前
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module'
},
 
// 変更後
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: './tsconfig.json',
},

$ yarn add -D eslint-config-prettier

// 変更前
extends: ['plugin:react/recommended', 'airbnb', 'airbnb-typescript', 'airbnb/hooks'],
 
// 変更後
extends: ['plugin:react/recommended', 'airbnb', 'airbnb-typescript', 'airbnb/hooks', 'prettier'],

{
  "semi": false,
  ・・・
}

$ npx eslint . --ext .js,.jsx,.ts,.tsx
 
1:26  error  Missing semicolon       @typescript-eslint/semi
・・・

$ yarn add -D eslint-plugin-unicorn

// 変更前
extends: ['plugin:react/recommended', 'airbnb', 'airbnb-typescript', 'airbnb/hooks', 'prettier'],
 
// 変更後
extends: [
  'plugin:react/recommended',
  'airbnb',
  'airbnb-typescript',
  'airbnb/hooks',
  'plugin:unicorn/recommended',
  'prettier',
],

$ npx eslint . --ext .js,.jsx,.ts,.tsx
 
6:30  error  Prefer `.querySelector()` over `.getElementById()`  unicorn/prefer-query-selector

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:unicorn/recommended',
    'prettier',
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react'],
  rules: {},
}

{
  ・・・
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  ・・・
}

$ yarn run lint

rules: {
  'unicorn/filename-case': [
    'error',
    {
      cases: {
        kebabCase: true,
        pascalCase: true,
      },
    },
  ],
},

rules: {
  ・・・
  'react/react-in-jsx-scope': 'off',
},

// 修正前
<a href="https://vitejs.dev" target="_blank">
</a>
 
// 修正後
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
</a>

// 修正前
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
 
// 修正後
<button onClick={() => setCount((count) => count + 1)} type="button">
  count is {count}
</button>

// 修正前
<button onClick={() => setCount((count) => count + 1)} type="button">
  count is {count}
</button>
 
// 修正後
<button onClick={() => setCount((previousCount) => previousCount + 1)} type="button">
  count is {count}
</button>

// 修正前
ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
// 修正後
ReactDOM.createRoot(document.querySelector('#root') as HTMLElement)

rules: {
  ・・・
  'unicorn/prevent-abbreviations': [
    'error',
    {
      allowList: {
        env: true,
      },
    },
  ],
},

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/vite.config.ts`
using `parserOptions.project`: /users/yuu/src/github.com/yuki-takara/react-vite-sample/tsconfig.json

However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project

ignorePatterns: ['vite.config.ts'],

$ yarn run lint
yarn run v1.22.19
$ eslint . --ext .js,.jsx,.ts,.tsx
✨  Done in 1.56s.

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "eslint": "^8.0.1",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unicorn": "^46.0.0",
    "prettier": "^2.8.4",
    "typescript": "*",
    "vite": "^4.1.0"
  }
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:unicorn/recommended',
    'prettier',
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react'],
  rules: {
    'unicorn/filename-case': [
      'error',
      {
        cases: {
          kebabCase: true,
          pascalCase: true,
        },
      },
    ],
    'react/react-in-jsx-scope': 'off',
    'unicorn/prevent-abbreviations': [
      'error',
      {
        allowList: {
          env: true,
        },
      },
    ],
  },
  ignorePatterns: ['vite.config.ts'],
};