Next.jsにPrettierを導入してコードをきれいに保つ ✨

これまで、Prettier導入済みのプロジェクトに参加したことはありましたが、自ら積極的に導入したことはありませんでした。

しかし、最近、コーディングのルールを若干見直しまして、古い書き方と混ざるのが嫌なので、Prettierの力でコードを整えることを決意しました。
いままで声に出したことがなかったのですが、Prettierはプリティアと読むようです。

前提

Next.js 12（TypeScript）に導入する
ESLintは導入済み（Next.js 11以降なので標準搭載）

導入手順

必要なパッケージをインストール

yarn add -D prettier eslint-config-prettier

prettier本体と ESLintとのバッティングを避けるためにeslint-config-prettier を導入します。

www.npmjs.com
www.npmjs.com

設定ファイルの作成・修正

ドキュメントを見ながら設定項目を .prettierrc にまとめ、ルートに保存します。

prettier.io

.prettierrc

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "always",
  "bracketSameLine": true
}

また、.eslintrc.jsonのextendsにprettierを追加します。

.eslintrc.json

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

scriptの追加

package.jsonにprettierの実行を追加します。

package.json（抜粋）

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "prettier": "prettier --write --ignore-path .gitignore ."
}

これで、

yarn prettier

で、設定通りにコードを成形してくれるはずです。

雑感

意外と設定項目が少なく（非推奨のものを除くと22個 ※ 2022年4月現在）、シンプルに設定できるなと思った反面、これが設定できないのかと思うところもありました。

例えば、僕は省略できる0は積極的に省略していくのですが、

opacity: .4;

👇

opacity: 0.4;

に修正されます。

あと、bracketSpacingがオブジェクトにしか効かないので、

styled-components内の変数が、

color: ${ white };

👇

color: ${white};

となったり、

useStateが、

const [ width, setWidth ] = useState(0);

👇

const [width, setWidth] = useState(0);

となったり、

JXSに変数を渡す部分が、

<p data-color={ color }>{ label }</p>

👇

<p data-color={color}>{label}</p>

となったりするのが気になるのですが、ここらへんは慣れていくしかなさそうです。

みかづきブログ・カスタム

基本的にはちょちょいのほいです。