【VSCode】コードの自動整形（Formatter）

vscodeでコードの自動整形を行うには、formatterの拡張機能をインストールして、ちょちょいと設定を書くだけでいい。

拡張機能のインストール

formatterによって対応している言語に限りがあるので、言語名 formatterでググって、整形したいコードの言語に対応したformatterを探す。

例えば、html, css, jsとかであればPrettierというformatterがある。

これはvscodeの拡張機能用にもリリースされているので、vscodeの拡張機能検索欄にprettierと入力して一番上に出てくる「Prettier - Code formatter」をインストールする。

あるいはcmd + Pを押して出てくる窓にext install esbenp.prettier-vscodeと入力してretuenを押すことでもインストールできる。

以下でも引き続きPrettierを例に話を続けるが、他のformatterを使う場合でも勝手は同じ。

設定ファイル

vscodeでcmd + ,を押して（表示される設定UIの右上にあるアイコンをクリックして）設定ファイルsettings.jsonを表示する。

そこの一番外側の{ }の中に（既に何か書いてあれば最終行の行末にカンマ,を置いてからその後に）下記のコードを追加する。

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,

1行目でさっきインストールしたPrettierをデフォルトのformatterとして使用するように設定している。

2〜4行目では自動整形するタイミングを指定している：

editor.formatOnPaste: コードをペースト（cmd + V）したタイミングで自動整形
editor.formatOnSave: ファイルを保存（cmd + S）したタイミングで自動整形
editor.formatOnType: いまいちわからん

上の3つがfalseでも、option + shift + Fを押せばそのタイミングで整形してくれる。

また、cmd + shift + Pで表示される窓で検索すれば出てくるFormat Documentをクリックしてもいい。

コードの言語ごとに異なる設定

上のサンプルの設定ではグローバルにformatterを設定している。

例えば、htmlだけPrettierで整形するには次のように書けばいい。

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

また、cssのみ整形をしないようにするには次のように書く。

  "[css]": {
    "editor.defaultFormatter": null
  }

cssのみ整形は手動でのみ行い、自動ではしてほしくないときは以下のようにすればよい。

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[css]": {
     "editor.formatOnPaste": false,
     "editor.formatOnSave": false,
     "editor.formatOnType": false
  }

あとは応用で。

言語別formatter

html, css, javascript, markdown, yml

上記の通りPrettierを使えばよし。

jsonやscssとかにも対応している。

※markdownの整形はgmなので無効にしておいた方がいい。

  "[markdown]": {
    "editor.defaultFormatter": null
  },

"prettier.disableLanguages"はもう使えなくなったらしい（あるいは非推奨か）。

Liquid

JekyllとかでLiquidの記述を含むhtmlとかのコードを整形したい場合は、sissel.shopify-liquidというformatterを使えばよい。

拡張機能「Liquid」をインストールすると使える。

  "[html]": {
    "editor.defaultFormatter": "sissel.shopify-liquid"
  },

なんかバグだと思うけど、効かないときがある。

いろいろ試してみた結果、settings.jsonに変更を加えた後、開いたままにしてたhtmlファイルとかで整形しようとしてもうまくいかないっぽい。 cmd + shift + Lのキーバインドの方では整形できるけど、cmd + Sなどのトリガーでは反応しない。

整形するhtmlファイルとかを一旦開き直すと（別タブのファイルに切り替えて戻すなど？）、また効くようになる。意味がわからないけど。

Prettierだとliquidタグのところをうまく整形してくれないので、整形したいならこれを使うしかないがどうにも頼りない。

↓バージョン

# vscode
バージョン: 1.61.1
コミット: c13f1abb110fc756f9b3a6f16670df9cd9d4cf63
日付: 2021-10-14T01:23:30.274Z
Electron: 13.5.1
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 20.6.0

# Liquid（拡張機能）
v2.3.0
Released on
2019/1/5 5:53:45
Last updated
2020/3/28 14:57:05
Identifier
sissel.shopify-liquid

liquidもう開発止まってるやん...