なになれ

IT系のことを記録していきます

Prettierを導入する際に調べたことまとめ

TypeScript Prettier

Prettierとは

コードフォーマッターです。Webフロントエンド向けに対応言語が豊富です。
Webフロントエンドの開発環境ではデファクトスタンダードになっているツールのようです。
GitHubのスター数は29,000を超えています。※2018年12月9日現在

github.com

今回は以前に作成したTypeScriptのプロジェクトにPrettierを導入しました。

hi1280.hatenablog.com

その際に調べたことをまとめます。

導入方法

既にTSLintが導入済みである前提としています。

インストール

必要なnpmモジュールをインストールします。

npm install --save-dev prettier tslint-config-prettier

tslint-config-prettierはTSLintとPrettierとの設定上の競合を防止するために必要なモジュールです。

設定

tslint-config-prettierをTSLintに設定します。

tslint.json（一部抜粋）

    "extends": [
        "tslint:recommended",
        "tslint-config-prettier"
    ],

Prettierの設定ファイルを作成します。

.prettierrc

{
    "printWidth": 120,
    "trailingComma": "all",
    "singleQuote": true
}

好みに合わせてフォーマットのオプションを設定します。
設定の詳細はこちらです。
Options · Prettier

実行確認

これでPrettierが使えます。

下記のようにnpm-scriptsを設定すると実行できます。
package.json（一部抜粋）

"scripts": {
  "format": "prettier --write src/**/*.ts"
}

npm run format

Gitのコミット時に実行する

チームで開発する場合には他のメンバーにも同じコードフォーマットを適用したいところです。
そのために、Gitのコミット時にPretttierを実行します。

インストール

必要なnpmモジュールをインストールします。

npm install --save-dev lint-staged husky

設定

package.jsonを修正します。
npm run lintでlintも合わせて実施するようにしています。

package.json（一部抜粋）

  "scripts": {
    "lint": "tslint -p tsconfig.json --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.ts": [
      "prettier --write",
      "npm run lint --",
      "git add"
    ]
  },

参考情報

Pre-commit Hook · Prettier

補足情報

Prettier適用の試行錯誤中に見つけた情報です。

VSCodeの拡張機能による導入方法

今回はGitのコミットの際にコードフォーマットを実行するようにしました。
その他にもファイルの保存時に実行するようにしたい場合は以下のVSCodeの拡張機能を試すのが良さそうです。
個人での開発の場合ではこの方法でも良さそうです。

VSCodeで自動整形ツールのprettierで自動フォーマットされるようにする - Qiita

TSLintにPrettierの設定を統合する方法

今回はPrettierの設定とTSLintの設定を別にしました。
tslint-plugin-prettierでTSLintにPrettierを統合できます。
ただ、別々にしても使用感は特に変わりがないと思ったので、この方法は採用しませんでした。

TypeScript + TSLint + Prettier + Webpack環境を作成したときのメモ - Qiita

この方法を試す中で、ハマったポイントがあります。
tslint.jsonに以下のように直接Prettierの設定を書いた場合には、VSCodeのtslintプラグインがPrettierでのルールをtslint上の問題として正常に出力してくれました。

tslint.json

{
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ],
  "extends": [
    "tslint-config-standard",
    "tslint-config-prettier"
  ],
  "rules": {
    "prettier": [
      true,
      {
        "singleQuote": true
      }
    ]
  }
}

Prettierの設定に.prettierrcなどの別ファイルを使用した場合、以下のようにしないと誤った出力になります。
editorconfigを無効化することで、外部ファイルの設定が有効になるようです。

tslint.json

{
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ],
  "extends": [
    "tslint-config-standard",
    "tslint-config-prettier"
  ],
  "rules": {
    "prettier": [true, null, { "editorconfig": false }]
  }
}

参考

Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita

Step by step: Building and publishing an NPM Typescript package.