Nuxt3の環境にPrettierを導入する

これはなに

Nuxt.js 3の環境にPrettierを導入する方法のメモ。

はじめに

本記事の執筆時点では、Nuxt.jsのドキュメントによると、ESLintはフォーマットを実行しない。そのため、フォーマットのためには、後述するようにPrettierなどのツールを利用するよう書かれている。

At the moment, this configuration will not format your files; you can set up Prettier or another tool to do so.

Prettierの利用についてはここで議論されていたようだが、どうやらESLintでフォーマットまで行うのをやめたようだ。

Prettierの導入

まず、Prettierをインストールする。

npm install --save-dev prettier

ESLintを導入している場合は、prettier eslint-config-prettierも入れる。これは、Prettierと競合するESLintの設定を無効化するconfigである。

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

また、ESLintを導入している場合は、ESLintの設定ファイル.eslintrc.cjsにPrettier用の設定を追加する。これを追加することで、ESLintとPrettierの住み分けができる。必ずextendsの一番最後に入れる。

.eslintrc.cjs

module.exports = {
  root: true,
  extends: ['@nuxt/eslint-config', 'prettier'],
};

次に、Prettierの設定ファイルである.prettierrc.jsonを作成し、任意のオプションを設定する。設定できるオプションの詳細はPrettier公式を参照してほしい。下記に例を示す。

.prettierrc.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "vueIndentScriptAndStyle": true
}

その後、package.jsonにフォーマット用のコマンドを追加する。下記では、fixコマンドも追加し、ESLintと同時に実行できるようにしている。

package.json

{
  "scripts": {
    "format": "prettier . --write",
    "fix": "eslint --fix --ignore-path .gitignore . && prettier . --write"
  },
}

これでPrettierによるフォーマットを実行できるはずなので、以下のコマンドを実行してみる。

npm run format

自動修正もできるか確認する。

npm run fix

VS CodeにPrettierの拡張機能をインストールし、以下のVS Codeの設定を追記すれば、ファイル保存時に自動でESLintを実行できる。

settings.json

{
  // formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true
}

ちなみにVS Codeの場合、Prettierを入れた直後はESLintとバッティングしてうまく動作しないことがある。その場合は、一度VS Codeを再起動する。

参考文献・URL

Code Style · Nuxt Concepts

Nuxt supports ESLint out of the box

nuxt.com

Next.jsでWebアプリを作るときの環境構築手順メモ

notes.nakurei.com