【Next.js/React.js】TypeScriptで書かれたプロジェクトにESLintとPrettierを導入する

概要
ESLint（静的解析ツール）の導入
Prettier（コードフォーマッター）の導入
まとめ

概要

Next.js
TypeScript

という条件のプロジェクトに、いい感じに静的解析ツールとコードフォーマッターを入れる。

ESLint（静的解析ツール）の導入

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code qua...

公式ページを参考に導入する。

インストール

$ npm install eslint --save-dev

本番環境では必要ないため、--save-devで。

初期設定

初期設定のコマンドを実行すると、いくつか質問されるので素直に答えていく。

$ npx eslint --init

# 今回のeslintの役目はコードのチェックのみのため、「To check syntax and find problems」を選択
? 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

# import/exportを使った記述をしているため、一番上を選択
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# Next.jsを利用しているため、「React」を選択
? Which framework does your project use? …
❯ React
  Vue.js
  None of these

# Yesを選択
? 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

# 何でも良い、JavaScriptにした
? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

# 上記設定だと、下記も一緒にインストールした方が良いらしいので、Yesを選択しインストール（親切ですね）
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? › No / Yes

ルートディレクトリに「.eslint.js」が追加された。

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

React.js/Next.js用のカスタマイズ

このままだと余計なチェックが入るので、ルールに下記を追加する。

  rules: {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
  },

新しい JSX トランスフォーム – React Blog

静的解析を実行するスクリプト作成

通常、下記のコマンドでチェックできるが、npmコマンドから実行できるようにしておくと良い。

Command Line Interface Reference - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code qua...

$ npx eslint ファイル名

package.jsonのscriptの箇所に静的解析用のコマンドを追加する。
基本的にはpages/ディレクトリとcomponents/ディレクトリに実装していくと思うので、
そのディレクトリ配下のファイルだけチェックしておけば良い。

{
// 省略
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "eslint pages/** components/**"
  },
// 省略
}

この状態で下記のコマンドを実行すると、対象ファイルをチェックし、指摘してくれる。

$ npm run lint

Prettier（コードフォーマッター）の導入

Install · Prettier

First, install Prettier locally:

チュートリアルの通りに進めていく。

インストール

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

こちらも本番環境で不要なため、--save-devで。

初期設定

設定ファイルを書き出す。

$ echo {}> .prettierrc.json

空の.prettierrc.jsonが作成される。

フォーマットを実行するスクリプト作成

ESLintと同様に、Prettierを実行するnpmスクリプトを作成する。

$ npx prettier --write 対象ファイル

でフォーマットが実行されるため、package.jsonには下記のように記述する。

{
// 省略
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "eslint pages/** components/**",
    "prettier": "prettier --write pages/** components/**"
  },
// 省略
}

ESLintの時と同じく、pages/ディレクトリとcomponents/ディレクトリ配下を対象とする。

こちらも下記のコマンドで実行できる。

$ npm run prettier

VSCodeに対応する

VSCodeをはじめとするテキストエディタと連携させると、
「ファイル保存時に自動的にフォーマットを行う」といったことが可能になる。

このやり方については今回は割愛する。
気が向いたら記事を書く。

まとめ

ESLintをインストール
ESLintの初期化コマンドを実行し、質問に回答する
ESLintの設定ファイルは「.eslintrc.{js,yml,json}」
Next.jsやReact.jsを利用している場合は、少し設定を追加する
npmスクリプトにESLintの実行コマンドを追加する
Prettierをインストール
Prettierの設定ファイルを生成する「.prettierrc.json」
Prettierはデフォルトの設定で十分使える
npmスクリプトにPrettierの実行コマンドを追加する