😶

特定言語に依存しない Visual Studio Code の設定と拡張機能を晒す

4 min read

はじめに

せっかく VS Code を愛用しているので設定と拡張機能を紹介していこうと思います。
現在も試行錯誤中なのでもっといい設定や拡張機能があるかもしれません。
が、いったんこんなもんでいいだろくらいになりました。
特定言語で開発を進めるときの設定と拡張機能はまた別の機会にまとめる予定です。

環境

  • Visual Studio Code
    • Version: 1.54.3
  • macOS
    • Big Sur バージョン 11.2.3

設定

設定ファイルを以下に載せておくのでお好きな設定があれば取り入れてみてください。
一応コメントで一言解説みたいなものも載せていますが本当にざっくりです。

settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // デフォルトのフォーマッターを指定
  "editor.formatOnSave": true, // 保存時に自動整形
  "editor.renderControlCharacters": true, // 制御文字を表示
  "editor.renderLineHighlight": "all", // 選択行をハイライト
  "editor.renderWhitespace": "all", // 空白文字を可視化
  "editor.wordWrap": "on", // テキストを折り返す
  "editor.minimap.renderCharacters": false, // ミニマップにブロックを表示
  "editor.minimap.showSlider": "always", // ミニマップのスライダーを表示
  "explorer.confirmDelete": false, // ファイル削除時に確認しない
  "diffEditor.renderSideBySide": false, // 差分を行内に表示
  "files.insertFinalNewline": true, // ファイルの最後に空行を挿入
  "files.trimFinalNewlines": true, // ファイルの最後の空行を削除
  "files.trimTrailingWhitespace": true, // 行末の空白文字を削除
  "[markdown]": {
    "files.trimTrailingWhitespace": false // Markdown の場合のみ行末の空白文字を削除しない
  },
  "window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウィンドウで表示
  "window.title": "${activeEditorMedium}${separator}${rootName}", // ウィンドウタイトルに表示される文字列
  "workbench.colorTheme": "Solarized Dark", // カラーテーマ
  "workbench.iconTheme": "vscode-icons", // アイコンテーマ
  "workbench.startupEditor": "none", // 起動時のウェルカムタブを表示しない
  "workbench.editor.labelFormat": "short", // ラベルに親フォルダを表示
  "workbench.editor.tabSizing": "shrink" // タブを小さく表示
}

拡張機能

今回紹介する拡張機能は以下です。
特定言語に依存しないものに絞っています。
ここでも設定ファイルのときと同様本当にざっくりした説明を記載しています。
拡張ファイル名がリンクになっているので気になった拡張機能があったら飛んでみてください。

Bracket Pair Colorizer

括弧の対応関係がわかりやすく色付けしてくれます。

Code Spell Checker

スペルミスをエディタ上にわかりやすく表示してくれます。

Duplicate action

ファイルの複製が簡単にできるようになります。

Git Graph

Git にまつわるあれこれをグラフィカルに表示できるようになります。

Git History

Git の履歴をわかりやすく表示できるようになります。

GitLens — Git supercharged

Git にまつわるあれこれをエディタ上で操作できるようになります。

indent-rainbow

インデントの量がわかりやすく表示されます。

Json Editor

JSON ファイルを記述しやすくなる機能が使えるようになります。

Log File Highlighter

ログファイルがわかりやすく色付けされます。

Output Colorizer

標準出力がわかりやすく色付けされます。

Partial Diff

選択した箇所で差分をとることができます。

Path Autocomplete

パスの入力を保持してくれます。

Prettier - Code formatter

コードをフォーマットしてくれます。

Rainbow CSV

CSV をわかりやすく色付けしてくれます。

Regex Previewer

正規表現をプレビューできます。

TODO Highlight

TODO:とかFIXME:とかを目立たせてくれます。

vscode-icons

ファイルがアイコン付きで表示されるようになります。

おわりに

より便利な機能や拡張機能があったら随時更新する予定です。