開発環境を魔改造する - VSCode編

キーマップ編もあります。

拡張機能

絶対入れたほうが良い拡張機能

• Blockman: インデントのブロックを視覚的にハイライトし、コードの範囲を把握しやすくします。
• Code Runner: 現在開いているファイルのコードを、ショートカットキー(ctrl+alt+N)などから素早く実行できるようにします。
• Code Spell Checker: コード内のコメントや変数名に含まれるスペルミス（主に英語）を検出し、波線で知らせます。
• Error Lens: コードのエラーや警告、その他のメッセージを、該当する行にインラインで直接表示します。
• Git Graph: リポジトリのGitブランチの履歴を、見やすいグラフ形式で表示・操作できるようにします。
• Git History: ファイルや行のGit履歴を詳細に確認できます。コミット間の差分表示も可能です。
• GitLens: コードの各行に、誰がいつ変更したかというGitの履歴情報（Blame）をインラインで表示します。
• indent-colorizer: インデントの深さに応じて異なる色を付け、コードの構造を視覚的に把握しやすくします。
• Path Intellisense: コード内でファイルパスを入力する際に、自動で補完候補を表示します。
• Trailing Spaces: ファイル末尾や行末の不要な空白（スペース）をハイライトします。
• Vim: 少し使い方を覚えるだけで生産性が爆上がりします。非常におすすめです。

Vimの操作方法はVim幼稚園からVim小学校へという記事が非常に参考になります。

VSCodeのショートカットキーがVimに吸われてしまうので、以下の設定を追記しておくことをおすすめします。これにより、Ctrl+CやCtrl+FなどといったVSCodeのショートカットがVimに上書きされず、そのまま使えるようになります。

settings.json

  "vim.handleKeys": {
    "<C-c>": false,
    "<C-f>": false,
    "<C-h>": false,
    "<C-n>": false,
    "<C-w>": false,
    "<C-p>": false,
    "<C-b>": false,
    "<C-a>": false,
    "<C-x>": false,
    "<C-j>": false
  },

お好みで入れると良い拡張機能

• Discord Presence: VSCodeで現在作業中のファイル名などを、Discordのステータスに表示します。
• Material Icon Theme: エクスプローラーのアイコンを、ファイルの種類に応じて分かりやすいアイコンに変更します。

Markdownを使う人はこちらも

• Markdown All in One: Markdownのための総合支援機能。ショートカットキーでの装飾、目次の自動生成、プレビュー機能などを提供します。
• markdownlint: Markdownファイルの内容がルールに従っているかをチェックし、問題を指摘します。

JavaScript, TypeScriptを使う人はこちらも

• CodeMetrics: JavaScript/TypeScriptコードの循環的複雑度を計算し、エディタ上に表示します。
• Pretty TypeScript Errors: TypeScriptの型エラーメッセージを、より読みやすく整形して表示します。

設定

絶対に設定したほうが良い項目

settings.json

"files.autoSave": "afterDelay",

ファイル編集後、一定時間が経過すると自動的に保存します。

settings.json

"files.eol": "\n",

ファイルの改行コードをLF(Linux/macOS形式)に統一します。

settings.json

"files.insertFinalNewline": true,

ファイルを保存する際に、ファイルの最終行に必ず改行を1行挿入します。

Gitの差分表示が綺麗になります。

参考: なぜファイルの末尾に改行を入れたほうが良いのか

settings.json

"files.trimFinalNewlines": true,

ファイルを保存する際に、ファイルの末尾にある余計な改行を削除します。

settings.json

"terminal.integrated.scrollback": 100000,

ターミナルのスクロールバック（保持する出力の行数）を10万行に増やします。

settings.json

"window.newWindowDimensions": "maximized",

VSCodeを新しいウィンドウで開く際に、常に最大化された状態で起動します。

お好みで設定すると良い項目

settings.json

"workbench.colorTheme": "Default Light Modern",

VSCodeの配色テーマを「Default Light Modern」に設定します。すごくおすすめです。

なぜライトテーマの人気があまり無いのか、いつも不思議に思っています。

settings.json

"workbench.colorCustomizations": {
  "editor.lineHighlightBackground": "#1073cf2d",
  "editor.lineHighlightBorder": "#9fced11f",
  "terminal.background": "#FDF6E3",
  "terminal.foreground": "#586E75",
  "terminalCursor.background": "#586E75",
  "terminalCursor.foreground": "#586E75",
  "terminal.ansiBlack": "#161614",
  "terminal.ansiBlue": "#8CE5A1",
  "terminal.ansiBrightBlack": "#839496",
  "terminal.ansiBrightBlue": "#268BD2",
  "terminal.ansiBrightCyan": "#2AA198",
  "terminal.ansiBrightGreen": "#00d400",
  "terminal.ansiBrightMagenta": "#6C71C4",
  "terminal.ansiBrightRed": "#DC322F",
  "terminal.ansiBrightWhite": "#002B36",
  "terminal.ansiBrightYellow": "#B58900",
  "terminal.ansiCyan": "#2AA198",
  "terminal.ansiGreen": "#84cf0c",
  "terminal.ansiMagenta": "#6C71C4",
  "terminal.ansiRed": "#DC322F",
  "terminal.ansiWhite": "#586E75",
  "terminal.ansiYellow": "#B58900"
}

エディタの現在の行ハイライトの色や、ターミナルの配色を設定します。

この設定におけるターミナルの配色はSolarized Lightを背景色に、Sonosan Sunriseを文字色にしました。

配色はWindows Terminal Themesこのページを参考にするのがおすすめです。ターミナルの出力を参考に見比べられるのが非常に良いです。

settings.json

"workbench.panel.showLabels": false,

ターミナルやデバッグコンソールなど、パネルのタブからテキスト（「ターミナル」などの文字）を非表示にし、アイコンのみの表示にします。