Prettier-logo

はじめに

皆さん、 Prettier は使っていますか？

フロントエンドのコードフォーマッターのデファクトスタンダード、もはや使っていない人はいないと言っても過言ではないでしょう。（過言です）

僕も普段は Visual Studio Code (以降、 VSCode) でコードを書いていますが、 Prettier は VSCode の拡張機能をインストールして使用しています。

そんな Prettier ですが、 VSCode で使用するにあたって、どこまで理解して使っているでしょうか？

VSCode で Prettier 拡張機能をインストールしたら動いたから、あとは設定を適当にいじって使っている。

そんな人はいませんか？（ちょっと前の僕です）

今回はそんな「なんとなく使う」から「分かって使う」ために、 VSCode 上での使い方を含めて Prettier についてまとめてみました。

Prettier の細かい設定については当記事では触れませんので、公式ドキュメントの Options をご覧ください。

prettier.io

前提条件

Visual Studio Code をインストール済み
Node.js をインストール済み

動作環境

OS	Version
Windows 10 Pro	1909

Application	Version
Visual Studio Code	1.44.2
PowerShell	5.1.18362.752
Node.js	12.16.2
npm	6.14.4
Yarn	1.22.4

Package	Version
Prettier	2.0.5
esbenp.prettier-vscode	4.5.0

大事なことを最初に

VSCode で初めて Prettier を使用するときに、何も知らない人 (当時の僕のような) が躓くであろうポイントを最初に書いておきます。

僕ははじめ、 VSCode で Prettier 拡張機能をインストールして、設定を適当にいじったらコードがフォーマットされたため、これで Prettier が使えるものだと思っていました。

たしかに上記の方法でも Prettier は使えるのですが、厳密には Prettier と VSCode の Prettier 拡張機能は別物で、しかも Prettier 拡張機能の公式が推奨している使用方法ではありません。

当記事ではその辺りの整理をしつつ、 Prettier 拡張機能の公式ドキュメントで推奨されている使い方について記載しています。

ざっくり Q&A

とりあえず目を通しておくと、この先の話が理解しやすいかもしれないことを Q&A 形式でまとめました。

Question	Answer
Prettier is 何？	Prettier はコードフォーマッターです。
Prettier はどうやってインストールするの？	Prettier は npm や Yarn などのパッケージマネージャーでインストールします。
Prettier はどうやって実行するの？	Prettier は CLI や Git Hooks など様々な方法で実行することができます。
Prettier と VSCode の Prettier 拡張機能は違うものなの？	VSCode の Prettier 拡張機能には Prettier がバンドルされていますが、とりあえずここでは違うものとしておきます。
VSCode の Prettier 拡張機能は何をするものなの？	VSCode 上で Prettier を実行してくれるプラグインみたいなものです。
Prettier の設定はどうやってするの？	Prettier の設定は設定ファイル (`.prettierrc`) で行います。
VSCode の設定 (`settings.json`) に Prettier の項目があるけど？	それは VSCode の Prettier 拡張機能の設定です。

Prettier

それでは、さっそく Prettier の使い方について書いていきます。

いったん VSCode の Prettier 拡張機能のことは忘れましょう。

インストール

まずは、お好みのパッケージマネージャーで Prettier をインストールします。

# npm
npm install --save-dev prettier

# Yarn
yarn add prettier --dev

そう、 Prettier は npm パッケージとして提供されていて、 Node.js 上で実行されるものなのです！

ここでは、とあるプロジェクトにローカルインストールしていますが、グローバルインストールも可能です。

※ npm や Yarn についての詳細は、当記事では扱いません。

設定ファイル (.prettierrc)

次に Prettier の設定ファイルを作成します。

設定は様々な拡張子で書くことができますが、今回は package.json の次に優先度の高い「.prettierrc (拡張子無し)」で設定ファイルを作成しましょう。

ローカルインストールした場合は、プロジェクトルートに設定ファイルを配置します。

[project_root]/.prettierrc

ちなみに、 Prettier はフォーマットするファイルを起点にファイルツリーを遡って設定ファイルを検索するので、プロジェクトルートやユーザのホームディレクトリなど、任意の場所に設定ファイルを置いてスコープを管理することができます。

詳細な設定は Prettier 公式ドキュメントを参照するとして、例として僕が使用している Prettier の設定を JSON 形式で書いてみました。

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

prettier.io

フォーマット実行 (CLI)

設定ファイルを作成したら、 Prettier を実行してファイルをフォーマットしてみましょう。

