【Git】commit時に、Prettierで自動フォーマットをかける【991日目】

フォーマットをかけたい

プロジェクトとかで、チームで開発をしている時、みんな書き方が違うと困る。
共通のフォーマットをかけたい。

エディターでかければいいが、人によっては使用しているエディターが違う、対応していない、ということもある。

なので、必ずかけるgitを使ってフォーマットをかけよう。
今回は、HTMLとCSSとJSを対象とします。

全体の流れ

npm(Node.js)をインストール
npmでPrettier他色々入れる
commitしてみる

凄く簡単です。

0. 使用するフォーマット

Prettierを使用。

prettier.io

npmとかでインストール出来ます。

1. npm(Node.js)のインストール

Node.jsを入れれば付いてくるのでNode.jsをインストール

nodejs.org

2. npmでPrettier他色々入れる

フォーマット他を入れるための、ダウンロードリストを用意しよう。

手元の環境に、以下のファイルを用意する。

package.json

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.html": [
      "prettier --write --parser html",
      "git add"
    ],
    "*.css": [
      "prettier --write --parser css",
      "git add"
    ],
    "*.js": [
      "prettier --write --single-quote --parser typescript",
      "git add"
    ]
  },
  "devDependencies": {
    "husky": "^0.14.3",
    "lint-staged": "^7.0.4",
    "prettier": "^2.0.5"
  }
}

このファイルを用意したら、インストールコマンドを打とう。

npm install

これで環境を用意出来た。
ちなみに、インストールしたものの1つ、 huskyとかが、gitでcommit時に変更するスクリプトとかを用意してくれてます。

一応、忘れずにnpmでインストールしたものをgitで管理しないように、
.gitignore に記述を追記しておく。

### NPM ###
node_modules/

3. commitしてみる

てきとーなファイルを変更。

git add .
git commit -m "test"

すると、commit時にファイルにフォーマットがかかり、フォーマットしたあとの変更がcommitされる。
手元のファイルを確認してみよう。

ちなみに、VSCodeの機能を使ってcommitをした場合でも、同様にフォーマットがかかる。
(VSCodeなら、Prettierのプラグインで最初からフォーマットしたほうがいいとは思いますが！)

以上、簡単なので、共通のフォーマットを使う際に参考に。
今回のファイルの詳細な意味はまた別記事で。

エンジニアのひよこ_level10

毎日更新してた人。たまに記事書きます。