TypsScriptのフォーマッターを考える

いろいろ検索して一般的そうなのを調べたのでメモ

tslint

tslintに--fixのオプションをつければHas Fixerがついてるものについては修正してくれる。
以下のようにpackage.jsonに設定

  "scripts": {
    "tslint": "tslint --fix **/*.ts",
  }

Prettier

tslintで十分だったが、インデントの自動調整が効かなかったのでPrettierを使用した。
個別に使用するのが面倒だったのでtslint-plugin-prettierでtslintとともに使用した。

"rules": {
    "indent": [true, "spaces", 4],
    "arrow-return-shorthand": [true, "multiline"],
    "semicolon": [true, "always"],
    "prettier": [true, {
        "tabWidth": 4,
        "bracketSpacing": true
    }]
}

こうすることでprettierの設定も有効になる。欲しかったのはtabWidthだけだったが、なんとなくbracketSpacingも追加してみた。
https://github.com/prettier/prettier

tslint-plugin-prettier

tslintとの統合が可能になるプラグイン。
https://github.com/ikatyang/tslint-plugin-prettier

個別に使いたい時は設定がバッティングしないように以下のプラグインを使うとスムーズ。
https://github.com/alexjoverm/tslint-config-prettier

TypeScript Formatter

tslint + prettier での修正で十分だったので使用しなかった。

lint-staged + husky

tslintでのエラーチェックはビルドを壊す訳でもないので結構見逃しがち。壊すと壊すでめんどくさいのでまずは無視したい。
commit　する直前にformatterを適用させると便利とprettierの公式ドキュメントにも書かれていたので以下のようにpackage.jsonに設定

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.ts": [
      "yarn tslint",
      "git add"
    ]
  }
}

commitが走る直前にgit addが走るので次のcommitからインデックスに登録されることになる。
push前とかにテスト走らせたりしたらもっと便利そう。

まとめ

ということで快適なフォーマットライフを