
Reactの開発環境でEslintおよびPretteirを設定する方法を紹介します。
はじめに
JavaScriptのコードフォーマッターと言えば「Eslint」と「Pretteir」を組み合わせるのが主流です。今回は、以前の記事「Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)」をインプットにして、React用にゼロからEslintおよびPretteirを設定する方法を紹介します。
それでは、ReactにEslintおよびPrettierを設定していきましょう。
JavaScriptのコーディングスタイル
JavaScriptのコーディングスタイルは以下の3つが代表的です。
どれを使うのがベストか?ということになりますが、コーディングスタイルは主観に大きく左右されるので、綺麗な解を出すのは難しいです。なので、強い個人的な主張がなければ、それぞれのコーディングスタイルの特徴を理解した上で、どれが人気か?ということを見て判断するのが良いでしょう。尖ったスタイルは後でEslintとPretteirでカスタマイズできますからね。そこで、これらのコーディングスタイルを比較しているサイトとして「Comparing eslint-config-airbnb vs. eslint-config-google vs. standard」を見てみましょう。このサイトの結果では、Airbnbのコーディングスタイルが一番人気があり良さそうです。
ということで、今回はコーディングスタイルとして「Airbnb JavaScript Style Guide」を適用します。
ReactにEslintおよびPrettierを設定する
前提
以下の設定が事前に完了している必要があります。
- NodeJSがインストールされていること
- 「Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)」の設定が完了していること
EslintおよびPretteirのモジュールをインストールする
ReactのプロジェクトにEslint、Pretteir、関連モジュールをインストールします。
$ cd my-react-app
$ yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
$ yarn add --dev eslint-plugin-babel eslint-plugin-flowtype
$ yarn add --dev babel-eslint eslint-loader
$ yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
$ yarn add --dev husky lint-staged
Pretteirの設定をする
Pretteirの設定ファイルを作成し、設定を書きます。
$ touch prettier.config.js
prettier.config.js
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: false,
singleQuote: true,
}
流行りのセミコロン無しの設定にしています。
また、設定ファイルのフォーマットは、Pretteirに限らず、JSON、YAML、JavaScriptが選択可能になっていることが多いですが、結局JavaScriptで設定ファイルを書くのが一番使いやすいと感じています。コメントが書けたり、設定を整理したい時に便利だからです。
Eslintの設定をする
Eslintの設定ファイルを作成して、設定を書きます。
$ yarn eslint --init
...
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:
...
? Would you like to install them now with npm? No
...
.eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
jest: true,
},
extends: [
'airbnb',
'airbnb/hooks',
'plugin:flowtype/recommended',
'plugin:jest/recommended',
'plugin:jest/style',
'prettier',
'prettier/babel',
'prettier/react',
'prettier/flowtype',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['babel', 'flowtype', 'jest', 'prettier'],
rules: {
'prettier/prettier': 'error',
'react/jsx-filename-extension': 'off',
'react/prop-types': 'off',
'react/default-props-match-prop-types': 'off',
'react/require-default-props': 'off',
'flowtype/no-types-missing-file-annotation': 'off',
'flowtype/define-flow-type': 'warn',
'flowtype/use-flow-type': 'warn',
},
}
自動作成された設定に、Babel、Flow、Jest、Pretteirのための設定を追加してあります。
Webpackに設定を追加する
Webpackで開発中にEslintを毎回実行するようにローダーの設定を追加します。
$ vi webpack.config.babel.js
{
...
module: {
rules: [
{
enforce: 'pre',
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
fix: true,
},
},
...
],
},
...
}
コミット時にリンターを実行する設定をする
コミット時に必ずチェックするようにしておけば安心です。
$ vi package.json
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"yarn eslint --fix",
"git add"
]
},
...
}
以上で完了です。あとは、エラーがになる箇所があればルールに従って修正していってください。
最後に
いかがでしたか?これでゼロからReact用にEslintおよびPretteirを設定できるようになったことでしょう。それでは。
環境
- NodeJS: v12.12.0
- eslint: 6.6.0
- eslint-config-airbnb: 18.0.1
- eslint-plugin-import: 2.18.2
- eslint-plugin-jest: 23.0.2
- eslint-plugin-jsx-a11y: 6.2.3
- eslint-plugin-react: 7.16.0
- eslint-plugin-react-hooks: 2.2.0
- eslint-plugin-babel: 5.3.0
- eslint-plugin-flowtype: 4.3.0
- babel-eslint: 10.0.3
- eslint-loader: 3.0.2
- prettier: 1.18.2
- eslint-plugin-prettier: 3.1.1
- eslint-config-prettier: 6.5.0
- husky: 3.0.9
- lint-staged: 9.4.2