とーますメモ

Ruby on Rails / Goなどの学習メモ

【VSCode】 フロントエンド開発の使う自分用のPrettier設定まとめ

以下の記事さんがすごいまとまっていてよかった。
【Prettier】「なんとなく使う」から「分かって使う」へ【Visual Studio Code】 - AI can fly !!

要はVSCodeで、Prettierを使うには以下の2つの方法がある。

1)npmやyarm経由でインストールしたPrettierを使う方法
2)VS Codeの拡張機能にバンドルされているPrettierを使う方法

VS Codeの拡張機能でPrettierを使用している場合で、
ローカルやグローバルにPrettierがインストールされていない場合
VS Codeの拡張機能にバンドルされているPrettierが使用されるため、チーム開発等の場合、バージョンを揃えるのが難しくなってしまう。

そのためVS CodeでPrettierを使用する場合は、まずローカルにnpmやyarm経由で、Prettierをインストールした後にVS CodeでPrettierを使用することを推奨している。ローカルにPrettierがインストールされていれば、VS Codeの拡張機能もそのPrettierを使用する。

This extension will use prettier from your project's local dependencies (recommended).

Should prettier not be installed locally with your project's dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

Prettier - Code formatter - Visual Studio Marketplace

またグローバルにPrettierをインストールしている場合は、
「prettier.resolveGlobalModules」を「true」に設定すれば良い。

また固定バージョンのprettierをpackage.jsonに書き込みたい場合は以下のコマンドを使用すれば良い。

$ npm install -D --save-exact prettier

インストールするとVS Code上で、インストールしたPrettierが使用される旨のプロンプトが表示されるので「Allow everywhere」を選択する。

後、VS Codeのsettions.jsonで以下をしてしてあげればフォーマッターが設定できる。

// すべての言語で保存時にフォーマットを行う
"editor.formatOnSave": true,

// すべての言語を対象に既定のフォーマッターを設定する場合
"editor.defaultFormatter": "esbenp.prettier-vscode",

"[javascript]": {
  // 言語単位で既定のフォーマッターを設定する場合
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 言語単位で保存時にフォーマットを行うか設定する
  "editor.formatOnSave": true
}

【Prettier】「なんとなく使う」から「分かって使う」へ【Visual Studio Code】 - AI can fly !!

プロジェクト直下に.prettierrcファイルを作成することで、独自ルールが設定でき、VS Code上の設定が上書きされる。
このファイルをチームで共有すれば同じフォーマッター設定が使用できる。

設定する内容

prettierrc

{
  "printWidth": 120,
  "singleQuote": true,
  "endOfLine": "lf"
}

[参考]
【VSCode】Prettierの使い方&おすすめ設定を紹介 | 北海道札幌市のホームページ・Web制作会社|株式会社マーベリックス
.prettierrc - Qiita
prettier-v1.13.7チートシート - Qiita