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の最新の機能を使えるようにし、快適な開発体験を提供し、本番環境用の最適化を行う魔法のようなコマンド

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

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

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

cd react-app
npm start

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

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

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

$~ 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

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

導入のメリット

セミコロン付けるかどうか問題

インデントどのくらい空けるか問題

シングルクォートかダブルクォートか問題

コードどこで折り返すか問題

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

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

npm install --save-dev --save-exact prettier

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

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を選択）

{
  "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",
  ],
  "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にインストールしてきたものを追加

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

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

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

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

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

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

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

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

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

ESLintのススメ　→　https://zenn.dev/yhay81/articles/def73cf8a02864

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

Prettierの設定ファイルを作成

.prettierrcファイルを作成

{
    "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を使って、コミット時に検証するようにすることもできるみたいだが、とくに今は必要ないのでそれは機会があれば。

最後に

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

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

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

参考記事

https://zenn.dev/yhay81/articles/def73cf8a02864　：ESLintのススメ

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

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

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

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

← Go home