✍️

Next.jsにPrettierを導入して設定する

2022/03/27に公開

Next.js

仕事でNext.jsを使用しており、コード整形のためのPrettierを使っています。
導入方法や設定方法についてまとめました。

ほとんどの方はeslintと併用されている方がほとんどだと思うので、併用するための設定方法などについてもまとめます。

インストール

eslint-config-prettierを入れることで、Eslintと被るルールに対して、Prettierを優先することができます。

# npmの場合
$ npm install -D prettier eslint-config-prettier

# yarnの場合
$ yarn add -D prettier eslint-config-prettie

Prettierの設定を行う

次にPrettierの設定を行っていきます。

.prettierrcが無い場合は、プロジェクトルートに自分で作成してください。
.prettierrcまたは.prettier.jsonにします。

ファイルの書式はjson以外にもjavascriptのファイルでも対応しています。ファイル名はprettier.config.jsか.prettierrc.jsにします。

ファイルを作成せず、何も設定しなければ以下のリンクにあるデフォルトのものが適用されます。

自分の場合は、javascript形式のprettier.config.jsを作成しました。

設定内容は各自の好みにより変えてください。自分の場合は以下のようにしました。

prettier.config.js

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "as-needed",
  jsxSingleQuote: false,
  trailingComma: "es5",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "always",
  proseWrap: "preserve",
  htmlWhitespaceSensitivity: "css",
  endOfLine: "lf",
  embeddedLanguageFormatting: "off",
}

.prettierignoreを作成

自動で整形を保存する際に、対象外とするファイルを設定します。

.prettierignore

*.md

.eslintrc.jsonの設定

Eslintを使用しているとPrettierで被るルールがある場合、Prettier側のルールが優先される設定を施します。

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier"]
}

prettierの設定項目

上記のprettier.config.jsで設定した設定項目を解説していきます。

printWidth

折り返す行の長さを指定。

デフォルトは80

tabWidth

インデントのスペースの数を指定

デフォルトは2

useTabs

スペースではなくタブで行をインデントして、trueを設定することでタブを適用する。

デフォルトはfalse

semi

ステートメントの最後にセミコロンを追加する。trueを設定することで最後にセミコロンを追加する。

デフォルトはtrue

falseにするとセミコロンが無いとエラーになる箇所にだけセミコロンを追加する。

singleQuote

ダブルクォートの代わりにシングルクォートを使用する。JSX quotesはこの項目を無視する。
trueを設定することでシングルクォートを使う。

デフォルトはfalse

quoteProps

オブジェクトのプロパティが引用されるときに変更する。

as-needed : 必要な場合にのみ、オブジェクトプロパティを引用符で囲む(デフォルト)
consistent: オブジェクトの少なくとも1つのプロパティに引用符が必要な場合は、すべてのプロパティを引用符で囲む
preserve : 入力された引用符を尊重する

jsxSingleQuote

JSXでダブルクォートの代わりにシングルクォートを使用する。

デフォルトはfalse

trailingComma

末尾のカンマの設定。

es5 : ES5で有効な末尾のカンマ(オブジェクト、配列など)
none : 末尾にカンマをつけない(デフォルト)
all : 可能な限り末尾にカンマを付ける(関数の引数含む)

bracketSpacing

オブジェクトリテラルの角かっこの内側にスペースを入れる

デフォルトはtrue

bracketSameLine

複数行の要素の最終行の最後に「>」を置く。falseは次の行に置く。

デフォルトはfalse

arrowParens

アロー関数の()が省略可能でも常に書く。

always : ()を常に書く
avoid : 省略可能なときは()を書かない(デフォルト)

proseWrap

markdownの折返しの設定

always : Print Widthで指定した値を超える時は折り返す
never : 折り返さないしない
preserve : そのまま折り返す(デフォルト)

htmlWhitespaceSensitivity

HTMLファイルのグローバルな空白の感度を指定

css : displayプロパティのデフォルト値を尊重(デフォルト)
strict : 空白を区別する
ignore : 空白は区別しない

endOfLine

改行の文字コードを指定

lf : Linux、MacOS、gitリポジトリで一般的な、ラインフィード(\n)のみ
crlf : Windowsで一般的な、キャリッジリターン + ラインフィード文字(\r\n)
cr : キャリッジリターン文字(\r)のみ
auto : 既存の行末を維持(デフォルト)

embeddedLanguageFormatting

Prettierがファイルに埋め込まれた引用コードをフォーマットするかどうかを制御

off : 埋め込まれたコードを自動的にフォーマットしない
auto : Prettierが自動的に識別できる場合、埋め込みコードをフォーマットする(デフォルト)

VSCodeを使用している場合

VSCodeを使用している人であれば、以下のプラグインを入れることで、ファイルを保存したタイミングで自動で整形を行ってくれます。

※ ちなみにEslintのプラグインもあるため、一緒に入れるのがオススメです。

ここでは以下の順番でルールを適用します。

被る場合はPrettierを優先
ファイルを保存したときに自動で成型される
.mdは除外する

VSCodeのデフォルトチェック機能があるので、対象となるCSSなどは外します。

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.validate": ["html", "javascriptreact", "typescriptreact"],
  "css.validate": false,
  "scss.validate": false,
}