Next.js + TypeScript プロジェクトに ESLint, Prettier を導入する

みなさんこんにちは。
今回は Next.js + TypeScript のプロジェクトに、ESLint と Prettier を導入してみましたのでそのメモを残します。

背景

久しぶりに開発業務で Next.js v9.3.0 と TypeScript v3.8.3 を使ったプロダクトを開発機会があり、改めてイチから環境を構築しました。

TypeScript の構文チェックには TSLint がありましたが、現在は deprecated になっているため ESLint を入れます。

Prettier は v2 がリリースされましたのでv2.0.2 とします。

TSLint

ライブラリ

• "next": "9.3.0"
• "eslint": "^6.8.0"
• "@typescript-eslint/eslint-plugin": "^2.25.0"
• "@typescript-eslint/parser": "^2.25.0"
• "eslint-config-prettier": "^6.10.1"
• "eslint-plugin-prettier": "^3.1.2"
• "eslint-plugin-react": "^7.19.0"
• "prettier": "^2.0.2"

ESLint

ここで下記のドキュメントを見てみましょう。

$ npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

@typescript-eslint/parser

This allows ESLint to understand TypeScript syntax.

ESLint が TypeScript の構文を理解します。

@typescript-eslint/eslint-plugin

This allows you to use the rules within your codebase.

コード内でルールを使えるようにします。

$ npm install -D eslint-plugin-react

eslint-plugin-react

React specific linting rules for ESLint

React 用 ESLint のプラグインです。

Prettier

$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier

Turns off all rules that are unnecessary or might conflict with Prettier.

Prettier とコンフリクトしそうな、または、不必要なルールを off にできます。

eslint-plugin-prettier

Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

Prettier をESLint のルールとして実行し、その差異を個々の ESLint の問題としてレポートします。

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
  ],
  plugins: ['@typescript-eslint', 'react'],
  parser: '@typescript-eslint/parser',
  env: {
    node: true,
    es6: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  }
}

おわりに

私もすべての設定を把握しているわけではありませんが、これを機に色々調べてみようかと思います。