【Nuxt 2】Prettierの導入

Prettier とは

Prettier は、コードフォーマッターの 1 つです。 HTML や JavaScript などのソースコードに対し、インデントやタブサイズなどを設定に基づき整形してくれます。

Prettier

Prettier は、vue ファイルにも適用できるため、NuxtJS プロジェクトにおいてもコードの統一性を図るために利用できます。

Prettier の導入

以下コマンドで、NuxtJS に Prettier をインストールします。

$ npm install -D prettier

次に Prettier 用の設定ファイルとして.prettierrc.json（または.prettierrc）をプロジェクトのルートフォルダに作成します。

{
  "semi": false,
  "singleQuote": true
}

設定内容については後述しますが、上記は以下のような設定となります。

• 末尾のセミコロンはつけない
• 文字列はシングルクォート

最後に Prettier 実行用のコマンドを設定します。 package.jsonの"scripts"に以下を追記します。

"scripts": {
  "fmt": "prettier --write --ignore-path .gitignore ./**/*.{js,vue}"
}

prettier ./**/*.{js,vue,css}とすることで、カレント配下のすべての js、vue ファイルが整形の対象となります。

--writeオプションは、整形した結果で対象のファイルを上書きするためのものです。 このオプションがない場合、整形結果がコンソールに出力されるだけでファイルに保存されません。

--ignore-pathオプションは、整形対象外のフォルダまたはファイルを設定したignoreファイルを指定するためのものです。 通常は.prettierignoreを作成するのですが、Git 管理をしている場合は.gitignoreと内容が重複することが多いため、このオプションを使用します。

上記で設定したコマンドを実行することで、対象ファイルが整形されます。

$ npm run fmt

Prettier の設定項目

Prettier の設定として、.prettierrc.jsonには以下の項目を記述します。

下記の設定項目は一部であり、詳細は以下のリンクを参照してください。
> Options · Prettier

bracketLintについては、true、falseで以下の違いがあります。

• true

  <button
    className="prettier-class"
    id="prettier-id"
    onClick="{this.handleClick}"
  >
    Click Here
  </button>

• false

  <button
    className="prettier-class"
    id="prettier-id"
    onClick="{this.handleClick}"
  >
    Click Here
  </button>

ESLint との併用

Prettier は、ESLint と併用して使われることが多いです。 ESLint については、以下別の記事で紹介していますので、参考にしてください。

【Nuxt 2】ESLint の導入

ESLint には、--fixオプションにより特定のルールに対してコードフォーマットができます。 それでも Prettier を併用するのは、Prettier の方がコードフォーマットとして優秀だからです。 コードフォーマットは Prettier で行い、その後のフォーマットチェックは ESLint で行うようにします。

ESLint と併用するためには、eslint-config-prettierをインストールする必要があります。

$ npm install -D eslint-config-prettier

これは、ESLint のルールの中で、上記 Prettier の設定項目に含まれているものは無視するといったものです。 ESLint の設定ファイルである.eslintrc.jsのextendsに'prettier'を追記します。 その他のextendsがある場合は、一番最後になるように追記してください。

module.exports = {
  extends: [
    '@nuxtjs',
    'prettier'
  ]
}

ESLint と Prettier を一緒に実行するために、以下のようにpackage.jsonのscriptsにコマンドを定義します。

"scripts": {
  "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
  "fmt": "prettier --write --ignore-path .gitignore ./**/*.{js,vue}",
  "fix": "npm run lint:js && npm run fmt"
}

$ npm run fix

Visual Studio Code の設定

エディターとして Visual Studio Code（VSCode）を使用している場合、以下の Prettier の拡張機能をインストールすることで、Prettier を便利に使用することができます。

Prettier - Code formatter - Visual Studio Marketplace

エディタ共通の設定として Prettier の設定もできますが、ここではプロジェクトごとに設定を行うよう.vscode/setting.jsonを作成します。

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

editor.formatOnSaveでファイル保存のタイミングでコードフォーマットを行うかを設定します。 editor.defaultFormatterで使用するコードフォーマッターを指定します。 今回は Prettier を使用するため上記の設定となります。 Prettier でコードフォーマットを行う場合は、.prettierrc.jsonに従って行われます。

ファイル毎にフォーマッターを分けたい場合は、以下のようにします。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}