create-react-appした後のeslint/prettierを設定した時の試行錯誤をメモ
create-react-appでアプリ初期構築
$ npx create-react-app my-react-app
typescriptで書きたい場合は以下 –typescript オプションを記載する
$ npx create-react-app my-react-app --typescript
VScodeのプラグインを入れる
- Prettier – Code formatter をExtentionで検索してinstall
- ESLint のExtentionもinstall
この時点でApp.tsxを編集して保存すると自動整形がかかり、
- ダブルクォーテーション
- 文末にセミコロン
が挿入される。
これは、どうもvscode自体の大本のsettingsのprettierの設定によるものっぽい
File -> Preferences -> Settings -> Extentions -> Prettierの
– Semi
– Single Quote
がそうみたいだ。
ここを変えると適応されるが、環境が変わるとその環境に依存されるので、設定ファイルに書いておきたい。
UserとWorkspaceがあるが、Workspaceの方を変えると、.vscode/settings.json が出来てプロジェクト固有の設定になるっぽい。
でもここで疑問が、.prettierrc.jsonという設定ファイルに書かれた設定はどうなるのか。
たぶんこっちに書いた方を優先させるようにするんだと思う。
なので、以下settings.jsonの以下をfalseにしてvscodeの自動フォーマットをoffに、.prettierrc.jsonの設定をonにするように以下のようにする
{
"editor.formatOnSave": false, // これでvscode自体のformatがoff
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // これで.eslintと.prettierrcの設定をon
}
}
packageのinstall
# typescript (--typesciptオプション付きでcreate-react-appしたのでいらないか)
yarn add -D typescript
# eslist (yarn.lockのreact-scriptsの依存を見るとeslintが入っているのでこれはやらない方がよいか) yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
# prittier
$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
eslintをinstallして $ yarn start すると下記のエラーでますので、eslinstをuninstallしよう。どうもreactですでにeslintを使っているので余計にインストールするなということかな。
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^6.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
eslintを削除
$ $ yarn remove eslint
prettierでコード整形してみる
$ npx prettier --write src/App.tsx
無駄に改行していたり、インデントがそろっていないとちゃんと整形してくれる。
jsxの中のhtmlライクなところもちゃんとやってくれる。
ファイルの保存でeslintがきいていないような気がしたので以下出力パネルを見てみると
eslint-plugin-react-appというパッケージが足りていないエラーが出ているみたいだったのでinstall
$ yarn install -D eslint-plugin-react-app
こちらの記事が参考になった。ありがとうございます。
https://note.kiriukun.com/entry/20190817-eslint-not-working-in-vscode
まとめ
結局、create-react-app後に yarn install したのは以下でeslintはreact-scriptに依存しているものを使っていることになる。
package.json
package.json 抜粋
"devDependencies": {
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react-app": "^6.2.2",
"prettier": "^2.1.1"
}
.vscode/settings.json
.vscode/settings.json は単純に、vscode自体の自動整形をoffにして、パッケージのをonにしているだけ
.vscode/settings.json
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
.pretterrc.json
.pretterrc.json ファイル名がrが一つ足りなかったのでしばらくハマった。。
文末のセミコロンは無し、文字列はシングルクォートで
.pretterrc.json
{
"semi": false,
"singleQuote": true,
"printWidth": 120
}
.eslintrc.json
.eslintrc.json これが一番設定が多くて謎だが、どこかから拝借してきてコピペ
.eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"eslint:recommended",
"plugin:prettier/recommended",
"prettier/@typescript-eslint"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "react-app", "react-hooks", "@typescript-eslint"],
"rules": {
"no-unused-vars": 0,
"semi-spacing": [
"error",
{
"after": true,
"before": false
}
],
"no-extra-semi": "error",
"no-unexpected-multiline": "error",
"no-unreachable": "error",
"@typescript-eslint/no-unused-vars": 0,
"@typescript-eslint/no-use-before-define": [
0,
{ "functions": false, "classes": false }
],
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/member-delimiter-style": "off",
"indent": [2, 2, { "SwitchCase": 1 }],
"react/prop-types": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"prettier/prettier": "error"
}
}
Comments