開発ストレスを低減するVSCodeの設定

c0ad14e3-bb1c-4b37-a47d-b649e29e2c13-image_edit_gemini_img_n_83v_tHuJQrBQFuuejLI.png

こんにちは、さとです。

2024年に新卒入社、2025年からはエンジニアの部署に異動し、CDPの開発をしています。

本記事では、使い始めてから1年が経とうとしているVisual Studio Code（以降、VSCode）で、私が現在、実際に設定している内容を紹介します。

（なお、今回はあくまで「設定」の紹介で、拡張機能は対象外となります。）

設定の種類・方法
- 設定の種類
- 設定の編集方法
おすすめ設定の紹介
- 設定一覧
最後に

設定の種類・方法

具体的な設定の紹介に入る前に、主に初心者の方向けに、設定の種類と編集方法を説明します。

設定の種類

まず、VSCodeの設定には、「ユーザー設定」と「ワークスペース設定」の2種類があります。両者の違いは、適用範囲です。

ユーザー設定は、VSCodeで開いたすべてのインスタンスに適用されるのに対し、ワークスペース設定は、プロジェクトのルートに存在する「.vscode」フォルダ配下に保存され、該当のワークスペースを開いたときにのみ適用されます。後者は、プロジェクトのGitなどで管理・共有することで、開発メンバー間で、コーディングの一貫性を担保できます。

設定の編集方法

次に、設定の編集方法ですが、こちらも2つ方法があります。

1つ目は、settings.jsonに直接追加する方法です。以下のように、設定内容をカンマ区切りで記載することで、設定を適用することができます。設定したい内容とそのJSONでの記述方法が明確な場合は、こちらで追加いただくのがおすすめです。本記事の最後に、今回紹介している設定をJSON形式で記載していますので、取り入れたい設定があれば是非ご活用ください。

2つ目は、設定エディタからGUIで編集する方法です。設定エディタでデフォルト値から変更した設定が、前述のsettings.jsonに自動で記載される仕組みになっています。こちらは検索しながら探せるうえに、説明文も表示されるため、「設定を変えたい箇所があるが、詳細は見ながら吟味したい」場合に有用です。

なお、settings.jsonおよび設定エディタは、どちらもコマンドパレットで「>基本設定」と検索すれば開くことができます。

(JSON)なし：設定エディタ
(JSON)：setting.json

※設定エディタは、画面左下の「設定アイコン>設定」から開くことも可能です。

おすすめ設定の紹介

では、ここからは私がVSCodeで実際に設定している内容を紹介します。
量が多いので説明は最低限にしていますが、適宜キャプチャも貼っていますので、好みの設定を探してみてください。

設定一覧

"diffEditor.ignoreTrimWhitespace": false
- 内容：差分表示の際、先頭または末尾の空白文字の変更も表示する
- 所感：余計な空白も差分として見逃さないために、あえてオフにしています。
"editor.copyWithSyntaxHighlighting": false
- 内容：エディタでコードをコピーした際に、テキストのみをコピーする
- 所感：trueの場合、色・フォントスタイルなども含めてコピーされますが、個人的には色・フォントスタイルまで必要となる場面が少ないため、テキストのみがコピーされるように設定しています。
"editor.bracketPairColorization.enabled": true
- 内容：対応する括弧を色分けして表示
- 比較
  - false
  - true
- 所感：プログラムによっては多くの括弧が必要になるケースがあると思いますが、括弧が多いコードでも可読性が上がるのでおすすめです。
"editor.guides.bracketPairs": true
- 内容：括弧の対応関係（ガイド）を表示
- 比較
  - false
  - true
- 所感：3と同様
"editor.renderWhitespace": "all"
- 内容：空白文字を可視化する
- 比較
  - none
  - all
- 所感：必須ではないですが、空白の数が把握しやすく、個人的には邪魔にも感じないため採用しています。
"editor.minimap.maxColumn": 80
- 内容：ミニマップの最大表示列数を設定
- 所感：ミニマップを表示しない選択肢もありますが、個人的には見ているコードの大体の位置を把握できるのが少し嬉しいので、最低限残しつつ小さくすることで、コード本体の表示幅を増やしています。
"editor.minimap.showSlider": "always"
- 内容：ミニマップのスライダーを常に表示
- 所感：6と目的は同じですが、スライダーを常に表示しておくと、見ているコードのおおまかな位置が把握しやすいです。
"editor.wordWrap": "on"
- 内容：テキストをエディターの横幅で折り返して表示
- 所感：横に長いコードをひと目で見られる方が、スクロールするよりも楽なため採用しています。
editor.wrappingIndent": "indent"
- 内容：折り返しの行のインデントが元の行の一個下になる
- 所感：8との併用で読みやすくしています。
"editor.dragAndDrop": false
- 内容：ドラッグ&ドロップでコードを移動できなくする（デフォルトはtrue）
- 所感：個人的にはこの機能を有効に活用したことがなく、誤ってドラッグ&ドロップで移動してしまい元に戻すことが多いので、あえて機能をオフにしています。
"editor.showFoldingControls": "always"
- 内容：折りたたみコントロールを常に表示
- 比較
  - mouseover
  - always
