Vite+React+Typescript+EsLint+Prettierの環境構築でめちゃくちゃハマった話(2023/8)

プログラミング

結論

@eslint/config から Airbnb スタイルが外されていて Standard スタイルを選択すると dependency ERROR を起こす。

最後に気づいたけど多分 yarn を使えば解決？（yarn だとバージョン指定すると勝手にダウングレードしてくれる。）

どうも Airbnb が完全に TypeScript に対応していないため外されたようだけど、記事やら blog やら見ると皆 Airbnb スタイルでやっていて、めちゃくちゃハマったわ…。

npm でのインストール方法を自分用に書いておく。

出てくるエラー

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vite-react@0.0.0
npm ERR! Found: @typescript-eslint/eslint-plugin@6.3.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"^6.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @typescript-eslint/eslint-plugin@"^5.52.0" from eslint-config-standard-with-typescript@37.0.0
npm ERR! node_modules/eslint-config-standard-with-typescript
npm ERR! eslint-config-standard-with-typescript@"37.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\12700pc\AppData\Local\npm-cache_logs\2023-08-10T16_19_37_248Z-eresolve-report.txt

Vite を使って React+Typescript SWC をインストール

まずは通常の流れ通り

npm create vite@latest
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y) y
√ Project name: ... vite-react
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

Scaffolding project in C:\...\vite-react...

Done. Now run:

  cd vite-react
  npm install
  npm run dev

pakege.json の@typescript-eslint/eslint-plugin と@typescript-eslint/parser のバージョンを変える

ここで書いてある通り npm install すると pakage.json にあるものがインストールされるわけだが、ここで EsLint 関係もインストールされていて、ここのバージョンがeslint-config-standard-with-typescript のバージョンと合わない様子。

create viteで作成されるpakege.json

{
  "name": "vite-pro",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",

この 2 つね

ここを対応しているバージョンでインストールするように書き換える。

 //省略
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.52.0",

pakege.jsonを保存してnpm install

npm install

added 149 packages, and audited 150 packages in 3s

めちゃくちゃ早くてびっくりしたんだが

(何回も npm install したので一番早かったのを思わずコピーしてしまった。)

EsLint のコンフィグをする

viteの設定、上のnpm installですでに入っているので eslint のインストールは省略できる。(npm install eslint –save-dev)

コンフィグだけでよい。

npm init @eslint/config

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
√ What format do you want your config file to be in? · YAML
Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest
@typescript-eslint/eslint-plugin@^5.52.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 
eslint-plugin-n@^15.0.0 || ^16.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
Installing eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, 
@typescript-eslint/eslint-plugin@^5.52.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2,
eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@_

added 98 packages, and audited 253 packages in 5s

99 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

これで提案されるプラグイン等をそのままインストールしてもエラーが出ない。

.eslintrc.yml を編集する

parser と plugins を追記。以下ここまでの.eslintrc.yml

env:
  browser: true
  es2021: true
parser: '@typescript-eslint/parser'
extends:
  - standard-with-typescript
  - plugin:react/recommended
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - react
  - '@typescript-eslint'
rules: {}

pulugins にreact-hooks とか入れたほうがいいのかな？

Prettier をインストール

npm install prettier --save-dev

以下ここまでの pakege.json

{
  "name": "vite-pro",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.52.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "eslint": "^8.46.0",
    "eslint-config-standard-with-typescript": "^37.0.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-n": "^16.0.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "prettier": "^3.0.1",
    "typescript": "^5.1.6",
    "vite": "^4.4.5"
  }
}

eslint-config-prettier をインストール

eslint-config-prettier で eslint と prettier で競合する時、eslint 側のルールを off にしてくれるらしい。

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

extends に prettier を追記

env:
  browser: true
  es2021: true
parser: "@typescript-eslint/parser"
extends:
  - standard-with-typescript
  - plugin:react/recommended
  - prettier
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - react
  - '@typescript-eslint'
rules: {}

.prettierrc.yml ファイルを作成

tabWidth: 2
singleQuote: true
trailingComma: 'none'
semi: false
useTabs: false
printWidth: 150
endOfLine: 'lf'

まあお好みで

VSCode の設定をする

VSCode の拡張機能である ESLint と Prettier をインストールして、ファイル保存時にフォーマットが自動で行われるような設定をする。

...,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true

commit して github にあげる

ちょっと React いじりたいときはこっから持ってきて使おうと思ってgithubに置いておく。

vite で initialize すると.gitignore はあるけど.git はないのねと思ったり。

それにしてもエラー対応で知識がつくってのは本当ですね。

pakege.json とここまで向かい合ったの初めてだし@^の意味とかも初めて調べました。

GitHub - katahiro4/vite-react
Contribute to katahiro4/vite-react development by creating an account on GitHub.
github.com

参考サイト

Viteで作成したReact（TypeScript）プロジェクトにEsLintとPrettierを導入する（2022/02）
zenn.dev

コメント

タイトルとURLをコピーしました