目的
公式では基本的には非推奨となっているみたいなので、
"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",
}