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と共存したい場合は公式の以下が参考になると思います。
