Prettier
コードフォーマッター「Prettier」を Visual Studio Code (VSCode) で使用できるようにする拡張機能
入手：
Prettier – Code formatter | Visual Studio Marketplace [Official]
目次
導入
参考：
Prettier を導入してみた | Kazu Tech Blog
Visual Studio Code への Prettier 導入について – Qiita
使い方
参考：
Visual Studio Code へ ESLint と Prettier を導入する – Qiita
Prettier の使い方 & おすすめ設定を紹介 | 株式会社マーベリックス
VSCode で Prettier を使う方法 | RalaCode
Prettier – インストール／設定／使い方／機能しない時の対処法 | DIGITOR
VSCode の拡張機能 Prettier でソースコードを整形する | bnote
Visual Studio Code で Prettier を使用してコードをフォーマットする方法 | DigitalOcean
設定
参考：
VSCode の Prettier の設定を理解する | 豆腐とコンソメ
フロントエンド開発の使う自分用の Prettier 設定まとめ | とーますメモ
prettier settings for VSCode – Stack Overflow
auto formatting with prettier – Stack Overflow
設定ファイル
JSON、YAML または JavaScript 形式で記述する。
.prettierrc：JSON または YAML (自動判定).prettierrc.json：JSON 形式.prettierrc.yaml：YAML 形式prettier.config.js：JavaScript 形式
参考：
Configuration File | Prettier [Official]
extension ignoring config files – Stack Overflow
ファイル保存時に自動整形する
editor.formatOnSaveにtrueを指定して、ファイル保存時の自動整形を有効にする。editor.defaultFormatterで、「Prettier」拡張機能 (esbenp.prettier-vscode) を既定のフォーマッターとして指定する。
設定ファイル (settings.json) に次の記述を追加する。
{
// ...
"editor.formatOnSave": true
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// ...
}Code language: JSON / JSON with Comments (json)参考：
VSCode の Prettier の設定を理解する | 豆腐とコンソメ
formatOnSave がある日突然動かなくなった – Qiita
VSCode 保存時に Prettier の自動フォーマットが効かなくなった件 | かもメモ
JavaScript / TypeScript を整形する
参考：
Visual Studio Code へ ESLint と Prettier を導入する – Qiita
VSCode で ESLint + typescript-eslint + Prettier を導入する – Qiita
VSCode で ESLint × Prettier のベストかも知れないプラクティス – Qiita
ESLint と Prettier の組み合わせ | kohski
ESLint + Prettier を導入した TypeScript 開発環境 | たぬきうどん大盛り
TypeScript のプロジェクトに ESLint と Prettier を併用して VSCode の保存時に自動フォーマットをする | ZUMA Lab
Next.js に ESLint と Prettier を併用して静的解析と自動フォーマットを行う | ZUMA Lab
TypeScript の開発環境を作る／VSCode を基本に ESLint と Prettier も添えて | Multi Vitamin & Mineral
CSS / SCSS を整形する
参考：
VSCode で Prettier と Stylelint を連携して CSS / SCSS ファイル保存時にオートフォーマットをかける – Qiita
PHP
参考：
PHP の開発で Prettier を使用してフォーマットする方法 | masayanblog
パス
参考：
Visual Studio Code への Prettier 導入について – Qiita
Custom Prettier Resolution · Issue #232 · prettier/prettier-vscode – GitHub
プラグイン
参考：
Plugin support? · Issue #395 · prettier/prettier-vscode – GitHub
まとめ／Tips
「なんとなく使う」から「分かって使う」へ | AI can fly !!
Prettier / ESLint を導入する際にハマったこと | りゅーそう
チュートリアル
VSCode ESLint, Prettier & Airbnb Style Guide Setup
Prettier+
リポジトリ：
svipas/vscode-prettier-plus: Prettier for the VSCode – GitHub
入手：