create-react-app（typescript）のプロジェクトでESlintの設定

# はじめに

新しくtypescriptを使ったプロジェクト学習のために再度設定することになったので

今まで放置してたESLintについてのまとめ。

部屋にエアコンがなく、かじかむ指で記事を書いたのでタイプミスがあったらすいません。

個人の備忘録です。

### ※2022/01/02追記

下記内容でnpm startするとcompileエラーがでます。

`prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0`

prettier/@typescript-eslintはPrettierにマージされましたという内容。

結論として

`.eslintrc.json`から

`prettier/@typescript-eslint`と`Prettier/react`をextendsから消すとエラー解消しました。

# ESlintとは

JavaScriptやTypeScriptなどの静的解析ツール。

要は構文のエラーやコーディング規約を見つけて教えてくれる。

複数人での開発のとき、コードの一貫性を担保することができる。

フロントエンドでは必須とも言えるツール

現在最も強力で拡張可能なリンター。

## リンター導入のメリット

- コードの一貫性を保つ
    
    設定ファイルを共有することで、チームのコードスタイルを設定ファイルに記述しておくことで自動的に確認できる
    
- 潜在的エラーを見分ける
    
    重複変数、到達不能コード、無効な正規表現の可能性があるエラーを高度に確認できる
    
- 時間を節約できる
    
    直接機能とは関係ない潜在的なエラーをツールに任せることで、より本質的な開発に時間を割くことができる
    

## ESlintの主な機能

- 自分好みに設定できる多数のルール
- 独自のルールを作成するAPI
- 固有のライブラリー、フレームワークなどの多数のプラグイン
- ES6,ES7,JSXの内蔵サポート
- サードパーティの設定利用が可能
- 複数のエディタやIDEとの統合が可能

# create-react-appでReactプロジェクトを作成(typeScriptテンプレート)

コマンドひとつで開発環境のセットアップをし、JavaScriptの最新の機能を使えるようにし、快適な開発体験を提供し、本番環境用の最適化を行う魔法のようなコマンド

<aside>
👌 環境としてNode≧14.0.0およびnpm≧5.6の環境が必要

</aside>

プロジェクトの作成には、作成したいディレクトリで以下のコマンドを実行

```jsx
$~　npx create-react-app react-app --template typescript

cd react-app
npm start
```

react-appの部分は任意のプロジェクト名を決める

上記のコマンドだけで新しいプロジェクトが作成され、localhost:3000で動作しているのが確認できる

## ESlintの設定ファイルを対話式で作成

```jsx
$~ npx eslint --init
```

ESLintをどのように使用しますか？

`? How would you like to use ESLint?
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style`

どんなモジュールを使用していますか？

`? What type of modules does your project use?
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these`

どのフレームワークを使用していますか？

`? Which framework does your project use?
❯ React
  Vue.js
  None of these`

TypeScriptは使用していますか？

`? Does your project use TypeScript? No / Yes`

コードはどこで実行されますか？

`? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ Browser
  Node`

プロジェクトのスタイルをどのように定義しますか？

`? How would you like to define a style for your project?
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)`

どのスタイルガイドをフォローしますか？

`? Which style guide do you want to follow? (Use arrow keys)
❯ Airbnb (https://github.com/airbnb/javascript)
  Standard (https://github.com/standard/standard)
  Google (https://github.com/google/eslint-config-google)`

設定ファイルのフォーマットはどれにしますか？

`? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
  YAML
  JSON`

npm でこれらのパッケージをインストールしますか？（yarn でインストールしたい場合は No を選択して、案内されたパッケージを手動でインストールする必要があります）

`eslint-plugin-react@^7.14.3 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.1.0 eslint-plugin-import@^2.18.2 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^1.7.0
? Would you like to install them now with npm? No / Yes`

上記をプロジェクトに合わせて回答すると自動的に`.eslintrc`ファイルが生成される。

# Prettierを設定する

## Prettierとは

コードを整えるためのフォーマッター。ESLintにも整型機能はあるが、コード整型はPrettier

を別途設定するのが主流。個別の設定とか使いやすい。

## 導入のメリット

- セミコロン付けるかどうか問題
- インデントどのくらい空けるか問題
- シングルクォートかダブルクォートか問題
- コードどこで折り返すか問題

