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 !!

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA