STEP
npm iinitpackage.json
ESLintは文法のError検出や記法を統一するモジュールです。
Prettierも記法を統一するモジュールですが、ESLintよりも強制的です。
PrettierはESLintより記法が良いためPrettierを使います。
npm i
npm i -D\
eslint \
eslint-config-standard \
eslint-plugin-import \
eslint-plugin-promise \
eslint-plugin-node \
eslint-config-prettier \
prettier \
postcss-cli
規約は.eslintrc.jsonに追記します。
規約を決めるのは大変なのでeslint-config-standardのような先人が決めてくれた規約を使います。
規約は名称にeslint-config-が付与されます。
Make sure the module name begins with eslint-config-, such as eslint-config-myconfig.
init
.eslintrc.jsonを作ります。
npx eslint --init
? How would you like to use ESLint? …
To check syntax only
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? …
❯ React
Vue.js
None of these
? Does your project use TypeScript? › No / Yes
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)✔ Browser
✔ Node
? What format do you want your config file to be in? …
JavaScript
YAML
❯ JSON
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? › No / Yes
Successfully created .eslintrc.json file in /Users/
.eslintrc.jsonの形式を問われるのでプロジェクトに合わせて答えましょう。
PrettierとESLintの規約が競合しないように.eslintrc.jsonのextendsにprettierが必要です。
これでESLintのPrettierと競合する規約がoffにされます。
"extends":["standard","prettier"]次に.prettierrc.jsonを作ります。
echo{}> .prettierrc.json
.prettierrc.jsonで変更した規約以外はPrettierの規約が強制されます。
強制されれば、プログラマーが規約で悩む時間とプログラマー同士の規約に絡む厄介な打合せが減ります。
{"trailingComma":"es5","tabWidth":4,"semi":false,"singleQuote":true}package.json
まずPrettierを走らせて、次にESLintを走らせます。
以下のようにESLintとPrettierを走らせるscriptsをpackage.jsonに追記します。
"scripts":{"test":"npm run test:prettier && npm run test:eslint","test:prettier":"prettier --write \"src/**/*.js\"","test:eslint":"eslint \"src/**/*.js\""}後はお好みでhuskyやlint-stagedを使いましょう。
Error/Warning
- Warning: Reactのバージョン指定
eslint --fix 'src/**/*'するとWarningが出ます。
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
内容に従い.eslintrc.jsを以下のように変更します。
Reactのバージョンを指定するプロパティですが、detectを指定すると自動検出されます。
settings:{react:{version:'detect'}}- Error: ecmaVersion
error Parsing error: Invalid value for lib provided: es2021
.eslintrc.jsのecmaVersionをecmaVersion: 2020にします。
ESLintの公式ドキュメントは以下です。
set to 3, 5 (default), 6, 7, 8, 9, 10, 11, or 12 to specify the version of ECMAScript syntax you want to use. You can also set to 2015 (same as 6), 2016 (same as 7), 2017 (same as 8), 2018 (same as 9), 2019 (same as 10), 2020 (same as 11), or 2021 (same as 12) to use the year-based naming.
12でも良さそうですが、issueやsrcを追うのが怠いです（ｵｲ）。
- Error: リントの適用失敗
No files matching the pattern "src/code" were found.
Please check for typing mistakes in the pattern.
もしeslint --fix src/**/*としていればeslint --fix 'src/**/*'として下さい。
Shellを経由するため''で囲わなければ上手くESLintに渡りません。
- Error: importしたReactが未使用
error 'React' was used before it was defined no-use-before-define
@typescript-eslintのバージョンが新しいと発生するのでダウングレードして下さい。
@typescript-eslint/eslint-plugin@4.0.1
@typescript-eslint/parser@4.0.1