eslint | Casual Developers Note

ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

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"
    ]
  },
...
}

以上で完了です。あとは、エラーがになる箇所があればルールに従って修正していってください。