VSCodeの設定を見直す

ここ数年ほど増改築を繰り返しながらポリシーなく育ってきてしまっていた手元の環境を見直したい！ということで、まずはエディタから見直すことに。いったんVSCodeの設定ファイルをぜんぶ消してみて、必要な設定を戻したり、べつに設定しなくてもいいものはそのままにしたり。とりあえず以下のようになった。

{
  "editor.defaultFormatter": "svipas.prettier-plus",
  "editor.detectIndentation": false,
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.associations": {
    "*.html.erb": "erb",
    "*.uiflow": "uiflow"
  },
  "files.autoSave": "onWindowChange",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "security.workspace.trust.untrustedFiles": "open",
  "vscode-erb-beautify.keepBlankLines": 1,
  "workbench.colorTheme": "Iceberg",
  "workbench.editor.untitled.hint": "hidden",
  "workbench.startupEditor": "newUntitledFile",
  // Hide hover documentation and references
  "css.hover.documentation": false,
  "css.hover.references": false,
  "html.hover.documentation": false,
  "html.hover.references": false,
  "scss.hover.documentation": false,
  "scss.hover.references": false,
  // Language specific settings
  "[erb]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
  },
  "[html]": {
    "editor.formatOnSave": false
  },
  "[markdown]": {
    "editor.formatOnSave": false,
    "files.trimTrailingWhitespace": false
  }
}

知らないあいだにGitHubアカウントでログインしたら別のマシンと設定を同期できる機能がついていてべんり。ずっと前からあったのかな…。あわせて拡張機能もdeprecatedなものは削除するなど整理した。

工夫ポイント

UIをデザインするときに、 UI flows と呼ばれる、ユーザーが「見るもの」と「すること」を整理した図を書く機会があって、この図をテキストデータで書けるVSCodeのプラグインが便利すぎる。つくってくれた人、ありがとう。テキストデータなのでGitで管理できるし。とくに拡張子など決まりはないのだけど、 *.uiflow ってテキストファイルを開いたときはこのプラグインが有効になるように設定してます。

あとは地味だけどHTML要素やCSSのプロパティにマウスカーソルを重ねるとMDNのリファレンスが表示されるやつは知ってるよ！ってことで非表示にしたり、Markdownのときは改行を意味する行末の半角スペースを削除しないようにしたり。ここからまた育てていくぞ！