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が設定されており、これとのコンフリクトを防ぐためです。
{
"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
参考