git commitしたときにTypeScriptコードを自動修正する方法(tslint, prettier, lint-staged使用)

git commit時にリントツールでソースコードをチェックし、問題があればコミットを拒否するようにする設定はよくある。コミットが拒否されたら、開発者はソースコードを手直ししてもう一度コミットするわけだが、この手順は結構機械的だったりする。

tslintは--fixオプションを渡せば、自動修正してくるものもある。なので、考え方を一歩進めて、問題を報告するのではなく、問題があるなら勝手に直してそのままコミットに含めてしまったほうが、だいたいのケースで無駄な手順が省ける。そうなっていれば、開発者も「コミットする前にリントしなくちゃ」といったことを意識しなくても良くなる。

本稿では、この考えのもと、コミット時にコードを自動修正する方法を紹介する。

必要なパッケージを入れる:

yarn add --dev husky lint-staged tslint prettier tslint-config-prettier tslint-plugin-prettier

• husky: git commit したときにlint-stagedを走らせるために必要
• lint-staged: git addされたファイルに対してtslintなどをかけるようにするために使う
• tslint, prettier: TypeScriptコードのスタイルを整形する
• tslint-config-prettier: tslintのルールのうちprettierとぶつかるものを無効化してくれる
• tslint-plugin-prettier: prettierをtslintの中で使う

必要なパッケージが入ったら、まずpackage.jsonを変更する。

package.jsonのscripts(NPMスクリプト)にprecommitを追加し、lint-stagedを呼び出すようにする。こうすることで、git commitしたタイミングでリントが自動的に走るようになる。

package.json

{
  "scripts": {
    "precommit": "lint-staged"
  }
}

同じく、package.jsonにlint-stagedのフィールドを追加する。

package.json

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "tsc --noEmit",
      "tslint -p tsconfig.json -c tslint.json --fix",
      "git add"
    ]
  }
}

この設定例は3つのステップに分かれる:

1. tscでコンパイルできるかチェック
2. tslintでチェックしながら、直せるコードは自動修正
3. 最後に(チェックがここまで問題なければ)、ステップ2で修正されたコードをgit add

その後、git commitに続く流れになる。つまり、開発者はとくに意識することなく、コミットしたコードが自動修正された状態になる。

続いて、prettierの設定。

.prettierrc

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all"
}

最後に、tslintの設定。extendsで["tslint-plugin-prettier", "tslint-config-prettier"]を追加しておく。また、rulesに"prettier": trueも加える。

tslint.json

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended", "tslint-plugin-prettier", "tslint-config-prettier"],
  "jsRules": {"no-unused-expression": true},
  "rules": {
    "arrow-parens": [true, "ban-single-arg-parens"],
    "interface-name": [false],
    "linebreak-style": [true, "LF"],
    "max-line-length": [true, {"ignore-pattern": "<\\w+>"}],
    "member-access": [true, "no-public"],
    "no-any": true,
    "no-irregular-whitespace": true,
    "number-literal-format": true,
    "object-literal-sort-keys": [true, "match-declaration-order-only"],
    "prettier": true, // ここ
    "quotemark": [true, "single", "jsx-double"]
  },
  "rulesDirectory": []
}

以上で、git commitしたときに、tslint+prettierで自動的にコードを修正できるようになる。