Prettier の使い方 [VSCode]

Prettier

コードフォーマッター「Prettier」を Visual Studio Code (VSCode) で使用できるようにする拡張機能

参考：

Prettier – Code formatter | Visual Studio Marketplace [Official]

導入

参考：

Prettier を導入してみた | Kazu Tech Blog

使い方

参考：

VSCode の拡張機能 Prettier でソースコードを整形する | bnote

TypeScript コードを Prettier で自動整形する | まくろぐ

Prettier – インストール／設定／使い方／機能しない時の対処方 | ミンウェブ

Prettier の使い方 & おすすめ設定を紹介 | 株式会社マーベリックス

VSCode で Prettier を使う方法 | RalaCode

Visual Studio Code で Prettier を使用してコードをフォーマットする方法 | DigitalOcean

設定

参考：

VSCode の Prettier の設定を理解する | 豆腐とコンソメ

フロントエンド開発の使う自分用の Prettier 設定まとめ | とーますメモ

prettier settings for VSCode – Stack Overflow

auto formatting with prettier – Stack Overflow

設定ファイル

JSON、YAML または JavaScript 形式で記述する。

• .prettierrc
• .prettierrc.json
• .prettierrc.yaml
• prettier.config.js

参考：

.prettierrc – Qiita

Configuration File | Prettier [Official]

extension ignoring config files – Stack Overflow

ファイル保存時に自動整形する

設定ファイルの editor.formatOnSave で自動保存を有効にし、editor.defaultFormatter で「Prettier」拡張機能をデフォルトフォーマッターとして指定する。

{
    // ...
    "editor.formatOnSave": true
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // ...
}
Code language: JSON / JSON with Comments (json)

参考：

VSCode 保存時に Prettier の自動フォーマットが効かなくなった件 | かもメモ

まとめ／Tips

参考：

「なんとなく使う」から「分かって使う」へ | AI can fly !!