Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう

はじめに

▼ 成果物

バージョン情報

• node：15.11.0
• eslint: 7.30.0
• eslint-config-next: 11.0.1
• prettier: 2.3.2
• eslint-config-prettier: 8.3.0
• next: 11.0.1
• typescript：4.3.5
• react: 17.0.2
• react-dom: 17.0.2

ESLint とは？

Prettier とは？

ESLint と Preitter を Next.js (TypeScript) に導入する方法

1. Next.js (TypeScript) の新規プロジェクトを作成
2. Prettier のセットアップ
3. ファイル保存で自動フォーマットする VS Code の設定

1. Next.js (TypeScript) の新規プロジェクトを作成

# npm の場合
npx create-next-app next-ts-eslint-prettier --typescript

# yarn の場合
yarn create next-app next-ts-eslint-prettier --typescript

├── .eslintrc
├── .gitignore
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
├── tsconfig.json
└── yarn.lock

• eslint：構文解析のエンジン
• eslint-config-next：Next.js 専用の ESLint のルール

// package.json
{
  ...
  "devDependencies": {
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
  }
  ...
}

// .eslintrc
{
  "extends": ["next", "next/core-web-vitals"]
}

// sample/index.tsx
export default function index() {
  return (
    <div>
      <img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
      <a href="/">test</a>
    </div>
  );
}

① Do not use img. Use Image from 'next/image' instead.
② Do not use the HTML a tag to navigate to /. Use Link from 'next/link' instead.

# npm の場合
npm run lint

# yarn の場合
yarn lint

# 実行結果
$ next lint
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
✔ No ESLint warnings or errors
✨  Done in 1.50s.

• pages
• lib
• components

• pages
• sample
• styles

src
├── pages
│   ├── _app.tsx
│   ├── api
│   └── index.tsx
├── sample
│   └── index.tsx
└── styles
    ├── Home.module.css
    └── globals.css

// package.json
  "scripts": {
    ...
    "lint": "next lint --dir src"
    ...
  },

// package.json
  "scripts": {
    ...
    "lint": "next lint --dir src",
    // 追記
    // src --ext .js,jsx,.ts,.ts: src ディレクトリ内の js, jsx, ts, tsx ファイルを対象
    // --fix: コード整形
    "lint:fix": "eslint src --ext .js,jsx,.ts,.tsx --fix"
    ...
  },

// .eslintrc
{
  "extends": ["next", "next/core-web-vitals"],
  // 追記
  "rules": {
    // セミコロンない場合、エラー出力
    "semi": ["error", "always"]
  }
}

# npm の場合
npm run lint:fix

# yarn の場合
yarn lint:fix

// .eslintrc
{
  "extends": ["next", "next/core-web-vitals"]
  // 削除
  // "rules": {
  //   // セミコロンない場合、エラー出力
  //   "semi": ["error", "always"]
  // }
}

2. Prettier のセットアップ

• .prettierrc ファイルを作成し、ルールを記述
• package.json にルールを記述

// package.json
  "prettier": {
    "trailingComma": "all",// 末尾のカンマあり
    "tabWidth": 2,// tab の長さは半角スペース 2 つ
    "semi": true,// セミコロンあり
    "singleQuote": true,// シングルクォーテーションに統一
    "jsxSingleQuote": true,//jsx もシングルクォーテーションに統一
    "printWidth": 100 // １ 行の最大文字数 100
  },

• prettier: 各ファイルをコマンドで、フォーマットできるようにするため
• eslint-config-prettier: ESLint と Prettier のコード整形がバッティングしないようするため

# npm の場合
npm install -D prettier eslint-config-prettier

# yarn の場合
yarn add -D prettier eslint-config-prettier

// .eslintrc
{
  // 追記："prettier"
  "extends": ["next", "next/core-web-vitals", "prettier"]
}

// package.json
  "scripts": {
    ...
    "lint": "next lint --dir src",
    "lint:fix": "eslint src --ext .js,jsx,.ts,.tsx --fix",
    // 追記
    // --write: フォーマット整形
    // --ignore-path .gitignore: .gitignore に含まれているファイルはコード整形の対象外
    // 対象ファイルの拡張子を指定
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
    ...
  },

// src/sample/index.tsx

export default function index() {
  return (
    <div className="sample">
      test
    </div>
  )
}

# npm の場合
npm run format

# yarn の場合
yarn format

▼ 実行結果

3. VS Code でファイル保存時に

// .vscode/settings.json
{
  // デフォルトのフォーマッタを prettier に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時、prettier による自動フォーマット
  "editor.formatOnSave": true,
  // ファイル保存時、ESLint による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

ファイル保存時、自動でコードが整形されていれば成功です！

eslint-config-next の設定ファイル

/*
 * @rushstack/eslint-patch is used to include plugins as dev
 * dependencies instead of imposing them as peer dependencies
 *
 * https://www.npmjs.com/package/@rushstack/eslint-patch
 */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@next/next/recommended',
  ],
  plugins: ['import', 'react', 'jsx-a11y'],
  rules: {
    'import/no-anonymous-default-export': 'warn',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'jsx-a11y/alt-text': [
      'warn',
      {
        elements: ['img'],
        img: ['Image'],
      },
    ],
  },
  ...
};

• eslint-plugin-react: React に特化した ESLint のプラグイン
• eslint-plugin-react-hooks: React Hooks に特化した ESLint のプラグイン
• eslint-plugin-jsx-a11y: React Hooks に特化した ESLint のプラグイン
• eslint-plugin-import: モジュールのインポートに関連する ESLint のプラグイン
• etc...

モジュールをインポートする順番を、アルファベット順になるよう設定

// .eslintrc
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    // 追記
    "plugin:import/recommended",
    "plugin:import/warnings"
  ],
  "rules": {
    // import の順番をルール化
    // 参考：https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

このように、モジュールをインポートする順番がファイル保存時に、アルファベット順になれば成功です。もし、うまくいかない場合は、VS Code を再起動して確かめてみてください！

最後に