ざきの学習帳

日々の学びを書きます

【React】create-react-app後、eslint系の設定をeslintrcに移した際のメモ

React JavaScript Node.js TypeScript プログラミング

f:id:kic-yuuki:20190908111423p:plain

最近、実践TypeScriptという本を購入し、TypeScriptでReactやVueを書く勉強をしています。🖋


上記本の

  • 第7章 TypeScriptとReact

にて、create-react-appを用いて、TypeScript x Reactな環境を構築・学習しています。

その際、package.jsonからeslint系の設定をeslintrc.jsに移した内容について、メモとして書き残しておこうと思います。

create-react-appとは？

Reactの雛形プロジェクトを作成できる、npmパッケージです。

Facebookが公式で出してくれています。

手順

1. 環境構築（React x TypeScript）

yarnを用いて、環境構築します。 （公式ではnpm / npxを使用しています）

--typescriptオプションをつけて、create-react-appを実行します。

# create-react-appのインストール
yarn global add create-react-app

# React x TypeScriptの雛形プロジェクトを構築
create-react-app プロジェクト名 --typescript

2. eslintの設定確認

create-react-app後、package.jsonは以下の状態となっています。

package.json

{
  "name": "プロジェクト名",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "12.7.4",
    "@types/react": "16.9.2",
    "@types/react-dom": "16.9.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "typescript": "3.6.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

一見、eslint系のパッケージが含まれていないように見受けられます。

eslint系パッケージはreact-scriptsに含まれている

yarn.lockを確認したところ、react-scriptsにeslint系のパッケージが含まれているため、eslint系のパッケージを追加は不要そうです。

yarn.lock（抜粋）

〜省略〜

react-scripts@3.1.1:
  version "3.1.1"
〜省略〜
  dependencies:
〜省略〜
    eslint "^6.1.0"
    eslint-config-react-app "^5.0.1"
    eslint-loader "2.2.1"
    eslint-plugin-flowtype "3.13.0"
    eslint-plugin-import "2.18.2"
    eslint-plugin-jsx-a11y "6.2.3"
    eslint-plugin-react "7.14.3"
    eslint-plugin-react-hooks "^1.6.1"

〜省略〜

分報仲間である @kdnaktさんのアドバイスで気づけました。ありがとうございました。 🙇‍♂️

3.eslintの設定をeslintrc.jsに移す

管理しやすいよう、eslint系の設定を.eslintrc.jsに移します。

eslintrc.jsの生成

yarn run eslint --init

# 〜省略〜

# 自分が選択したESLint系の設定（参考に）
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? Yes
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JavaScript

yarn run eslint --initを実行、上記のようにオプションを選択し.eslintrc.jsを生成します。

eslintrc.jsへの追記

その後、.eslintrc.jsに以下を追記します。

.eslintrc.js（抜粋）

{
// 〜省略〜
    plugins: [
        'react',
        'react-app', // ←追記
        '@typescript-eslint'
    ],
// 〜省略〜
}

react-appは、以下npmパッケージが提供しています。

package.jsonからeslintの設定を削除

.eslintrc.jsに設定を移しましたので、package.jsonからeslintの設定を削除します。

package.json（抜粋）

{
// ここから
  "eslintConfig": {
    "extends": "react-app"
  },
// ここまで削除
}

設定は以上です。

おわり

create-reawct-appで構築すると、eslint系のインストールが不要で便利ですね。 🤗

実際に、本記事の手順で設定した.eslintrc.jsとpackage.jsonは以下となります。

参考になれば幸いです。 🙏

引き続き、TypeScript / Reactやっていき。