Prettierのみを使ってTypeScriptを自動フォーマット
Prettierを使って、IntelliJ IDEAで開発中のTypeScriptコードを保存したら自動でフォーマットされるようにしました。
その際、ESLintは使用しません。
Table of Contents
背景
普段のTypeScript開発ではIntelliJ IDEAを使っています。
その場合、IntelliJ IDEAに付属のコードフォーマット機能を使っていました。
しかし、それにはいくつか気になる点がありました。
- IntelliJ IDEA以外のエディタ/IDEで開発をしたとき同じようにフォーマットされない
- IntelliJ IDEAのフォーマット設定が変わるとフォーマットが変わる
- ↑は通常バージョン管理対象外
Go言語は公式にコードフォーマッターが提供されており、保存するだけ同じフォーマットに整形できます。
PythonもBlackを使うと同じことができ、これが非常に快適です。
TypeScriptでも同様のことができるようにしようと思ったわけです。
Prettier
JavaScript/TypeScript界隈にもフォーマッターの選択肢はいくつかあります。
その中でも最もスターの多いPrettierを使うことにしました。
ESLintは使わないの?
インストール
npmでインストールします。
$ npm i -D prettier
動作確認
フォーマットされているかのチェック
--check
オプションをしてnpx
コマンドを実行します。
$ npx prettier --check main.ts
main.ts
がフォーマット済みなら以下のメッセージが表示されます。
Checking formatting...
All matched files use Prettier code style!
フォーマットされていない場合は以下のメッセージが表示されます。
Checking formatting...
main.ts
Code style issues found in the above file(s). Forgot to run Prettier?
フォーマット
フォーマット後の内容が標準出力に出力されます。
$ npx prettier main.ts
フォーマット後の内容でファイルを上書きする場合は--write
オプションを指定します。
$ npx prettier --write main.ts
Parseを指定する必要はないの?
設定
設定ファイルの読み込ませ方は何通りかありますが、今回は.prettierrc.yaml
を作成しました。
printWidth: 120
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
quoteProps: as-needed
trailingComma: all
bracketSpacing: true
arrowParens: avoid
以下のスタイルが好みなので、これに準拠させました。
参考
IntelliJ IDEAの設定
ファイルを保存したら自動でフォーマットされるようにIntelliJ IDEAを設定します。
File Watchersプラグインのインストール
ファイル保存時に決まった処理をさせるため、File Watchersプラグインをインストールします。
File Watchersの設定
以下のようにTools > File Watchers
から新しい設定を追加します。
Level
をGlobal
にしておけば、他のプロジェクトに反映させたい場合もEnabled
をチェックするだけです。
Program
$ProjectFileDir$\node_modules\.bin\prettier
は現在のプロジェクトでnpm install
したnode_modules
配下のprettier
を示しています。
Arguments
直接ファイルを上書きするため、--write
オプションを指定しています。
動作確認
ファイルを編集して保存しましょう。
Prettierがバックグランドで動作し、ファイルが自動フォーマットされたらOKです😄
総括
Prettierを使って、IntelliJ IDEAで開発中のTypeScriptコードを保存したら自動でフォーマットされるようにしました。
シンプルにただPrettierだけを使いたい…という方にはオススメです👍
ESLintと共存したい場合は公式の以下が参考になると思います。