Visual Studio Code（VSCode）の設定
概要
- 長年 Sublime Text を使い続けてきたが、先日とうとう困ったことが起きて VSCode を使わざるをえない状況がやってきた。
- ショートカットキーの再学習などはしたくないので、なるべく過去に Sublime Text で施してきた設定を VSCode にも反映させる。
参考リンク
- Visual Studio Code Key Bindings
- when clause contexts | Visual Studio Code Extension API
- Visual Studio Code 等のアプリで command + [ (open bracket) がmacOSに吸われるニッチなバグの解決 – 学習する天然ニューラルネット
拡張機能（Extenstions）
以下をインストールした。
UI全般
- Ayu – Visual Studio Marketplace
- テーマ
- Japanese Language Pack for Visual Studio Code – Visual Studio Marketplace
- VSCodeの日本語化
機能の導入
- EditorConfig for VS Code – Visual Studio Marketplace
- GitHub Copilot – Visual Studio Marketplace
- Github Copilot を利用する
- Codex – OpenAI’s coding agent – Visual Studio Marketplace
- ChatGPT との連携
言語・技術ごとの機能強化
- Git
- Docker
- Docker – Visual Studio Marketplace
- Container Tools – Visual Studio Marketplace
- 「Docker」を落とすと勝手についてくるっぽい
- その他
設定（Settings）
settings.json にて以下を設定した。
カラーテーマ
拡張機能でインストールした「Ayu」の Mirage Bordered を設定
// Specifies the color theme used in the workbench.
"workbench.colorTheme": "Ayu Mirage Bordered",エディタ関連
フォントサイズを18に設定
// Controls the font size in pixels.
"editor.fontSize": 18,インデントの自動判定をOFFにし、タブサイズを2で設定
// Controls whether `editor.tabSize#` and `#editor.insertSpaces` will be automatically detected when a file is opened based on the file contents.
"editor.detectIndentation": false,
// The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
"editor.tabSize": 2,空白文字をすべて可視化
// Controls how the editor should render whitespace characters.
// - none
// - boundary: Render whitespace characters except for single spaces between words.
// - selection: Render whitespace characters only on selected text.
// - trailing: Render only trailing whitespace characters.
// - all
"editor.renderWhitespace": "all",区切り文字を設定
// Characters that will be used as word separators when doing word related navigations or operations.
"editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~? 、。「」【】『』（）！？てにをはがのともへでや：・",ファイル関連
改行コードをLFに指定
// The default end of line character.
// - \n: LF
// - \r\n: CRLF
// - auto: Uses operating system specific end of line character.
"files.eol": "\n",オートセーブ有効化&秒数指定
// Controls [auto save](https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save) of editors that have unsaved changes.
// - off: An editor with changes is never automatically saved.
// - afterDelay: An editor with changes is automatically saved after the configured `files.autoSaveDelay`.
// - onFocusChange: An editor with changes is automatically saved when the editor loses focus.
// - onWindowChange: An editor with changes is automatically saved when the window loses focus.
"files.autoSave": "afterDelay",
// Controls the delay in milliseconds after which an editor with unsaved changes is saved automatically. Only applies when `files.autoSave` is set to `afterDelay`.
"files.autoSaveDelay": 1000,保存時に末尾の空白スペースを自動削除
// When enabled, will trim trailing whitespace when saving a file.
"files.trimTrailingWhitespace": true,ショートカットキー（Key Binding）
keybindings.json にて以下を設定。
インデントの整形
shift+cmd+Rでファイル全体、または、選択した範囲のインデント整形を走らせる
// Reindent Lines： インデントの整形
{
"key": "shift+cmd+r",
"command": "editor.action.reindentlines"
},
{
"key": "shift+cmd+r",
"command": "editor.action.reindentselectedlines"
},行の複製
cmd+shift+D で選択した行を複製
// Duplicate Selection: 選択箇所の複製
{
"key": "shift+cmd+d",
"command": "editor.action.duplicateSelection"
},矩形選択
cmd+shift+Lで選択した範囲の行末にカーソルを挿入
// Add Cursords to Line Ends: 選択範囲の行末にカーソルを移動する（Sublime Textでいう `split_selection_into_lines` の動作）
{
"key": "shift+cmd+l",
"command": "editor.action.insertCursorAtEndOfEachLineSelected",
"when": "editorTextFocus"
},
{
"key": "shift+alt+i",
"command": "-editor.action.insertCursorAtEndOfEachLineSelected",//削除
"when": "editorTextFocus"
},cmd+control+上下キー で矩形選択（カーソル挿入）
// Block Selection: 矩形選択系の動作
{
"key": "ctrl+cmd+up",
"command": "editor.action.insertCursorAbove",
"when": "editorTextFocus"
},
{
"key": "alt+cmd+up",
"command": "-editor.action.insertCursorAbove",//削除
"when": "editorTextFocus"
},
{
"key": "ctrl+cmd+down",
"command": "editor.action.insertCursorBelow",
"when": "editorTextFocus"
},
{
"key": "alt+cmd+down",
"command": "-editor.action.insertCursorBelow",//削除
"when": "editorTextFocus"
},
// 矩形選択の競合を解消
{
"key": "ctrl+cmd+down",
"command": "-workbench.action.terminal.resizePaneDown",//削除
"when": "terminalFocus && terminalHasBeenCreated || terminalFocus && terminalProcessSupported"
},
{
"key": "ctrl+cmd+down",
"command": "-notebook.cell.focusInOutput",//削除
"when": "notebookCellHasOutputs && notebookEditorFocused"
},
{
"key": "ctrl+cmd+down",
"command": "-notebook.focusNextEditor",//削除
"when": "notebookEditorFocused && notebookOutputFocused"
},
{
"key": "ctrl+cmd+up",
"command": "-workbench.action.terminal.resizePaneUp",//削除
"when": "terminalFocus && terminalHasBeenCreated || terminalFocus && terminalProcessSupported"
},
{
"key": "ctrl+cmd+up",
"command": "-notebook.cell.focusOutOutput",//削除
"when": "notebookEditorFocused && notebookOutputFocused"
},
{
"key": "ctrl+cmd+down",
"command": "-quickInput.nextSeparator",//削除
"when": "inQuickInput && quickInputType == 'quickPick' || inQuickInput && quickInputType == 'quickTree'"
},
// cursorColumnSelect系の削除
{
"key": "shift+alt+cmd+down",
"command": "-cursorColumnSelectDown",//削除
"when": "textInputFocus"
},
{
"key": "shift+down",
"command": "-cursorColumnSelectDown",//削除
"when": "editorColumnSelection && textInputFocus"
},
{
"key": "shift+alt+cmd+left",
"command": "-cursorColumnSelectLeft",//削除
"when": "textInputFocus"
},
{
"key": "shift+left",
"command": "-cursorColumnSelectLeft",//削除
"when": "editorColumnSelection && textInputFocus"
},
{
"key": "shift+pageup",
"command": "-cursorColumnSelectPageUp",//削除
"when": "editorColumnSelection && textInputFocus"
},
{
"key": "shift+alt+cmd+pagedown",
"command": "-cursorColumnSelectPageDown",//削除
"when": "textInputFocus"
},
{
"key": "shift+alt+cmd+pageup",
"command": "-cursorColumnSelectPageUp",//削除
"when": "textInputFocus"
},
{
"key": "shift+pagedown",
"command": "-cursorColumnSelectPageDown",//削除
"when": "editorColumnSelection && textInputFocus"
},
{
"key": "shift+alt+cmd+right",
"command": "-cursorColumnSelectRight",//削除
"when": "textInputFocus"
},
{
"key": "shift+right",
"command": "-cursorColumnSelectRight",//削除
"when": "editorColumnSelection && textInputFocus"
},
{
"key": "shift+alt+cmd+up",
"command": "-cursorColumnSelectUp",//削除
"when": "textInputFocus"
},
{
"key": "shift+up",
"command": "-cursorColumnSelectUp",//削除
"when": "editorColumnSelection && textInputFocus"
},行の削除
ctrl+shift+K で選択行を削除
// Delete Lines: 選択行を削除
{
"key": "ctrl+shift+k",
"command": "editor.action.deleteLines",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "shift+cmd+k",
"command": "-editor.action.deleteLines",//削除
"when": "textInputFocus && !editorReadonly"
},行の入れ替え
ctrl+shift+上下キー で行を入れ替え
// Move Lines: 行移動（行の入れ替え）上方向
{
"key": "ctrl+shift+down",
"command": "editor.action.moveLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "alt+down",
"command": "-editor.action.moveLinesDownAction",//削除
"when": "editorTextFocus && !editorReadonly"
},
// moveLines: 行移動（行の入れ替え）下方向
{
"key": "ctrl+shift+up",
"command": "editor.action.moveLinesUpAction",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "alt+up",
"command": "-editor.action.moveLinesUpAction",//削除
"when": "editorTextFocus && !editorReadonly"
},画面分割／選択
グループに分ける
cmd+shift+2 で画面を縦に分割
// 画面を縦に分割
{
"key": "shift+cmd+2",
"command": "workbench.action.splitEditorRight"
},
{
"key": "cmd+k cmd+\\",
"command": "-workbench.action.splitEditorRight"
},cmd+shift+control+2 で画面を横に分割
// 画面を横に分割
{
"key": "ctrl+shift+cmd+2",
"command": "workbench.action.splitEditorDown"
},
{
"key": "cmd+k cmd+\\",
"command": "-workbench.action.splitEditorDown"
},グループを選択する
control+数字 で該当グループにフォーカスを当てる
// グループ選択のショートカットを変更
{
"key": "ctrl+1",
"command": "workbench.action.focusFirstEditorGroup"
},
{
"key": "cmd+1",
"command": "-workbench.action.focusFirstEditorGroup"//削除
},
{
"key": "ctrl+2",
"command": "workbench.action.focusSecondEditorGroup"
},
{
"key": "cmd+2",
"command": "-workbench.action.focusSecondEditorGroup"//削除
},
{
"key": "ctrl+3",
"command": "workbench.action.focusThirdEditorGroup"
},
{
"key": "cmd+3",
"command": "-workbench.action.focusThirdEditorGroup"//削除
},
{
"key": "ctrl+4",
"command": "workbench.action.focusFourthEditorGroup"
},
{
"key": "cmd+4",
"command": "-workbench.action.focusFourthEditorGroup"//削除
},
{
"key": "ctrl+5",
"command": "workbench.action.focusFifthEditorGroup"
},
{
"key": "cmd+5",
"command": "-workbench.action.focusFifthEditorGroup"//削除
},
{
"key": "ctrl+7",
"command": "workbench.action.focusSeventhEditorGroup"
},
{
"key": "cmd+7",
"command": "-workbench.action.focusSeventhEditorGroup"//削除
},
{
"key": "ctrl+8",
"command": "workbench.action.focusEighthEditorGroup"
},
{
"key": "cmd+8",
"command": "-workbench.action.focusEighthEditorGroup"//削除
},その他の関連ショートカットについて
- 「画面分割なし」の状態をなにかしら割り当てたかったが、該当するものがなく諦めた。
- 分割したグループは
cmd+Wで閉じるという考え方のもよう - なれるしかない
- 分割したグループは
- タブの移動は
cmd+control+左右キーに集約するのが良さそう。 - グループに関しては、上述の分割／選択以外は使わなさそうだったので、一旦削除した。
// 画面分割系ショートカットを削除
{
"key": "cmd+k shift+cmd+\\",
"command": "-workbench.action.splitEditorInGroup",
"when": "activeEditorCanSplitInGroup"
},
{
"key": "cmd+k cmd+\\",
"command": "-workbench.action.splitEditorLeft"
},
{
"key": "cmd+k cmd+\\",
"command": "-workbench.action.splitEditorUp"
},
{
"key": "cmd+k cmd+\\",
"command": "-workbench.action.splitEditorOrthogonal"
},
{
"key": "cmd+\\",
"command": "-workbench.action.splitEditor"
},
// 画面移動系ショートカットを削除
{
"key": "ctrl+cmd+9",
"command": "-workbench.action.moveEditorToLastGroup"
},
{
"key": "cmd+k shift+cmd+left",
"command": "-workbench.action.moveEditorLeftInGroup"
},
{
"key": "cmd+k shift+cmd+right",
"command": "-workbench.action.moveEditorRightInGroup"
},
{
"key": "ctrl+cmd+1",
"command": "-workbench.action.moveEditorToFirstGroup"
},
{
"key": "cmd+k right",
"command": "-workbench.action.moveActiveEditorGroupRight"
},
{
"key": "cmd+k down",
"command": "-workbench.action.moveActiveEditorGroupDown"
},
{
"key": "cmd+k left",
"command": "-workbench.action.moveActiveEditorGroupLeft"
},
{
"key": "cmd+k up",
"command": "-workbench.action.moveActiveEditorGroupUp"
},タブ選択
cmd+数字 でn番目のタブを選択する
// タブ選択のショートカットを変更
{
"key": "cmd+1",
"command": "workbench.action.openEditorAtIndex1"
},
{
"key": "ctrl+1",
"command": "-workbench.action.openEditorAtIndex1"//削除
},
{
"key": "cmd+2",
"command": "workbench.action.openEditorAtIndex2"
},
{
"key": "ctrl+2",
"command": "-workbench.action.openEditorAtIndex2"//削除
},
{
"key": "cmd+3",
"command": "workbench.action.openEditorAtIndex3"
},
{
"key": "ctrl+3",
"command": "-workbench.action.openEditorAtIndex3"//削除
},
{
"key": "cmd+4",
"command": "workbench.action.openEditorAtIndex4"
},
{
"key": "ctrl+4",
"command": "-workbench.action.openEditorAtIndex4"//削除
},
{
"key": "cmd+5",
"command": "workbench.action.openEditorAtIndex5"
},
{
"key": "ctrl+5",
"command": "-workbench.action.openEditorAtIndex5"//削除
},
{
"key": "cmd+6",
"command": "workbench.action.openEditorAtIndex6"
},
{
"key": "ctrl+6",
"command": "-workbench.action.openEditorAtIndex6"//削除
},
{
"key": "cmd+7",
"command": "workbench.action.openEditorAtIndex7"
},
{
"key": "ctrl+7",
"command": "-workbench.action.openEditorAtIndex7"//削除
},
{
"key": "cmd+8",
"command": "workbench.action.openEditorAtIndex8"
},
{
"key": "ctrl+8",
"command": "-workbench.action.openEditorAtIndex8"//削除
},
{
"key": "cmd+9",
"command": "workbench.action.openEditorAtIndex9"
},
{
"key": "ctrl+9",
"command": "-workbench.action.openEditorAtIndex9"//削除
},cmd+PageUp/Down で前後のタブを選択する
// 前後のタブ選択
{
"key": "ctrl+pageup",
"command": "workbench.action.nextEditor"
},
{
"key": "shift+cmd+]",
"command": "-workbench.action.nextEditor"//削除
},
{
"key": "ctrl+pagedown",
"command": "workbench.action.previousEditor"
},
{
"key": "shift+cmd+[",
"command": "-workbench.action.previousEditor"//削除
},Emmet
control+E で Emmet を展開する
// Emmetの展開をCtrl+Eに変更
{
"key": "ctrl+e",
"command": "emmet.expandAbbreviation"
},
{
"key": "ctrl+e",
"command": "-cursorLineStart",//削除
"when": "textInputFocus"
},