0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Visual Studio Codeのおすすめ設定(settings.json)

Last updated at Posted at 2025-12-14

拡張機能「Japanese Language Pack for Visual Studio Code」を適用した前提で説明します。

settings.jsonについて

Visual Studio Code(VSCode)の設定はGUIから行えます。
歯車マーク-> 設定
スクリーンショット 2025-12-14 11.49.23.png
他、メニューバーやショートカットキーでも開くことができます。

GUIで設定した内容のうち、デフォルトと差分がある項目はsettings.jsonというファイルに自動で書き込まれます。
設定画面の「設定(JSON)を開く」ボタンから確認できます。
スクリーンショット 2025-12-14 11.43.51.png

例えば、Editor: Font Sizeを14に変更します。
スクリーンショット 2025-12-14 11.47.11.png

settings.jsonには"editor.fontSize": 14として反映されます。
スクリーンショット 2025-12-14 11.47.20.png

便利な設定

以下、個人的におすすめだと思う設定です。

settings.json(コメントあり)
{
  // エディタ領域(コードを書く所)
  "editor.fontSize": 14, // フォントサイズを変更する。例では14px。
  "editor.guides.bracketPairs": true, // 垂直方向のブラケットペアに色を付ける。
  "editor.guides.bracketPairsHorizontal": true, // 水平方向のブラケットペアに色を付ける。
  "editor.renderLineHighlight": "all", // 現在の行をハイライトする。allはgutter(行番号)+line(内容)。
  "editor.scrollbar.vertical": "visible", // 垂直のスクロールバーを常に表示する。

  // エクスプローラ領域(プロジェクトのファイル一覧)
  "explorer.compactFolders": false, // ディレクトリツリーをまとめない。

  // ファイル保存時
  "files.insertFinalNewline": true, // 末尾に改行がない場合改行を挿入する。
  "files.trimTrailingWhitespace": true, // 末尾の空白を削除する。

  // テレメトリ
  "telemetry.telemetryLevel": "off", // クラッシュレポート、エラー、テレメトリ、使用状況データをすべてオフにする。

  // VSCodeの内蔵ターミナル
  "terminal.integrated.fontSize": 15, // フォントサイズを変更する。例では15px。
  "terminal.integrated.stickyScroll.enabled": false, // スティッキースクロール(引っ掛かりのスクロール)を無効にする。

  // ウィンドウ設定
  "window.restoreWindows": "none", // VSCodeアプリを初回起動したとき、前回表示していたプロジェクトを表示しない。

  // アクティビティバー
  "workbench.activityBar.location": "top", // Cursor風に上部にボタンを配置する。

  // タブ
  "workbench.editor.wrapTabs": true, // スクロール領域に隠さず、すべて表示する。

  // ファイル一覧
  "workbench.list.openMode": "doubleClick", // ダブルクリックで開く。

  // 新規ウィンドウ
  "workbench.startupEditor": "none", // 何も表示しない。

  // ファイル一覧のツリー表示
  "workbench.tree.enableStickyScroll": false, // スティッキースクロール(引っ掛かりのスクロール)を無効にする。
  "workbench.tree.indent": 16, // インデントサイズを変更する。例では16px。
  "workbench.tree.renderIndentGuides": "always" // インデントガイドを常に表示する。
}

setting.json(コメントなし)
{
  "editor.fontSize": 14,
  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "editor.renderLineHighlight": "all",
  "editor.scrollbar.vertical": "visible",
  "explorer.compactFolders": false,
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "telemetry.telemetryLevel": "off",
  "terminal.integrated.fontSize": 15,
  "terminal.integrated.stickyScroll.enabled": false,
  "window.restoreWindows": "none",
  "workbench.activityBar.location": "top",
  "workbench.editor.wrapTabs": true,
  "workbench.list.openMode": "doubleClick",
  "workbench.startupEditor": "none",
  "workbench.tree.enableStickyScroll": false,
  "workbench.tree.indent": 16,
  "workbench.tree.renderIndentGuides": "always"
}

適用方法

GUIの設定から1つずつ検索して適用します。例えば、検索欄でeditor.fontSizeを入力すれば、該当する設定項目がヒットします。
または、settings.jsonにそのままコピペする

特におすすめ

explorer.compactFolders

true(デフォルト)

スクリーンショット 2025-12-14 12.56.58.png

false

スクリーンショット 2025-12-14 12.57.01.png

workbench.editor.wrapTabs

false(デフォルト)

画像では1.txtから12.txtまでのファイル12個を開いていますが、10.txt以降はスクロール領域にタブが隠れています。
スクリーンショット 2025-12-14 13.05.31.png

true

10.txt以降もすべて表示されます。
スクリーンショット 2025-12-14 13.07.31.png

workbench.list.openMode

singleClick(デフォルト)

ファイルを編集していない場合、次に開いたファイルが同じタブで置換されてしまいます。

doubleClick

IntelliJ IDEAのようにダブルクリックで開くかつ、新規タブで開きます。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?