などの人によってどうするか違うコードの書き方を統一できる。

誰が書いても同じにできて、ルールのファイルを共有するだけでプロジェクトに反映できるので、開発者は本質的業務に集中できる。

```json
npm install --save-dev --save-exact prettier
```

# その他必要なプラグインなどのインストール

```json
npm install --save-dev eslint-config-prettier eslint-plugin-jest eslint-plugin-react-hooks
```

### 内容

- eslint-config-prettier ･･･ ESLintとPrettierの競合設定をオフにしてくれる
- eslint-plugin-jest ･･･ jestに関する設定がまとめてあるプラグイン
- eslint-plugin-react-hooks ･･･ react-hooksに関する設定がまとめてあるプラグイン

# .eslintrc.jsonの中身（今回はjsonを選択）

```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jest/recommended",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly",
    "React": "writable"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks", "@typescript-eslint", "jest"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {}
}
```

## extendsとpluinsにインストールしてきたものを追加

```json
"extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jest/recommended",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
```

```json
 "plugins": ["react", "react-hooks", "@typescript-eslint", "jest"]
```

extendsの順番は上書きになるので注意。

フォーマッターであるPrettierは最後に記述。

## その他自分で追加した内容

```json
"globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly",
    "React": "writable"
```

```json
"settings": {
    "react": {
      "version": "detect"
    }
```

Reactの場合settingsにバージョンの指定が必要とのことだったが、最初に作られたファイルには記載がなかったので追加。

globalsについては必要か判断できなかったが下記記事を参考に記述。

ESLintのススメ　→　[https://zenn.dev/yhay81/articles/def73cf8a02864](https://zenn.dev/yhay81/articles/def73cf8a02864)

rulesについては個別のル－ルを設定できるが、個人開発なので開発を進めながら追加していく予定。エラーがでたときどのルールに引っかかっているかがでてくるのでそのときに必要か不要か判断しながら設定していく。

# Prettierの設定ファイルを作成

![スクリーンショット 2021-12-28 074513.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/debb2057-8c00-346d-11bd-2f094e1930ca.png)


## .prettierrcファイルを作成

```json
{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": true,
    "semi": true,
    "singleQuote": false,
    "overrides": [{ "files": "*.js", "options": { "singleQuote": true } }],
    "bracketSpacing": true,
    "bracketSameLine": false,
    "arrowParens": "always",
    "trailingComma": "none",
    "embeddedLanguageFormatting": "off"
}
```

個別に設定したいルールを追加する。

ここはお好みです。

# VScodeの拡張機能

VScodeに拡張機能としてESLintがあるので、それをインストールすればscriptを走らせなくてもエラーを検知してくれる。

それ以外だとhuskyを使って、コミット時に検証するようにすることもできるみたいだが、とくに今は必要ないのでそれは機会があれば。

![スクリーンショット 2021-12-28 074952.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/31d5e7b8-6782-2742-dc6b-5c5692938b31.png)


# 最後に

ESLintの設定めんどくさいけど便利です。

設定内容多すぎて全部理解できてないけど、徐々に慣れていきたい。

ちなみに、設定をミスると大変なので、`npx eslint --init`の前に一度Git commitをしておくのがおすすめです。

参考記事

[https://zenn.dev/yhay81/articles/def73cf8a02864](https://zenn.dev/yhay81/articles/def73cf8a02864)　：ESLintのススメ

[https://qiita.com/makotot/items/822f592ff8470408be18](https://qiita.com/makotot/items/822f592ff8470408be18)　：ESLintについてのメモ

[https://qiita.com/madono/items/a134e904e891c5cb1d20](https://qiita.com/madono/items/a134e904e891c5cb1d20)　：VSCodeでESLint+typescript-eslint+Prettierを導入する（2020/11/14修正）

[https://qiita.com/mysticatea/items/f523dab04a25f617c87d](https://qiita.com/mysticatea/items/f523dab04a25f617c87d)　：ESLint 最初の一歩

[https://www.codebu.org/react/react-linter-starter/](https://www.codebu.org/react/react-linter-starter/)　：Create React App / Prettier, ESlintでLinterを導入する