create-react-app+TypeScriptでeslintを実行する

自分のブログから持ってきました.
https://wally-ngm.hatenablog.com/entry/2020/07/02/131417

create-react-appには既にeslintが入っているようですが, eslintrcでルールを管理したいですよね.

どうやって回すかをまとめます.

## 1. eslintのダウンロードし
グローバルなところへeslintをインストールしてもいいですが, 今回はプロジェクト配下にダウンロードします.

```
yarn add --dev eslint
```

## 2. eslintの初期設定


```
yarn eslint init
```

ここで, `eslint init` とするとグローバルなeslintを使用することになります. どちらでも構いませんが今回はプロジェクト配下のeslintを使うようにします.

対話形式に答えていくと, `.eslintrc.js` or `.eslintrc.json` or '.eslintrc.yml' のどれかが自分が選んだ形式に従って作成されます.

また, 最後にnpmでパッケージを諸々ダウンロードするか聞かれます. 「yes」で大丈夫ですが, その後必ず `package-lock.json` は削除しておきましょう.

## 3. eslintのルールを設定する

こちらを参照にして, package.jsonから一部を削除して, eslintrc.jsには追記をしていきます.
[https://kic-yuuki.hatenablog.com/entry/2019/09/08/111817:embed:cite]

最終的な私のpackage.jsonとeslintrc.jsは以下のようになりました.

```package.json 
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "$(npm bin)/eslint -c ./.eslintrc.js 'src/**/*.{ts,tsx}'",
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "2.x",
    "@typescript-eslint/parser": "2.x",
    "babel-eslint": "10.x",
    "eslint": "6.x",
    "eslint-config-react-app": "^5.2.1",
    "eslint-plugin-flowtype": "4.x",
    "eslint-plugin-import": "2.x",
    "eslint-plugin-jsx-a11y": "6.x",
    "eslint-plugin-react": "7.x",
    "eslint-plugin-react-app": "^6.2.2",
    "eslint-plugin-react-hooks": "2.x"
  }
}
```

```.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: "module",
  },
  settings: {
    "import/resolver": {
      node: {
        paths: ["src"],
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      },
      "babel-module": {
        root: ["./src/"],
      },
    },
  },
  plugins: ["react", "react-app", "react-hooks", "@typescript-eslint"],
  rules: {
    semi: ["error", "always"],
    quotes: ["error", "double"],
    "react/prop-types": [0],
    "react-hooks/rules-of-hooks": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "no-unused-var": 0,
    "no-undef": "off",
    "no-use-before-define": ["off"],
    "@typescript-eslint/no-use-before-define": ["off"],
    "@typescript-eslint/explicit-function-return-type": ["off"],
  },
};
```

いくつか必要なプラグインをダウンロードする必要があるので, package.jsonの`devDependencies` の中身をすべてご自身のpackage.jsonへコピーし, `yarn` コマンドで必要なライブラリをダウンロードすると同じ環境になります.


## 4. eslintを回す

設定ファイルと参照先を指定してeslintを回します
```
yarn eslint -c ./.eslintrc.js  'src/**/*.{ts,tsx}'
```

毎回これを書くのは面倒なので, package.jsonにコマンドを書きましょう
```package.json
 "scripts": {
    "start": "react-scripts start",
    ....,
    "lint": "$(npm bin)/eslint -c ./.eslintrc.js 'src/**/*.{ts,tsx}'"
  },
```


これでいい感じにeslintが回ってくれます.