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
参考:
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
参考: