Next.js TypeScript + ESLint + Prettier の環境を作るのだ！

何回も作るのに都度調べるのめんどくなってきたからメモ

Next.js のプロジェクトを作る

今いるディレクトリにプロジェクトを作る

$ npx create-next-app --use-npm .

--use-npm オプションつけないと npm が無いって怒られる。忘れがち…

TypeScript 化

$ npm install --save-dev typescript @types/react @types/node
$ touch tsconfig.json

この状態で Next のプロジェクトを dev モードで起動すると自動的に tsconfig.json の中身が記述され、next-env.d.ts ファイルも作成される

$ npm run dev

ESLint の導入

Since version 11.0.0, Next.js provides an integrated ESLint experience out of the box. Add next lint as a script to package.json
cf. Basic Features: ESLint | Next.js

Next.js v11.0.0 からはプロジェクト内に ESLint が入っていて npx next lint で動作するらしい。

必要なパッケージのインストール

$ npm install --save-dev eslint eslint-config-next

ESLint を実行する npm script を追加

package.json

{
  "script": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
+   "lint": "next lint",
+   "lint:fix": "next lint --fix"
  },
}

Prettier を使うのと、独自のルールを追加したいので ESLint の設定ファイルを作る

$ touch .eslintrc.js

.eslintrc.js (cf. Basic Features: ESLint | Next.js)

module.exports = {
  extends: [
    'next',
    'next/core-web-vitals',
  ],
  rules: {
    'semi': 'error',
    'import/prefer-default-export': 'off',
    'newline-before-return': 'error',
    'no-console': 'warn',
    'no-var': 'error',
  },
};

npm run lint:fix で ESLint での修正が入れば OK

Prettier の導入

$ npm install --save-dev prettier eslint-config-prettier
$ touch .prettierrc.json

Prettier の設定 .prettierrc.json (お好みで)

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true, // 末尾セミコロンあり
  "singleQuote": true, // シングルコーテーションを使う
  "jsxSingleQuote": true, // JSX もシングルコーテーションに
  "arrowParens": "always", // Arrow 関数の引数に () を付ける
  "endOfLine": "lf" // 改行コード LF
}

ESLint と Prettier がバッティングしないように連携させる

.eslintrc.js

module.exports = {
  extends: [
    'next',
    'next/core-web-vitals',
+   'prettier',
  ],
  rules: {

Prettier を実行する npm script を追加

package.json

{
  "script": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
+   "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css,scss}'"
  },
}

npm run format を実行して Prettier でのフォーマットが実行されれば OK

VS Code で保存時に ESLint, Prettier を実行してフォーマットする

$ mkdir .vscode
$ touch .vscode/settings.json

.vscode/settings.json

{
  "files.exclude": {
    "**/node_modules": true
  },
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}