はじめに
Visual Studio Code（以下、VSCode）で設定した内容について、書き残していきます。
普段はサクラエディタを使っていて、開発環境はVSCodeを使っているので、VSCodeは初心者です。
私は、サクラエディタでは、ウィンドウを縦横4分割して使う場合が多いです。ファイル内の他のコードを参照しながら実装することが多いからです。
過去にVSCodeに移行しようとしたとき、ウィンドウ分割、解除、アクティブウィンドウの移動あたりのキーバインドが分からずに挫折したことがあります（笑）。今回は絶対に移行します！
この記事は、完全に自分用のメモになりそうです。でも、他の人の設定って気になりますよね、全部公開します（笑）。
この記事は随時更新する予定です！
- はじめに
- 参考文献
- 設定ファイルの場所
- 設定ファイルの内容（settings.json）
- フォント
- 拡張機能
- VSCodeの便利と思った機能
- 実行、デバッグ時の設定ファイル
- 未解決な問題（解決済み含む）
- キーボードショートカット（キーバインド）
- おわりに
参考文献
設定ファイルの場所
Windowsの場合の設定ファイルの場所：%APPDATA%\Code\User\settings.json
Linuxの場合の設定ファイルの場所：$HOME/.config/Code/User/settings.json
%APPDATA%は、通常、C:\Users\xxx\AppData\Roamingとなっています- VSCode は、インストール直後の状態では、
settings.jsonが作られていない - VSCode には、規定の設定があり、変更した内容が
settings.jsonに追記される - キーボードショートカット（キーバインド）の設定ファイル
keybindings.jsonも同じ場所に作られる
設定ファイルの内容（settings.json）
Auto Guess Encoding：ファイルを開いたときに文字コードを推測して開く
- デフォルトは無効なので、チェックを入れて有効にする
Trim Auto Whitespace：自動挿入された末尾の空白を削除
- デフォルト有効 → 無効に変更
フォント
- MSゴシックの14px or 16pxを指定する
拡張機能
日本語化
- 拡張機能から
japaneseと入力して「Japanese Language Pack for Visual Studio Code」をインストールする - コマンドパレット（Ctrl+Shift+p）：「Configure Display Language」で日本語を選択する
- 拡張機能から
code-eol：改行コードを表示する機能
- settings.json の "code-eol.color" を "#555" に設定する
Zenkaku：全角空白を表示する機能
- コマンドパレット（Ctrl+Shift+p）：「Enable Zenkaku」で有効化する
PlantUML：テキストでUMLの図を書く機能
- PlantUMLで図のテキストを書いたら、コマンドパレット（Ctrl+Shift+p）で、「PlantUML: Preview CurrentDiagram」でプレビューが見れる
VSCodeの便利と思った機能
- HTML/CSSファイルの整形機能：対象のHTML/CSSファイルを開いて、右クリック→ドキュメントのフォーマット
- カラーコードの可視化：CSSファイルを開くと、カラーコードの前に、その色が表示され、マウスをかざすとカラーを変更できる（下図）
実行、デバッグ時の設定ファイル
実行、デバッグ時の設定ファイルとしては、launch.json がメインの設定ファイルになります。
VSCode で、左のサイドバーのデバッグアイコンをクリックして、「launch.json ファイルを作成します」をクリックすると、launch.json が作成されると思います。
先頭に "version" が書かれていて、次に、"configurations" が書かれています。この "configurations" の値である [] に、設定（{}）を書いていきます。この {} が1つの単位で、いくつも書くことができます。ここでは、どんな設定をしたら、どういう効果があるのかを、各言語で共通なもの、それぞれの言語で固有なものを書いていきます。
公式サイトの説明は以下になります。
launch.json
以下は必須と書かれています。
- "name"：デバッグ起動の構成のドロップダウンに表示される任意の名前を指定します
- "type"：Pythonの場合は "python" を指定し、C++の場合は "cppdbg" を指定します
- "request"："launch" と "attach" が指定できて、"launch" はVSCodeで起動してデバッグする方法で、"attach" は既に起動済みのプロセスに対してデバッグする方法です
以降はオプションです。
- "program"：デバッグの対象となる実行ファイルのパスを指定します
- "cwd"：作業ディレクトリを指定します
- "args"：実行ファイルに渡すコマンドライン引数を指定します（
[]で複数記述します） - "stopOnEntry"：trueを指定するとデバッグ開始時にすぐに停止します
- "env"：環境変数を設定します
- "preLaunchTask"：デバッグ開始前に起動するタスク（tasks.jsonで定義したタスク）を指定します
- "postDebugTask"：デバッグ終了時に起動するタスク（tasks.jsonで定義したタスク）を指定します
tasks.json
- "label"：識別するための任意の名前（ラベル）を指定します
- "type"：タスクのタイプで、"shell"（シェルコマンドとして解釈される）か "process"（実行するプロセスと解釈される）を指定します
- "command"：実行するコマンドを指定します
- "group"：タスクが所属するグループを指定します
- "kind"：ビルドタスクの場合は "build" を指定します
- "isDefault"：ビルドタスクの場合は "true" を指定します
- "problemMatcher"：VSCodeの"問題"を探すプログラムを指定します（ちゃんとした説明が見つかりませんでした）
Pythonの記載例
{
"version": "0.2.0",
"configurations": [
{
"name": "Python デバッガー: 現在のファイル",
"type": "debugpy",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
"args": [
"aaa",
]
}
]
}
C/C++の記述例
C/C++ の場合、launch.json（必要に応じて tasks.json）に設定は、VSCode に自動で追加してもらう方法が楽かもしれません。F1キーを押して、C/C++ と入力すると、C/C++: デバッグ構成の追加 が見えると思うので、クリックします。
自動で追加された内容に、必要に応じて、設定を追加します。
例えば、-D DEBUG というコンパイルオプションを追加したい場合、tasks.json の "args" に、"-D DEBUG", という1行を追加すればよいです。MAPファイルを出力したい場合は、"-Wl,-Map=xxx.map", と追加すればいいですし、スタティックリンクしたいなら、"-static", を追加すればよいです。
tasks.json の記載例です。
{
"tasks": [
{
"type": "cppbuild",
"label": "C/C++: gcc build active file",
"command": "/usr/bin/gcc",
"args": [
"-fdiagnostics-color=always",
"-g",
"-static",
"-Wl,-Map=execve.map",
"${file}",
"-o",
"${fileDirname}/${fileBasenameNoExtension}"
],
"options": {
"cwd": "${fileDirname}"
},
"problemMatcher": [
"$gcc"
],
"group": {
"kind": "build",
"isDefault": true
},
"detail": "Task generated by Debugger."
}
],
"version": "2.0.0"
}
続いて、launch.json の記載例です。
{
"version": "0.2.0",
"configurations": [
{
"name": "C/C++: gcc build and debug active file",
"type": "cppdbg",
"request": "launch",
"program": "${workspaceFolder}/a.out",
"args": [],
"stopAtEntry": false,
"stopAtConnect": true,
"cwd": "${workspaceFolder}",
"environment": [],
"externalConsole": false,
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
},
{
"description": "Set Disassembly Flavor to Intel",
"text": "-gdb-set disassembly-flavor intel",
"ignoreFailures": true
}
],
"preLaunchTask": "C/C++: gcc build active file",
"miDebuggerPath": "/usr/bin/gdb"
},
]
}
C言語のデバッグの開始方法
対象の Cソースコードを VSCode でアクティブにしておき、F1 を押して、C/C++ と入力すると、C/C++: デバッグ構成の追加 が見えると思うので、クリックします。
すると、自動で、現在アクティブな Cソースコードをデバッグできるように、VSCode が自動で launch.json と、tasks.json を設定してくれます。C言語のデバッグのときは、これが一番楽なので、あとは必要に応じて、設定を追加する方法がいいと思います。
通常の C言語のソースコードをデバッグする場合、main関数（エントリポイント）で停止させたい場合、launch.json の stopAtEntry を true にすると思います。これだと、スタートアップルーチンをデバッグすることが出来ません。スタートアップルーチンの先頭で停止させたい場合は、launch.json の stopAtConnect を true に設定します。前述の自動追加では設定が追加されないので、自分で追加することになります（なぜか、停止してくれないこともあります）。
管理者権限（root）でデバッグしたい場合は、"miDebuggerPath": "${workspaceFolder}/gdb_root.sh", として、ワークスペースのトップディレクトリに、以下の gdb_root.sh を置きます（gdb_root.sh に、実行権限を付与すること）。
#!/bin/sh sudo /usr/bin/gdb "$@"
逆アセンブリのウィンドウを表示するには、Cソースコードのウィンドウを右クリックして、「逆アセンブリビューを開く」をクリックします。
ちなみに、アセンブラのコードを、アセンブルして、VSCode でデバッグすることは、情報を探してみたのですが、見つかりませんでした。現状は出来ないのかもしれません。
未解決な問題（解決済み含む）
ウィンドウ分割時のアクティブウィンドウの変更（分割ウィンドウの移動）
- Ctrl+1、Ctrl+2、Ctrl+3で移動できました
- 左側のサイドバー（プライマリ）の開閉トグルは、デフォルト Ctrl+B（キーがかぶってるので、Ctrl+Shift+Bに変更）
キーボードの押し間違いで、VSCode の全体のフォントが大きくなってしまうことがある
- 調べて分かったことは、
Ctrlキーを押しながら、+キーを押すと、全体のフォントが大きくなる - 解決方法としては、
Ctrlキーを押しながら、-キーを押して、全体のフォントを小さくする
- 調べて分かったことは、
キーボードショートカット（キーバインド）
設定した内容は、と同じディレクトリに keybindings.json として保存されます。
設定した内容を貼り付けます。
"command"で、"-"が付いているのは、そのキーに、もともと割り当てられていた機能を削除したという意味です。
// 既定値を上書きするには、このファイル内にキー バインドを挿入しますauto[] [ { "command": "workbench.action.showAllSymbols", "key": "ctrl+alt+t" }, { "command": "-workbench.action.showAllSymbols", "key": "ctrl+t" }, { "command": "actions.find", // 検索 "key": "ctrl+t" }, { "command": "-actions.find", "key": "ctrl+f" }, { "command": "cursorRight", // カーソルを右に移動 "key": "ctrl+f", "when": "textInputFocus" }, { "key": "ctrl+shift+b", "command": "workbench.action.toggleSidebarVisibility" } { "command": "-workbench.action.toggleSidebarVisibility", "key": "ctrl+b" }, { "command": "cursorLeft", // カーソルを左に移動 "key": "ctrl+b", "when": "textInputFocus" }, { "command": "-workbench.action.quickOpen", // カーソルを上に移動 "key": "ctrl+p" }, { "command": "cursorUp", // カーソルを上に移動 "key": "ctrl+p", "when": "textInputFocus" }, { "command": "-workbench.action.showCommands", "key": "ctrl+shift+p" }, { "command": "scrollLineUp", // 画面を上に移動 "key": "ctrl+shift+p", "when": "textInputFocus" }, { "command": "-workbench.action.files.newUntitledFile", "key": "ctrl+n" }, { "command": "cursorDown", // カーソルを下に移動 "key": "ctrl+n", "when": "textInputFocus" }, { "command": "-workbench.action.newWindow", "key": "ctrl+shift+n" }, { "command": "scrollLineDown", // 画面を下に移動 "key": "ctrl+shift+n", "when": "textInputFocus" }, { "command": "-editor.action.selectAll", "key": "ctrl+a" }, { "command": "cursorHome", // カーソルを行頭に移動 "key": "ctrl+a", "when": "textInputFocus" }, { "command": "-workbench.action.quickOpen", "key": "ctrl+e" }, { "command": "cursorEnd", // カーソルを行末に移動 "key": "ctrl+e", "when": "textInputFocus" }, { "command": "-cursorUndo", "key": "ctrl+u", "when": "textInputFocus" }, { "command": "cursorPageUp", // カーソルを1ページ上に移動 "key": "ctrl+u", "when": "textInputFocus" }, { "command": "-editor.action.toggleTabFocusMode", "key": "ctrl+m" }, { "command": "cursorPageDown", // カーソルを1ページ下に移動 "key": "ctrl+m", "when": "textInputFocus" }, { "command": "-editor.action.outdentLines", "key": "ctrl+oem_4", "when": "editorTextFocus && !editorReadonly" }, { "command": "cursorTop", // カーソルをファイル先頭に移動 "key": "ctrl+oem_4", "when": "textInputFocus" }, { "command": "-editor.action.indentLines", "key": "ctrl+oem_6", "when": "editorTextFocus && !editorReadonly" }, { "command": "cursorBottom", // カーソルをファイル末尾に移動 "key": "ctrl+oem_6", "when": "textInputFocus" }, { "command": "editor.action.selectAll", // すべて選択 "key": "ctrl+oem_7" }, { "command": "-workbench.action.terminal.toggleTerminal", "key": "ctrl+oem_3" }, { "command": "cursorDownSelect", // 1行下を選択 "key": "ctrl+oem_3", "when": "textInputFocus" }, { "command": "cursorUpSelect", // 1行上を選択 "key": "ctrl+i", "when": "textInputFocus" }, { "command": "cursorRightSelect", // 右を選択 "key": "ctrl+k", "when": "textInputFocus" }, { "command": "-workbench.action.togglePanel", "key": "ctrl+j" }, { "command": "cursorLeftSelect", // 左を選択 "key": "ctrl+j", "when": "textInputFocus" }, { "command": "-editor.action.addSelectionToNextFindMatch", "key": "ctrl+d", "when": "editorFocus" }, { "command": "deleteRight", // 右を削除 "key": "ctrl+d", "when": "textInputFocus" }, { "command": "-expandLineSelection", "key": "ctrl+l", "when": "textInputFocus" }, { "command": "editor.action.deleteLines", // 現在の行を削除 "key": "ctrl+l", "when": "textInputFocus && !editorReadonly" }, { "command": "-editor.action.deleteLines", "key": "ctrl+shift+k", "when": "textInputFocus && !editorReadonly" }, { "command": "-workbench.action.splitEditor", "key": "ctrl+oem_5" }, { "command": "editor.action.fontZoomReset", // フォントサイズのリセット "key": "ctrl+oem_5" }, { "command": "editor.debug.action.toggleBreakpoint", // ブレークポイントのトグル "key": "shift+f9", "when": "editorTextFocus" }, { "command": "-editor.debug.action.toggleBreakpoint", "key": "f9", "when": "editorTextFocus" }, { "command": "workbench.action.splitEditorDown", // 画面分割 (下) → ブレークポイント(F9)は Shift + F9 に移動 "key": "f9" }, { "command": "workbench.action.splitEditorRight", // 画面分割 (右) "key": "ctrl+f9" } ]
おわりに
まずは、初期設定が終わったという程度ですが、参考文献の本を読みながら、少しずつカスタマイズしていこうと思います。
今回は以上です！
最後までお読みいただき、ありがとうございました。