Prettier には様々な実行方法がありますが、今回は CLI での実行例を示します。

まずは、フォーマット対象の JavaScript ファイル (dirty.js) を以下の内容で作成し、 Prettier をローカルインストールしたプロジェクト内に保存します。

function    hello  (  )
{
      console.log('Hello Prettier !!');
}

保存したらファイルを閉じて、 CLI で prettier コマンドを実行します。

npx prettier --write dirty.js

実行後、ファイルを再度開いてみましょう。

function hello() {
  console.log('Hello Prettier !!');
}

きれいにフォーマットされていたら、無事 Prettier は実行されています。

これで今日から (見た目だけは) きれいなコードを書くことができますね！

prettier コマンド

prettier [options] [file/dir/glob ...]

Options	Description
`--check`	フォーマット済みかどうかをチェックする
`--write`	フォーマットを実行して保存する

フォーマット対象はファイル単位の他に、ディレクトリ単位や glob (ワイルドカード) で複数のファイルをまとめて指定することが可能です。

まとめ

Prettier の基本的な使い方をまとめると、

Prettier をパッケージマネージャーでインストールする
設定ファイルを作る
CLI で prettier コマンドを実行してフォーマットする

となります。

思ったより単純でしたよね？

でも、例えば開発時を想定した時、エディタでコードを編集した後に毎回 prettier コマンドを実行するのってめちゃくちゃ面倒じゃないですか？

そんな怠惰 (誉め言葉) なエンジニアさんは、 VSCode で Prettier 拡張機能を使いましょう。

※ 他のエディタ (例えば Atom など) でも Prettier を自動実行する方法はありますが、今回は VSCode だけを取り上げます。

Visual Studio Code の Prettier 拡張機能

さて、記憶から抹消していた VSCode の Prettier 拡張機能について触れる時がやってきました。

何ができるのか

Prettier の使い方は説明してきた通りですが、 CLI でいちいちコマンドを実行するのは手間がかかるので、自動化できたら便利ですよね。

VSCode の Prettier 拡張機能は、まさに上記を体現したかのような拡張機能で、 VSCode 上で Prettier を自動で実行してくれるスーパー便利なやつなのです。

コードの保存時やペースト時に自動実行させたり、キーボードのショートカットで実行できたりと、実行方法も様々あります。

それでは Prettier 拡張機能を使用して、先程プロジェクトにローカルインストールした Prettier を実行してみましょう。

インストール

インストールは非常に簡単で、サイドバーの拡張機能から Prettier を検索して「インストール」ボタンをクリックするだけです。

Visual Studio Code - Prettier

設定 (settings.json)

VSCode の設定は、 GUI で行う方法と設定ファイル (settings.json) を直接編集する方法があり、どちらの方法でも行うことができます。

ただし、今回紹介するように言語単位で設定を行う場合は、設定ファイル (settings.json) を直接編集することになります。

今回はすべて設定ファイル (settings.json) で設定していきます。

既定のフォーマッター (Default Formatter)

VSCode には VSCode 標準フォーマッター (vscode.***-language-features) が付属しているため、既定のフォーマッターを Prettier (esbenp.prettier-vscode) に変更する必要があります。

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

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

Prettier がサポートする言語については、 Prettier 公式ドキュメントを確認してください。

prettier.io

保存時にフォーマット (Format On Save)

VSCode でファイルを保存した時に、フォーマットを行うかどうかを設定します。

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

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

貼り付け時にフォーマット (Format On Paste)

コードを貼り付ける際にフォーマットを行うかどうかを設定します。

// すべての言語で貼り付け時にフォーマットを行う
"editor.formatOnPaste": true,

// 言語単位で貼り付け時にフォーマットを行うか設定する
"[javascript]": {
  "editor.formatOnPaste": true
},

入力時にフォーマット (Format On Type)

コード入力時にフォーマットを行うかどうかを設定します。

// すべての言語でコード入力時にフォーマットを行う
"editor.formatOnType": true,

// 言語単位でコード入力時にフォーマットを行うか設定する
"[javascript]": {
  "editor.formatOnType": true
},

※ コード入力時というのは、一文字ずつ入力する度にフォーマットが実行されるのではなく、改行入力時や JavaScript であれば文末のセミコロン入力時にフォーマットが実行されます。入力した行単位でフォーマットが実行される感じです。

使い方

VSCode では、設定ファイル (settings.json) に基づき、既定のフォーマッターが設定されたタイミングで実行されます。

