【npm】Prettierをコミット時にかけるときのpackage.jsonの解説【992日目】

前回の話

www.nyamucoro.com

こちらで自動的に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"
  }
}

devDependencies

順番が上下しますが、まずこれを説明します。

npm installで入れるパッケージを指定します。
ここに書かれたものをインストールしていきます。

この説明のために、もう一つ重要な内容として、 dependenciesというものがあります。
devDepenencies と dependenciesの違いは、開発時にのみ使うものと、開発時も本番も両方使うものという違いがあります。

npm install production とうつと、 dependencies に書かれたものだけインストールします。
npm install とうつと、両方インストールします。

前者は本番環境で使うときに使うコマンド、後者は開発環境時に使うコマンドです。
今回のフォーマットをかけるのは、あくまで開発時にしか使わないコマンドなので、 devDependencies に書かれています。

scripts

scriptsの項目は、コマンドのエイリアスです。
npm run のあとに左に書いたコマンドを打つと、右のコマンドが動くというものです。

このあと出てくるhuskyが、 npm run -s precommitというコマンドを打つので、
その時に動くものをlint-stagedにしようというのが、この行の目的になります。

この npm run -s precommit は、 husky をインストールした時点で、
.git の hooks に記述を自動的にしてくれます。

lint-staged

lint-staged/README.md at master · okonet/lint-staged · GitHub

README参照。 devDependencies でインストールした lint-staged で対象となるファイルと、
実際に行うコマンドを記述します。