- 所感：個人的には長いコードを修正する際、折りたたみをよく利用するのと、折りたたみ箇所を出しておくとコードの構造が把握しやすいため、常に表示するようにしています。
"explorer.confirmDelete": false
1. 内容：ファイルやフォルダの削除時、確認ダイアログを表示しない
2. 所感：ダイアログが出た方が安心感はありますが、変更が加わった際はソース管理タブで気付けるため、効率重視でオフにしています。
"explorer.confirmDragAndDrop": false
- 内容：ファイルをドラッグ＆ドロップで移動する際に確認ダイアログを表示しないようにする
- 所感：12と同様
"files.insertFinalNewline": true
- 内容：ファイルの保存時に末尾に改行を挿入
- 所感：14, 15, 16はプロジェクトメンバー共通で設定しておくことで、余計な差分が出なくなるのでおすすめです。
"files.trimFinalNewlines": true
- 内容：ファイルの保存時に末尾の余分な改行を削除
- 所感：14と同様
"files.trimTrailingWhitespace": true
- 内容：ファイルの保存時に行末の空白文字を削除
- 所感：14と同様
"scm.alwaysShowRepositories": true
- 内容：サイドバー（ソース管理）にリポジトリを常に表示
- 比較
  - false
  - true
- 所感：プログラムの変更をコミットする際、リポジトリが近くに見えるので、個人的に安心感があります。
"search.showLineNumbers": true
- 内容：検索結果に、行番号を表示する
- 比較
  - false
  - true
- 所感：デフォルトでも検索箇所の特定はしやすいのですが、行番号があると最初の当たりが若干つけやすいです。
"scm.defaultViewMode": "tree"
- 内容：変更ファイル一覧の表示をツリー表示にする
- 所感：デフォルトのリスト表示より、変更箇所が把握しやすいです。
"scm.diffDecorationsGutterWidth": 5
- 内容：差分の行数を表示するガターの幅を設定
- 比較
  - 3（デフォルト）
  - 5
- 所感：劇的変化はありませんが、差分がやや見やすくなります。
"terminal.integrated.cursorStyle": "line"
- 内容：ターミナルのカーソルの形状を「線」に変更
- 比較
  - block（デフォルト）
  - line
- 所感：自分がデフォルトのカーソルに馴染めなかったので、変更しました。
"terminal.integrated.cursorBlinking": true
- 内容：ターミナルのカーソルを点滅させる
- 所感：21との併用で、よくあるカーソルの形式に寄せています。
"workbench.editor.pinnedTabsOnSeparateRow": true
- 内容：ピン留めされたタブを、ピン留めされていないタブの上に表示
- 比較
  - false
  - true
- 所感：メインで見たい・編集したいファイルが確認作業で開いたタブに埋もれがちだったため、ピン留めして見失いにくくしています。
"workbench.tree.indent": 20
- 内容：ファイルのインデントの表示幅を変更
- 所感：デフォルト（8）よりも大きくすることで、ディレクトリを視認しやすくしています。
"workbench.view.alwaysShowHeaderActions": true
- 内容：サイドバーのヘッダーアクションを常に表示
- 比較
  - false
  - true
- 所感：初心者としては「どこで何ができるのか」は視認できた方が嬉しいので、採用しています。
"workbench.startupEditor": "none"
- 内容：VSCode起動時に、前のセッションを復元して表示する
- 所感：デフォルトだとwelcome pageが開かれるのに対し、前に作業していたものが開かれるため、手間が少なく済みます。
"workbench.editor.tabSizing": "fixed"
- 内容：エディタータブのサイズを制御する
- 比較
  - fit（デフォルト）
  - fixed
- 所感：ファイル名はデフォルトの方が見やすいですが、複数ファイルを一気に閉じる際に、×ボタンの位置がズレにくく、操作が安定します。