Next.js（TypeScript）にESLintとPrettierを入れる手順

Next.js（TypeScript）にESLintとPrettierを入れる手順

October 17, 2021

自分用の備忘録です。頻繁に実施するものでもなく、記憶が薄れがちなので。

パッケージをインストール #

ESLint をインストール #

  • eslint
npm install --save-dev eslint

ESLint の Parser をインストール #

  • @typescript-eslint/parser
npm install --save-dev @typescript-eslint/parser

ESLint の Plugin をインストール #

  • @typescript-eslint/eslint-plugin
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-jsx-a11y
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

ESLint の Extend をインストール #

  • eslint-config-next
  • eslint-config-airbnb
  • eslint-config-airbnb-typescript
npm install --save-dev eslint-config-next eslint-config-airbnb eslint-config-airbnb-typescript

Prettier をインストール #

  • prettier
npm install --save-dev prettier

ESLint の Extend をインストール（Prettier 用） #

  • eslint-config-prettier
npm install --save-dev eslint-config-prettier

型定義ファイルをインストール #

以下あたりがインストールされるはず。

  • @types/eslint
  • @types/prettier
npx typesync

設定ファイルを作成 #

（すべてプロジェクトのルートディレクトリ直下に作成）

ESLint 用の tsconfig.json を作成 #

tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "./.eslintrc.js"]
}

.eslintrc.js を作成 #

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: ['./tsconfig.eslint.json'],
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    ecmaFeatures: { jsx: true },
  },
  plugins: ['@typescript-eslint', 'jsx-a11y', 'react', 'react-hooks'],
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'next',
    'next/core-web-vitals',
    'prettier',
  ],
  rules: {
    curly: ['error', 'all'],
  },
};

補足

prettier に関する extends は prettier の１行のみで大丈夫。

かつては prettier/@typescript-eslint や prettier/react の記載が追加で必要だったが、version 8.0.0 の eslint-config-prettier からは不要になった（それら全てが prettier に含まれている）。

https://github.com/prettier/eslint-config-prettier

.eslintignore を作成 #

.eslintignore 

node_modules/

.prettierrc.js を作成 #

.prettierrc.js

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
};

.prettierignore を作成 #

.prettierignore

node_modules/

package.json にコマンドを追加 #

package.json 

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  }
}

lint コマンド部分は好みで変更

{
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "lint": "eslint ./**/*.{js,jsx,ts,tsx}",
  "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
  "lint": "eslint src/**/*.{js,jsx,ts,tsx}"
}

補足

next lint コマンドを用いても良い。

{
  "scripts": {
    "lint": "next lint"
  }
}

ただしこちらの場合、リント対象となるディレクトリがデフォルトだと以下に限定される。

  • pages/
  • components/
  • lib/

By default, Next.js will run ESLint for all files in the pages/, components/, and lib/ directories. However, you can specify which directories using the dirs option in the eslint config in next.config.js for production builds:

https://nextjs.org/docs/basic-features/eslint

他のディレクトリも対象としたい場合は設定を変える必要がある（上記ページ参照）。

（未実施ならば）VS Code をセットアップ #

プラグインを追加 #

settings.json 編集 #

（editor.codeActionsOnSave の設定は好みで。個人的には無しでも良いかも。）

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}