Prettier を既定のフォーマッターにし、任意のタイミングでフォーマットを行う設定にすることで、 Prettier の自動実行を実現させているというわけです。

例えば、保存時にフォーマットを行う設定にするだけで、ファイルを編集する度に Prettier を手動で実行する手間から完全に解放されるのです！

ためしに、先程作成した JavaScript ファイル (dirty.js) をもう一度開いて、インデントや半角スペースをぐちゃぐちゃにしてみましょう。

そして、おもむろに Ctrl + S で保存すると…

きれいにフォーマットされました！よね！？

VSCode ではキーボードショートカット (Shift + Alt + F) でフォーマットを実行することができるので、コードの入力中に好きなタイミングで Prettier を実行することもできます。

Prettier 拡張機能マジ便利！

これで今日から VSCode で (見た目だけは) きれいなコードを書きまくれるぞ！

まとめ

いやー、 VSCode の Prettier 拡張機能ってめちゃくちゃ便利ですねー。

それでは以上で Prettier 拡張機能の使い方を終わります…って、あれ？

「はじめに」でも書いた通り、何も分からずに使っていた頃はプロジェクトに Prettier なんてインストールしてないし、もちろん設定ファイル (.prettierrc) も作ってないし、 VSCode の Prettier 拡張機能をインストールして設定 (settings.json) をいじっただけでフォーマットできていたような？

そう、これが僕のような初心者が陥る罠なのですが、なんと VSCode の Prettier 拡張機能には Prettier 本体がバンドルされて (含まれて) いるのです！

つまり、 Prettier 拡張機能さえインストールしていれば、 VSCode では Prettier が使えるということなんです！

設定 (settings.json) に Prettier の細かい設定があるのも、そこで設定された内容で Prettier のフォーマットを実行するためなのです。

えー、じゃあ別に Prettier 本体をインストールする必要は無いし、設定ファイル (.prettierrc) も作らなくていいんじゃないの？と思ってしまいそうですが、 Prettier 拡張機能の公式ドキュメントにはプロジェクトのローカルにインストールされている Prettier と設定ファイルを使用することを推奨する旨がしっかり記載されています。

marketplace.visualstudio.com

これは当然といえば当然ですが、チームで開発する場合はパッケージのバージョンや設定を揃えないといけないですし、そもそも VSCode 以外のエディタを使っている人もいるかもしれないので、設定の統一が難しくなってしまいます。

Prettier 拡張機能にバンドルされている Prettier や VSCode の設定は、あくまでもフォールバック的な位置付けで、優先される設定もローカルの Prettier 設定ファイル (.prettierrc) が上位になっています。

ローカルに Prettier 設定ファイル (.prettierrc) が存在し、一つでも設定項目が書かれている場合、 VSCode の Prettier の設定はすべて適用されません。

Prettier 拡張機能は、ローカルにインストールされている Prettier を VSCode 上で実行するための補助機能として使うことをお勧めします。

おわりに

だいぶ長くなりましたが、これで Prettier について何となくは理解できたでしょうか。

「なんか知らんけどフォーマットはできている」状態から「Prettier 完全に理解した」レベルにはなれたんじゃないかと思います。

ただ、一般的に Prettier を使うプロジェクトの場合、リンターに ESLint を使用しているケースが大半で、僕も ESLint を併用していたりします。

Prettier と ESLint はフロントエンドではセットで使用するのがデファクトスタンダードになっており、これらの知識は必須と言えます。

セットで使用するのが当たり前と言いつつ、素直にそのまま併用すると問題が出たりするので、この辺りもフロントエンドがややこしいと言われる一端…は言い過ぎでしょうか…

ということで、 ESLint についてはまた別記事でまとめたいと思います。

最後までお読みいただき、ありがとうございました！

AI can fly !!

AI がやりたい Web エンジニアのアウトプット (AI の知識は無い)

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

はじめに

前提条件

動作環境

大事なことを最初に

ざっくり Q&A

Prettier

インストール

設定ファイル (.prettierrc)

フォーマット実行 (CLI)

prettier コマンド

まとめ

Visual Studio Code の Prettier 拡張機能

何ができるのか

インストール

設定 (settings.json)

既定のフォーマッター (Default Formatter)

保存時にフォーマット (Format On Save)

貼り付け時にフォーマット (Format On Paste)

入力時にフォーマット (Format On Type)

使い方

まとめ

おわりに