TypeScriptおよびJSONにPrettierを適用する方法

概要

TypeScriptおよびJSONに「Prettier」コード整形の手動および自動での適用方法の手順について記載します。

まずTypeScriptのプロジェクトディレクトリに移動し、次のコマンドでPrettierをインストールします。

npm i -D prettier

手動でフォーマットする場合

npx prettier [オプション] [対象ファイル/ディレクトリ]

使用例

ファイルを指定して変更される内容を出力（フォーマットされた結果は反映しない）

npx prettier ./config/config.ts

ファイルを指定してフォーマットされた結果を上書き

npx prettier --write ./config/config.ts

./config 直下のファイルを全てフォーマットして上書き

npx prettier --write ./config

./lib 配下のファイルでフォーマット対象となるファイルをチェック

npx prettier --check ./lib

自動でフォーマットする場合

Visual Studio Codeの拡張機能「Prettier - Code formatter」をインストールして、以下の設定を実行します。

「歯車アイコン」を選択して、「設定」を選択します。

プロンプトに「onsave」を入力し、画面上に表示されている「settings.jsonで編集」を選択します。

以下のように「settings.json」の任意の箇所に赤枠のキー・バリューを挿入します。

挿入した赤枠のキー・バリューは以下の通りです。

{
    "[json]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" // JSONに対してPrettierを適用
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode" // TypeScriptに対してPrettierを適用
    },
    "editor. formatOnSave": true // 保存時に自動でフォーマットする
}

ファイルを変更した上で保存するタイミングで変更した個所のみフォーマットされます。
フォーマットのタイミングの設定などは好みで変更してください。