【Typescript × Next.js × VSCode】ESLintとPrettierの設定

2023.08.15

2024.03.24

開発環境

ESLintNext.jsPrettierTypescriptVSCode

本ページはAmazonアフィリエイトのリンクを含みます。

はじめに

下記の開発環境にて、ESLint と Prettier を設定する方法について紹介していきます。

Typescript
Next.js
VSCode

ESLint と Prettier

まずは ESLint と Prettier について、ざっくり紹介します。

ESLint

ESLint は、Javascript の静的解析ツール(Linter)です。また、いくつかの解析項目については自動修正も可能です。（フォーマッターのような機能）

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

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

ESLint の設定ファイルはいくつかのフォーマットがあります。

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json

v9.0.0 から新しい設定ファイル(eslint.config.js)に移行され、現在の設定ファイルは非推奨になるようです。 https://eslint.org/docs/latest/use/configure/configuration-files-new

また、.eslintignoreで対象としないファイルを指定することができます。

Configure ESLint - ESLint - Pluggable JavaScript Linter

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

下記のように"eslint:recommended"を追記することで ESLint の推奨設定が反映されます。

1{
2  "extends": ["eslint:recommended"]
3}

チェックされる項目は下記のチェックマークがついているものになります。また、ペンチのマークがついている項目は自動修正が可能です。

Rules Reference - ESLint - Pluggable JavaScript Linter

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

Prettier

Prettier は、コードフォーマッターです。

Javascript、Typescript、Markdown、YAML などに対応しており、自動でコードを整形してくれます。

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

Prettier の設定ファイルはcosmiconfigが使われており、下記のようなファイルで設定できます。

.prettierrc
.prettierrc.json
.prettierrc.yml
.prettierrc.js
prettier.config.js
package.json

下記のように、フォーマットする内容を設定できます。

1{
2  "trailingComma": "es5",
3  "tabWidth": 2,
4  "semi": false,
5  "singleQuote": true
6}

Options · Prettier

Prettier ships with a handful of format options.

ESLint と Prettier を併用する場合

ESLint と Prettier は併用されることが多いですが、Prettier の公式ドキュメントでは Prettier と Linter(ESLint)は下記のように使い分けることが推奨されているようです。

ESLint: コードの品質に関すること
Prettier: コードの書式に関すること

Prettier vs. Linters · Prettier

## How does it compare to ESLint/TSLint/stylelint, etc.?

Integrating with Linters · Prettier

Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in [Prettier vs. Linters](/docs/en/comparison.html).

Linter(ESLint)は、コードの品質とコードの書式に関することを検知できますが、Prettier と併用すると競合することがあるようです。

eslint-config-prettierを使うことで、その競合しているルールをオフにしてくれます。

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

Turns off all rules that are unnecessary or might conflict with Prettier. - prettier/eslint-config-prettier

下記でインストールできます。

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

ESLint の設定ファイルに"prettier"を追記します。他の設定を上書きできるようにextendsの最後に記入するようにします。

1{
2  "extends": [
3    // 他の設定
4    "prettier"
5  ]
6}

実際に設定してみる

実際に Typescript の Next.js で設定していきます。

アプリの初期設定

まずは下記のように Next.js のアプリを作成します。

1❯ npx create-next-app
2✔ What is your project named? … eslint-and-prettier
3✔ Would you like to use TypeScript with this project? … Yes
4✔ Would you like to use ESLint with this project? … Yes
5✔ Would you like to use Tailwind CSS with this project? … Yes
6✔ Would you like to use `src/` directory with this project? … Yes
7✔ Use App Router (recommended)? … Yes
8✔ Would you like to customize the default import alias? … No
9
10...
11

これで ESLint がインストール済みのプロジェクトが作成できました。

ESLint の設定

まずは ESLint の設定をしていきます。

必要なパッケージをインストールします。

1npm install --save-dev eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import

インストールしたパッケージは下記の通りです。import の順番をソートするためにプラグインを追加しています。

eslint-config-prettier: ESLint と Prettier の競合を防ぐ
@typescript-eslint/parser: Typescrpt を ESLint が理解できるようにする Parser
@typescript-eslint/eslint-plugin: Typescript 用の Plugin
eslint-plugin-import: import 用の Plugin

.eslintrc.jsonは下記の通りです。

1{
2  "root": true,
3  "extends": [
4    "next/core-web-vitals",
5    "eslint:recommended",
6    "plugin:@typescript-eslint/recommended",
7    "plugin:import/recommended",
8    "plugin:import/typescript",
9    "prettier"
10  ],
11  "parser": "@typescript-eslint/parser",
12  "parserOptions": {
13    "project": ["./tsconfig.json"]
14  },
15  "plugins": ["@typescript-eslint"],
16  "rules": {
17    "import/order": [
18      "error",
19      {
20        "alphabetize": {
21          "order": "asc"
22        }
23      }
24    ]
25  }
26}

設定している内容としては、ざっくり下記の通りです。

extendsにおすすめの設定を追加
extendsの"prettier"で Prettier 側の設定との競合を防ぐ
Tyepscript 用の Parser と Plugin を指定
rulesに import のソートルールを追加

Prettier の設定

次は、Prettier の設定をしていきます。

まずはパッケージのインストールをします。

1npm install --save-dev prettier

.prettierrcを作成します。

1{
2  "trailingComma": "es5",
3  "tabWidth": 2,
4  "semi": false,
5  "singleQuote": true
6}

VSCode の設定

最後に、VSCode で ESLint と Prettier が動作するようにします。

まずは、下記 2 つの拡張を追加します。

ESLint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

setttings.jsonで下記のように設定します。

1{
2  // Prettier
3  "editor.defaultFormatter": "esbenp.prettier-vscode",
4  "editor.formatOnSave": true,
5  // ESLint
6  "editor.codeActionsOnSave": {
7    "source.fixAll.eslint": true
8  },
9  "eslint.workingDirectories": [
10    {
11      "mode": "auto"
12    }
13  ]
14}

デフォルトのフォーマッターとして Prettier を指定し、保存時にフォーマットするようにしています。

ESLint 側の設定は、保存時のアクションとして ESLint の自動修正が実行されるようにします。また、eslint.workingDirectoriesとして"mode": "auto"に設定しています。こうすることで、package.jsonや ESLint の設定ファイルのディレクトリを自動で Working Direcotry としてくれます。