LoginSignup
6

More than 5 years have passed since last update.

React 開発環境に ESLint + Prettier を導入して、静的検証+コード整形を実現する

Posted at

この記事は?

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 で追加できていなかった・・・?

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6