Zenn
Closed4

ReactプロジェクトのEslint / Prettierの設定について【自分用メモ】

React
ESLint
Prettier
taka_htaka_h

eslint --initでESLintの設定ファイルを作る

まずは、create-react-appでプロジェクトを作成。

TypeScriptで使いたいので、--template typescriptもつけます。

npx create-react-app {プロジェクト名} --template typescript

create-react-appで作成されたプロジェクトには、Eslintが最初からインストールされています。

なので、このままeslint --initコマンドで、Eslintの設定ファイルを作成します。

npx eslint --init

eslint --initコマンドを実行すると、以下のような対話形式でEslintの設定ファイルを作成できます。

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

デフォルトでは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

ReactではJavaScript modules (import/export)が使われているので、それを選択します。

どのフレームワークを使っていますか?

? Which framework does your project use? …
> React
  Vue.js
  None of these

Reactを選択します。

TypeScriptを使用していますか

? Does your project use TypeScript > No/ Yes

もちろん、Yes。

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

? Where does your code run? …
> Browser
  Node

Reactなので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)

自分でスタイルを決めることもできるみたいですが、私は無難にUse a popular style guide(人気のスタイルガイド)を選択しています。

以下のどのスタイルガイドを使用したいですか?

? Which style guide do you want to follow? …
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google

私はAirbnbのスタイルガイドを選択しています。やっぱ人気なだけあって、かなり優れたスタイルガイドだと思います。

設定ファイルはどの形式で作成しますか?

? What format do you want your config file to be in? … 
> JavaScript
  YAML
  JSON

慣れた形式の方が良いので、私はJavaScriptを選択しています。

これらのパッケージを今すぐnpmでインストールしますか?

? Would you like to install them now with npm? › No / Yes

Yesを選択して実行するとパッケージがインストールされ、さらにプロジェクトのルートにEslintの設定ファイル.eslintrc.jsが以下の内容で作成されます。

インストールされるパッケージ

  • eslint-plugin-react
  • @typescript-eslint/eslint-plugin
  • eslint-config-airbnb
  • eslint
  • eslint-plugin-import
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react-hooks
  • @typescript-eslint/parser

.eslintrc.js

.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
  },
};
taka_htaka_h

Eslintのパッケージの種類をおさらい

Eslintのパッケージは大まかに、以下の3つに分けられます。

  • Parser: 開発言語の構文を解析。
  • Plugin: Eslintにルールを追加。
  • Config: 複数のルールをまとめて適用。

先ほどインストールしたパッケージを上記の種類ごとに区別すると、以下のような感じになります。

  1. Parser
    • @typescript-eslint/parser (TypeScriptを解析)
  2. Plugin
    • eslint-plugin-react (Reactのルール)
    • @typescript-eslint/eslint-plugin (TypeScriptのルール)
    • eslint-plugin-import (ES Modulesのルール)
    • eslint-plugin-jsx-a11y (JSXのルール)
    • eslint-plugin-react-hooks (React Hooksのルール)
  3. Config
    • eslint-config-airbnb (Airbnbスタイルをルールとしてまとめたもの)

先ほどの質問の回答に応じて、必要なパッケージをちゃんとインストールしてくれているのがわかります。

PluginとConfigはどちらも、構文のルールに関するものですが、私はPluginはルール、Configはルールや設定をひとまとめにしたもの、と大雑把に理解しています。（厳密にはもっと詳しい定義があるのかもしれませんが…）

taka_htaka_h

parserOptionsの設定

型関連のルールを使う場合、.eslintrc.jsのparserOptionsにTypeScriptコンパイルの設定ファイルのパスを指定する必要があります。

普通に考えたらparserOptionsにはtsconfig.jsonを指定してやれば良さそうに思えますが、そうするとnode_modules内のファイルなどもパースされてしまい、パフォーマンスが低下してしまうそうです。

なのでtsconfig.jsonを拡張したtsconfig.eslint.jsonを別途作成して、それを指定します。

tsconfig.eslint.json
{
  "extends": "./tsconfig.json",  // tsconfig.jsonを拡張
  "include": [  // パースするのは、srcフォルダ内のファイルのみ
    "src/**/*.js", 
    "src/**/*.jsx", 
    "src/**/*.ts", 
    "src/**/*.tsx"
  ], 
  "exclude": [  // node_modulesのファイルは除外
    "node_modules" 
  ]
}

.eslintrc.jsのparserOptionsの設定は以下のようになります。

.eslintrc.js 
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
+   project: './tsconfig.eslint.json',
    sourceType: 'module',
+   tsconfigRootDir: __dirname,
  },
このスクラップは2023/09/07にクローズされました