Prettier · Opinionated Code Formatter
を導入してみました
ESlintをすでに使っていたところから始めました
yarn add prettier --dev --exact$ vim .prettierrc
{
"trailingComma": "es5",
"semi": false,
"singleQuote": true
}$ vim .prettierignore
package.jsonIntegrating with ESLint · Prettier
を読んで
ESLintにPrettierを実行してもらうプラグイン
コード整形ルールは、PrettierでやるのでESLintのコード整形のルールは削除する
そのため
を入れるとESLintのコード整形ルールを無効にしてくれる
yarn add --dev eslint-plugin-prettier eslint-config-prettier設定はここをみる
$ vim .eslint.json
{
"extends": [
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": "error"
}
}を追加
これでPrettierの整形ルールをみて、ESLintでエラーになる
Prettierの整形ルールでESLintがエラーになってしまう場合、rulesに追記する
既存で使っていたコード整形のルールを.eslint.jsonからは削除した
Prettierのルールを用意
$ vim .prettierrc
{
"trailingComma": "es5",
"semi": false,
"singleQuote": true
}$ vim .prettierignore
package.jsonPrettierとESLintで重複した設定があるか見るには
$ eslint --print-config . | eslint-config-prettier-checkCLIでPrettierをかけるなら
$ prettier --write src/**/*.jsとかでかけます
最終的にはReactプロジェクトでeslint-plugin-reactも使っていたので
$ vim .eslint.json
{
"extends": [
"plugin:prettier/recommended",
"plugin:react/recommended",
"prettier/react"
],
"plugins": [
"prettier",
"react"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"env": {
"browser": true,
"es6": true
},
"rules": {
"prettier/prettier": "error",
"react/prop-types": 0
}
}となりました