この記事は?
react で開発するときにエラーが起きないようにチェックしたり(ESLint)、ソースコードを自動で綺麗に整形したり(Prettier)することを実現します。
ESLint 導入
以下を実行。
$ yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
その後設定ファイルを記述します。
.eslintrc.js
module.exports = {
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import"
],
};
Prettier 導入
prettier と eslint の競合を防ぐため、prettier-eslint を使用します。
以下を実行。
$ yarn add -D eslint prettier-eslint prettier-eslint-cli
実行準備
簡単に実行できるよう、package.json に記述します。
{
...省略
"scripts": {
...省略
"lint": "prettier-eslint --write src/*"
},
...省略
実行
以下で実行できます。
prettier で整形した後、eslint --fix
を実行してくれます。
$ yarn lint
おまけ
これでいけると思っているのだが、以下を実行したらエラーになった。
$ ./node_modules/eslint/bin/eslint.js src/index.js
Error: Cannot find module 'eslint-config-airbnb'
...
素直に npm install --save eslint-config-airbnb
したら解決した。yarn
で追加できていなかった・・・?