Vite+React+TypeScriptで色々試す
おーらんまずは環境を作ります
早速以下を実行
npm create vite
こちらが参考になりました。
私の環境ではnpmのバージョンが古かったようでnpm run devするとsh: vite: command not foundエラーが出ました。こちらはnpm updateで解決。
おーらん環境構築はこの方法でも可能。
npm init vite mylint-app -- --template react-ts
npm create viteで作ったプロジェクトと比較したら全く同じ。
作成時につけたプロジェクト名だけ違う
おーらん続いてEsLintを入れてみます。
参考にしたのは上の記事から引き続き。
ほぼ同じ調子で進みましたがstyle guideの内容が若干変わっていて
AirbnbとGoogleが候補から無くなり、StandardとXOの2択になっていました。
一番上にあったStandardを選択。
おーらんPackage.jsonを見るとeslint-plugin-react-hooksが入っていなかったので個別に追加します。
npm install eslint-plugin-react-hooks --save-dev
React Hooksはめちゃくちゃ使いますのでね。
おーらん設定を続けます。
参考にしていた情報と随分違っていたため、何も考えずまずは下のように追加しました。
（そういえばparserの定義がないけど、大丈夫かこれ）
env:
browser: true
es2021: true
extends:
- plugin:react/recommended
- standard-with-typescript
+ - plugin:react-hooks/recommended
overrides: []
parserOptions:
ecmaVersion: latest
sourceType: module
+ jsx: true
+ project: ./tsconfig.json
plugins:
- react
+ - react-hooks
+ - '@typescript-eslint'
rules: {
+ react-hooks/rules-of-hooks: error,
+ react-hooks/exhaustive-deps: warn
}
さらにpackage.jsonにも定義を追加してlintを呼び出せるようにします。
ここは参考情報と同じです。
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
+ "lint": "eslint --ext .tsx,.ts src/",
+ "lintfix": "npm run lint -- --fix"
},
parserが気になったので調べたところ、以下のサイトでこんな記述を見つけました
ESLint は標準で JavaScript コードのパースに対応していますが、TypeScript コード (.ts、.tsx) を扱えるようにするには、TypeScript 用のパーサー (@typescript-eslint/parser) をインストールして指定する必要があります。
ところがnpm run lintを実行してみるとtsxファイルでもチェックしてくれるようです。
おーらんESLintの公式を見てもparserのデフォルト動作について変更等の情報が見つけられなかったので、参考にした情報に合わせておくことにします。
ここまでの手順で入っていなかったのでparserをインストール
npm install --save-dev @typescript-eslint/parser
あとはymlを修正
env:
browser: true
es2021: true
extends:
- plugin:react/recommended
- standard-with-typescript
- plugin:react-hooks/recommended
overrides: []
parserOptions:
ecmaVersion: latest
sourceType: module
jsx: true
project: ./tsconfig.json
plugins:
- react
- react-hooks
- '@typescript-eslint'
rules: {
react-hooks/rules-of-hooks: error,
react-hooks/exhaustive-deps: warn
}
+ parser: "@typescript-eslint/parser"
ここまでやっても動作は特に変わらず。
おーらん続けてprettierをインストール。これは手順通りに進むので詳細は割愛。
npm install prettier --save-dev
npm install eslint-config-prettier --save-dev
prettierの設定を少しいじって折り返しの文字数をデフォルト80→60に変更しました。
短くしすぎると行数が増えちゃうので要注意。
tabWidth: 2
singleQuote: true
trailingComma: 'none'
semi: false
useTabs: false
+ printWidth: 60
ついでに保存時に整形する設定も有効にします。（VSCode側の設定）
おーらんまだルールに引っかかるので、制限を減らすかコードを直すかが必要。
この辺はESLintの設定を見つつ要調整かな。
1人用テストプロジェクトだから雰囲気掴めればOK。
