目的
[公式](https://prettier.io/docs/en/integrating-with-linters.html#notes)では基本的には非推奨となっているみたいなので、 "eslint-plugin-prettier"を使わずに、Reactで作成したプロジェクトをVSCodeで保存時に フォーマットの自動整形と構文チェックをする。前提
-
node.jsとyarnはインストール済み
-
npx create-react-app
でプロジェクト作成
(この時、eslint 系パッケージはreact-scriptsに含まれている。yarn.lockで確認。) -
Typescriptはここでは使用せず
-
VS Code extensionsにて eslintとprettierを導入済み
(VSCode 拡張用の prettier は、node_modules に prettier がインストールされていれば、そちらを実行するようになっている。ここではCLIでコマンドで実行させずに、エディタ上で自動整理を実行させるために、インストールしておく。)
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
手順
1, `npx create-react-app sample` 2, `cd sample` 3, ` yarn add -D eslint prettier eslint-config-prettier ` 4, `yarn run eslint --init` :eslintrc.jsonファイル作成 (質問に答えていきます) 5, 各ファイルを編集 (prettierrc.jsonは作らず、デフォルトのままになってます。)eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"prettier" //eslintのフォーマットの機能を上書きして機能の競合をなくす
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react","prettier"],
"rules": {
"react/react-in-jsx-scope": "off",
"prettier/prettier": "error"
}
}
settings.json
{ *省略
//liner
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"eslint.alwaysShowStatus": true,
"eslint.lintTask.enable": true,
//formatter
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnPaste": true,
"prettier.packageManager": "yarn",
"javascript.format.enable": false,
"files.autoSave": "onFocusChange",
}