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

スポンサーリンク

はじめに

下記の開発環境にて、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
ApluggableandconfigurablelintertoolforidentifyingandreportingonpatternsinJavaScript.Maintainyourcodequalitywithease.

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
ApluggableandconfigurablelintertoolforidentifyingandreportingonpatternsinJavaScript.Maintainyourcodequalitywithease.

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

{
  "extends": ["eslint:recommended"]
}

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

Rules Reference - ESLint - Pluggable JavaScript Linter
ApluggableandconfigurablelintertoolforidentifyingandreportingonpatternsinJavaScript.Maintainyourcodequalitywithease.

Prettier

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

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

Prettier · Opinionated Code Formatter
OpinionatedCodeFormatter

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

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

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

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
Options · Prettier
Prettiershipswithahandfulofformatoptions.

ESLint と Prettier を併用する場合

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

  • ESLint: コードの品質に関すること
  • Prettier: コードの書式に関すること
Prettier vs. Linters · Prettier
##HowdoesitcomparetoESLint/TSLint/stylelint,etc.?
Integrating with Linters · Prettier
Lintersusuallycontainnotonlycodequalityrules,butalsostylisticrules.MoststylisticrulesareunnecessarywhenusingPrettier,butworse–theymightconflictwithPrettier!UseP...

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

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

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

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

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

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

{
  "extends": [
    // 他の設定
    "prettier"
  ]
}

実際に設定してみる

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

アプリの初期設定

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

❯ npx create-next-app
✔ What is your project named? … eslint-and-prettier
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … No

...

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

ESLint の設定

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

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

npm 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は下記の通りです。

{
  "root": true,
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["./tsconfig.json"]
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

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

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

Prettier の設定

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

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

npm install --save-dev prettier

.prettierrcを作成します。

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

VSCode の設定

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

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

ESLint - Visual Studio Marketplace
ExtensionforVisualStudioCode-IntegratesESLintJavaScriptintoVSCode.
Prettier - Code formatter - Visual Studio Marketplace
ExtensionforVisualStudioCode-Codeformatterusingprettier

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

{
  // Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  // ESLint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ]
}

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

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

参考

タイトルとURLをコピーしました