PrettierとEditorconfigの統合。そして、pre-commitで整形する。

本記事をお読みいただきありがとうございます。
42TokyoのM1n01です。
今回、開発中のプロダクトで、pre-commit時のコード整形機能を導入することになったので、備忘録的にまとめます。

はじめに

npm + prettier 環境です。
ESLintは使用してません。
Prettierのみですので、あらかじめご了承ください！

使用モジュール

• husky v9
• Prettier
• lint-staged

1. Prettierの導入

まずPrettierを導入するために以下のコマンドを行いました。

// パッケージインストール
npm i -D prettier

// 設定ファイルとignoreファイルの作成
touch .prettierrc.json .prettierignore

ここでプロジェクトディレクトリには、ほぼ誰も使ってない.Editorconfigファイルの存在に気づきました。

.Editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml}]
indent_size = 2

[docker-compose.yml]
indent_size = 4

Prettierの公式ドキュメントによると、.Editorconfigと.prettierrc.jsonを同時に設定できるようです。

If options.editorconfig is true and an .editorconfig file is in your project, Prettier will parse it and convert its properties to the corresponding Prettier configuration.

ということで、Editorconfigで設定できるものはこちらで設定します。
言い忘れてましたが、私たちのプロジェクトでは、Vue.jsとLaravelを使用しています。

.Editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml,json,js,vue,html}]
indent_size = 2

[docker-compose.yml]
indent_size = 4

[*.{scss,css}]
indent_size = 4
indent_style = tab

.prettierrc.json

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 120,
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "quoteProps": "consistent",
  "bracketSameLine": false,
  "singleAttributePerLine": false
}

あとは、ターミナルで以下を実行すれば動きはします。

// jsファイルのみ
npx prettier --write "./**/*.js"
// 複数の拡張子を選択する場合
npx prettier --write "./**/*.{js,css,html}"

settings.jsonでファイル保存時の自動整形でもいいかなと思ったんですが、こちらの記事がとっても勉強になったので、pre-commitで整形することに。

2. pre-commitでの実行

まず、huskyとlint-stagedをインストールします。

// huskyとlint-stagedをインストール
npm i -D husky lint-staged

huskyについて

huskyというのは、commitやpushなどをフックにして設定したコマンドを実行させます。

ここで勘のいい人は、Git Hook?となるかもしれません。
しかし、大きく異なるのはリポジトリで管理できる点です。
Git Hookは.gitディレクトリ内のため複数人で管理できません。
その点で、Huskyは非常に優れているのです。

詳しくはこちらが勉強になりました。
ただ、huskyのバージョンが違うのでコマンドが実行できない点についてはご注意ください。

lint-stagedとは

ステージングされたファイルを対象にコマンドを実行することができます。

なので、huskyと組み合わせると、"commit実行時"に"ステージングされたファイル"に対して、コード整形を行えるのです。

脱線したので戻ります

huskyとlint-stagedについて理解できたところで進めていきます。

// huskyを実行する
npx husky init

すると、.huskyディレクトリがプロジェクトルートに作成されるので、以下を追加する。

.husky/pre-commit

npx lint-staged

さらに、package.jsonにも記述する。

package.json

    ...,
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,vue,css,scss}": "npx prettier --write"
    }
}

以上です。

参考