Angularでprettierを使ってみた

JavaScriptのフォーマッタのprettierをAngluarプロジェクトで使ってみた際にやったことをメモしておきます。

prettierとは?とかの話は、以下のQiita記事にわかりやすい解説がされていました。
prettierの使い方

前提

次のバージョンのangluar-cliでng newしたプロジェクトで確認を行いました。

$ ng -v
@angular/cli: 1.4.9
node: 8.8.1
os: darwin x64

また、TSLintの設定もng newした初期状態から変更はなしです。

手順

今回はnpm scriptでローカルインストールしたprettierをコマンドラインから実行してプロジェクト内の.tsファイルをフォーマットしてみます。

インストール

ひとまずプロジェクトにprettierをインストールします。(今回はnpmを使用)

$ npm install --save-dev prettier 

prettierの設定

package.jsonのscriptsに以下の行を追加

"prettier": "prettier --parser typescript --single-quote --write \"./**/*.ts\""

まずは、prettierにTypeScriptを指定。
--single-quoteオプションを付けて実行するよう設定しています。これは、angluar-cliで作成したプロジェクトのTSLintオプションにquotemark:singleが設定されており、これとのコンフリクトを防ぐためです。

package.json

{
  "name": "tiqav-angular-frontend",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prettier": "prettier --parser typescript --single-quote --write \"./**/*.ts\""
  },
...

試してみる

プロジェクトルートディレクトリで次のコマンドを実行

$ npm run prettier

フォーマット結果がファイルに反映されるはず。
更に詳しくフォーマット設定する場合は、フォーマットルールをnpm
scriptに直接オプションを記述するのではなくprettier.config.jsなどの設定ファイルに記述するのがよいかと思います。

その他

TSLintとPrettierの設定のコンフリクトを防ぐためのプラグインもあるらしい。
https://github.com/ikatyang/tslint-plugin-prettier
https://github.com/alexjoverm/tslint-config-prettier

参考