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 形式で記述する。

  • .prettierrcJSON または YAML (自動判定)
  • .prettierrc.jsonJSON 形式
  • .prettierrc.yamlYAML 形式
  • prettier.config.jsJavaScript 形式
こちらのページを参照

参考:

.prettierrc – Qiita

Configuration File | Prettier [Official]

extension ignoring config files – Stack Overflow

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

  • editor.formatOnSavetrue を指定して、ファイル保存時の自動整形を有効にする。
  • 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 の設定を理解する | 豆腐とコンソメ

VSCode のフォーマッターで自動整形する | まくろぐ

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

Install Prettier in VSCode

Prettier+

リポジトリ:

svipas/vscode-prettier-plus: Prettier for the VSCode – GitHub

入手:

Prettier+ | Visual Studio Marketplace [Official]

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

コメントを残す

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

Protected by reCAPTCHA