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

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

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

### 使用モジュール
- husky v9
- Prettier
- lint-staged

## 1. Prettierの導入
まずPrettierを導入するために以下のコマンドを行いました。
```zsh
// パッケージインストール
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でファイル保存時の自動整形でもいいかなと思ったんですが、[こちらの記事](https://qiita.com/Sanada-code/items/aa73f0d874001d3d3bd7)がとっても勉強になったので、pre-commitで整形することに。

## 2. pre-commitでの実行
まず、huskyとlint-stagedをインストールします。
```zsh
// huskyとlint-stagedをインストール
npm i -D husky lint-staged
```

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

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

詳しくは[こちら](https://qiita.com/mu-suke08/items/43a492fda5cd71a31506)が勉強になりました。
ただ、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"
    }
}
```

以上です。


### 参考
https://prettier.io/docs/en/configuration.html

https://qiita.com/soarflat/items/06377f3b96964964a65d

https://qiita.com/frozenbonito/items/130f1fce5d3f97997d81#vscodesettingsjson

https://qiita.com/Sanada-code/items/aa73f0d874001d3d3bd7

https://qiita.com/sugasaki/items/0ccb272b03b5ef3aeb86

https://qiita.com/mu-suke08/items/43a492fda5cd71a31506

https://github.com/typicode/husky/releases/tag/v9.0.1