Prettierを使ってVSCodeでソースコードを自動整形する

はじめに

コードを書く際はVSCodeを基本的には使っているんだけど、インデント(隙間)がバラバラだったりセミコロンのつけ忘れだったりと、適当に書いてたら美しくないコードができあがってしまう。自分が気をつけてればいいだけじゃんって言われればそれまでだけど、どうせなら自動で綺麗にしてくれないかなーと思ってると、どうやら「Prettier」ってものを入れるとコードを保存した時に勝手に綺麗にしてくれるらしいので試してみた。

目次

1. Prettierとは
2. VSCodeへのPrettier導入方法
3. 主な設定内容
4. ユーザとワークスペース
5. 対応していない言語で使うとどうなるのか

1. Prettierとは

「はじめに」でも書いたんですが、Prettierはソースコードを整形してくれるものです。見た目を綺麗に整えてくれるといった方がわかりやすそうですね。こういうものを「コードフォーマッター」と呼ぶらしいです。
読み方は「プリティア」です。イントネーションはプリキュアと一緒です。
今回はVSCodeにPrettierを導入する方法について書きますが、例えばnpm installなどでプロジェクトに直接導入することもできるみたいです。チームで開発するとなると全員がVSCodeを使うとは限らないので、そっちの方がいいのかも、、、。方法についてはまた別記事で書きます。
Prettierが対応しているものは以下の画像の通りです。VsCodeの拡張機能の詳細のところから取ってきました。

公式サイトも見てみるとCommunity Pluginsという欄にも色々書かれていますね。このようにプラグインを入れればさらに多くの言語にも対応できそうです。VSCodeの拡張機能でプラグインを入れれるのかは勉強不足なのでわかりませんが、、、。

2. VSCodeへのPrettier導入方法

やり方は非常に簡単です。
まず、VSCode開いて拡張機能をインストールする画面にいきましょう。

検索のところで「prettier」と入力して「Prettier - Code formatter」をインストールします。最新バージョンを入れておけば問題ないはず。

これで完了と見せかけてまだ少しだけやることがあります。現状のままでは保存した瞬間にPrettierが自動で整形してくれるという設定にはなっていないので、それを設定しましょう。
「ctrl + ,」で設定を開いて、検索ボックスに「on save」と入力しましょう。

「Editor: Format On Save」というのがあるのでチェックボックスがあるのでチェックを入れると完了です。

3. 主な設定内容

どのようなルールでコード整形するかは設定から変更することができるので、代表的なものを書いておきます。

• Tab Width
  インデントを半角スペース何個分にするかの設定です。自分は2に設定するのがお気に入り。
  
  
  ※よく似たもので「Editor: Tab Size」というものがありますが、これはPrettierとは関係がありません。なので、Prettierがサポートしていないもの(.txt, .cなど)でtabを挿入した場合はこちらで設定したインデントが適用されます。
  
  

• Print Width
  1行に何文字まで入力できるかの設定です。この文字数を超えるようであれば改行してくれます。デフォルトが80なのでそのままにしてる人が多いようですが、最近のパソコンは画面サイズが大きいものが増えてきたので120にしている人もいるらしく、自分も120にしています。
  
  
  ※文字列などの改行できないものが設定した値よりも長い場合、それは改行されないようです。まあ当たり前っちゃ当たり前か。

• Single Quote
  ダブルクォーテーションをすべてシングルクォーテーションに変えてくれます。ダブルクォーテーションだとエラーになる箇所が多々あるため、この設定はONにしておいた方がよさそう。JSXとそれ以外とでわかれているけど、どっちもONにしておいていいと思います。ちなみにJSXはReactで使うやつで、Javascriptの中にhtmlを書けるようにしたやつです。
  
  

• Semi
  末尾にセミコロンをつけるかの設定です。デフォルトはオンになっています。個人的にはセミコロンがあった方が綺麗な感じがするのでオンのままでいいと思います。
  

• endOfLine
  改行の文字コードをどれにするかの設定です。以下の4種類があります。デフォルトはlfです。
  それぞれの文字コードの詳細についてはこの記事を参照してください。

  • auto(既存のものをそのまま保持)
  • lf (\n)
  • crlf (\r\n)
  • cr (\r)

  

4. ユーザとワークスペース

「3. 設定」では説明を省いていましたが、VSCodeの設定には「ユーザ」と「ワークスペース」の2種類があります。

どちらも設定する内容自体は変わらないのですが、影響範囲が異なります。
ユーザで設定した内容は、すべてのプロジェクトで共通となります。例えばsample1とsample2というプロジェクトがあった場合、どちらにもユーザで設定した内容が反映されます。個人で開発する分にはこっちで十分かなー。
一方、ワークスペースで設定した内容は、その設定したプロジェクト内のみで反映されます。ワークスペースで設定内容を変更すると.vscodeというフォルダがプロジェクトに追加され、そこのsettings.jsonに設定した内容が記されていきます。このとき、ユーザで設定した内容よりもワークスペースで設定した内容の方が優先されます。もちろん、設定内容は直接setting.jsonを編集することでも変更可能です。チーム開発を行なっている場合はこの.vscodeを全体で共有すれば人によってコードのフォーマットが統一できてよさそうですね。

まとめ

Prettierを使うことでコードを書く上で考えることが減りました。やっぱりエンジニアとしては自動化できるところは自動化して便利に開発を進めていきたいです！