2019-07-09
結構いいねされるので更新しました。
参考
VSCode Remoteが繋がらない問題の対処方法
特に、terminalからはsshが繋がるけれど、VSCode Remoteがサーバーに繋がらないという人へ。
Tips更新
2019-02-12
最新バージョンで無くなっていた設定の削除と、独自カスタマイズしやすいようにコメントをしっかりつけました。良さそうな設定の追加
2018-10-04
goのlangserverとgodocのtoolは一緒にすると動かないため。langserverをoffにすると良いです。
"go.docsTool": "gogetdoc",
"go.useLanguageServer": false,
導入、動機
今まではvimをメンテナンスして開発してきました。
vscodeの話をされてもそんなのvimmerには関係ないと思っていました。
まぁそれでもこれだけvscodeが盛り上がっているのに食わず嫌いはよくないと思い使って見たところ、、、
VSCODE最高!
って感じになりました。
vimのkeybindは?どこまで移行できる?
あとは割と重要なことなのですがvimのkeybindをどこまで反映できるかというところが重要です。
今までruby mineだったり、atomも使って見たことはあるのですが
納得のいくほどvimのkeyを移行することができなかったので
結局vimを使うことになってました。がしかし、vscodeはかなり痒いところに手が届く気がします。
installするvim拡張
よくやる基本設定
{
//fontsizeを小さく
"editor.fontSize":9,
"terminal.integrated.fontSize": 9,
//wrap
"editor.wordWrap": "on",
"files.trimTrailingWhitespace": true,
//ミニマップをfalse
"editor.minimap.enabled": false,
//bookmarkをsidebarに表示する
"bookmarks.treeview.visible": true,
//twigとvueでも有効にします
"emmet.includeLanguages": {"twig": "html", "vue-html": "html"},
}
vscodevimの設定
{
// システムのclipboardにコピー
"vim.useSystemClipboard":true,
// 検索に:を入れる
"vim.cmdLineInitialColon": true,
"vim.hlsearch": true,
// 言わずもがなeasymotion
"vim.easymotion": true,
// カーソル上にあるワードを"*"で検索
"vim.visualstar": true,
// 諸々のctrlキーを使った操作が有効になる
"vim.useCtrlKeys": true,
}
vimのkeymapをどこまで持ってこれるか
keymapを持ってくる前にprefixを決めます。
僕の中では
ctrl + u //検索系もしくは開発系のコマンドのprefixです
ctrl + o //割とメタっぽい動作をしますコマンドパレットだったりdebugの実行だったり
leader // "\" にマッピングして使用してwindow操作系が多いです。
妥協したところ、まだ完成していないところがありますが
上記を踏まえた上でこんな感じになっています。
| 機能 | vim | vscode |
|---|---|---|
| プロジェクトルートからファイル検索 | ctrl+u ctrl+u | ctrl+u ctrl+u |
| 検索したファイルの移動（下) | ctrl+n | ctrl+n |
| 検索したファイルの移動（上) | ctrl+p | ctrl+p |
| 実装している箇所に移動する | ctrl+u ctrl+i | ctrl+u ctrl+i |
| 宣言している箇所に移動する | ctrl+u ctrl+d | ctrl+u ctrl+d |
| プロジェクトからgrep検索 | ctrl+u ctrl+g | ctrl+u ctrl+g |
| grep検索したファイルの移動（下) | ctrl+n | ctrl+n |
| grep検索したファイルの移動（上) | ctrl+p | ctrl+p |
| buffer(editor)間の移動(右) (vscodeだとeditor group関係なく移動します) | ctrl+w l | ctrl+w ctrl+l |
| buffer(editor)間の移動(左) (vscodeだとeditor group関係なく移動します) | ctrl+w h | ctrl+w ctrl+h |
| エクスプローラーのviewLetへの移動 | ctrl+w h | |
| insertモードへ入っているときにカーソルを右へ移動 | ctrl+l | ctrl+l |
| insertモードへ入っているときにカーソルを左へ移動 | ctrl+h | ctrl+h |
| ソースtreeのトグル | \ v | \ v |
| shellのトグル | \ t | \ t |
| コマンドラインパレットの表示 | ctrl+o ctrl+o | |
| git add | g a | g a |
| git status | g s t | |
| git commit | g c o | g c |
| ファイルの1行目に移動 | g g | g g |
| viewを選択して移動 | - | ctrl+q |
あとは実際に僕の設定を載せるのですがたぶんケース漏れがあって不具合があると思います。参考までにどうぞ。
特にvscodevimを使用されている方だと
//vimのmodeを取得するために
vim.mode == 'SearchInProgressMode'
vim.mode == 'Normal'
//もしくは否定形
vim.mode != 'SearchInProgressMode'
vim.mode != 'Normal'
が意外と重宝されると思います。
そしてグダグタ言わずにコピペさせてくれと言う方のために以下
keybindings.json
// Place your key bindings in this file to overwrite the defaults
[
//----------------------------------------------------------
// エディターにフォーカスしている時の設定 (editor->editorへの移動)
//----------------------------------------------------------
// 実装箇所にコードジャンプ
{
"key": "ctrl+u ctrl+i",
"command": "editor.action.goToImplementation",
"when": "editorFocus"
},
// 宣言箇所に移動
{
"key": "ctrl+u ctrl+d",
"command": "editor.action.goToDeclaration",
"when": "editorFocus"
},
// 手前のエディターに移動
{
"key": "ctrl+w ctrl+h",
"command": "workbench.action.previousEditor",
"when": "editorFocus"
},
{
"key": "ctrl+w ctrl+l",
"command": "workbench.action.nextEditor",
"when": "editorFocus && vim.mode == 'Normal'"
},
//----------------------------------------------------------
// エディターにフォーカスしている時の設定(editor<->sidebarへの移動)
//----------------------------------------------------------
// サイドバーへの移動 (ctrl+hをhにしてctrlを話すだけで切り替わる)
{
"key": "ctrl+w h",
"command": "workbench.action.focusSideBar",
"when": "editorFocus"
},
// サイドバーからの移動 (ctrl+hをhにしてctrlを話すだけで切り替わる)
{
"key": "ctrl+w ctrl+l",
"command": "workbench.action.focusFirstEditorGroup",
"when": "!editorFocus"
},
// サイドバーからの移動 (ctrl+hをhにしてctrlを話すだけで切り替わる)
{
"key": "ctrl+w ctrl+l",
"command": "workbench.action.navigateEditorGroups",
"when": "!editorFocus"
},
//----------------------------------------------------------
// 検索関連(* -> 検索UI)
//----------------------------------------------------------
// grep検索に入る
{
"key": "ctrl+u ctrl+g",
"command": "workbench.action.findInFiles",
"when": "!searchInputBoxFocus"
},
// 検索実行後の候補への移動
{
"key": "ctrl+n",
"command": "workbench.action.interactivePlayground.arrowDown",
"when": "interactivePlaygroundFocus && !editorTextFocus"
},
// ファイルの検索に入る
{
"key": "ctrl+u ctrl+u",
"command": "workbench.action.quickOpen"
},
//----------------------------------------------------------
// カーソル移動(editor(ui移動はなし))
//----------------------------------------------------------
//入力モードでカーソルをみぎにずらす
{
"key": "ctrl+l",
"command": "cursorRight",
"when": "editorTextFocus && !editorReadOnly"
},
//----------------------------------------------------------
// サジェストの選択(ui移動はなし)
//----------------------------------------------------------
// サジェストの選択
{
"key": "ctrl+k",
"command": "acceptSelectedSuggestion"
},
// 候補のフォーカスを下へ移動
{
"key": "ctrl+n",
"command": "selectNextSuggestion",
"when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"
},
// 候補のフォーカスを上へ移動
{
"key": "ctrl+p",
"command": "selectPrevSuggestion",
"when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"
},
// ヒントサジェストを下へ移動
{
"key": "ctrl+n",
"command": "showNextParameterHint",
"when": "editorTextFocus && parameterHintsMultipleSignatures && parameterHintsVisible"
},
// リスト系の選択のフォーカスを下へ移動
{
"key": "ctrl+n",
"command": "list.focusDown",
"when": "listFocus"
},
// 検索画面の選択のフォーカスを下へ移動
{
"key": "ctrl+n",
"command": "search.focus.nextInputBox",
"when": "inputBoxFocus && searchViewletVisible"
},
// サジェストのキャンセル
{
"key": "ctrl+[",
"command": "search.action.cancel",
"when": "listFocus && searchViewletVisible"
},
//----------------------------------------------------------
// 設定画面のみ有効なサジェストの選択(ui移動はなし)
//----------------------------------------------------------
// 候補のフォーカスを下へ移動
{
"key": "ctrl+n",
"command": "settings.action.focusSettingsFile",
"when": "inSettingsSearch"
},
// 候補のフォーカスを下へ移動
{
"key": "ctrl+n",
"command": "keybindings.editor.focusKeybindings",
"when": "inKeybindings && inKeybindingsSearch"
},
// サジェストのキャンセル
{
"key": "ctrl+[",
"command": "settings.action.clearSearchResults",
"when": "inSettingsSearch"
},
// サジェストのキャンセル
{
"key": "ctrl+[",
"command": "keybindings.editor.clearSearchResults",
"when": "inKeybindings && inKeybindingsSearch"
},
//----------------------------------------------------------
// emmetのサジェストの挙動(ui移動はなし)
//----------------------------------------------------------
// スニペットの選択
{
"key": "ctrl+k",
"command": "insertSnippet",
"when": "editorTextFocus && hasSnippetCompletions && !editorTabMovesFocus && !inSnippetMode"
},
// スニペットのプレースホルダー移動
{
"key": "ctrl+k",
"command": "jumpToNextSnippetPlaceholder",
"when": "editorTextFocus && hasNextTabstop && inSnippetMode"
},
// スニペットのプレースホルダー戻る
{
"key": "ctrl+h",
"command": "jumpToPrevSnippetPlaceholder",
"when": "editorTextFocus && hasPrevTabstop && inSnippetMode"
},
//----------------------------------------------------------
// workbenchのクイックオープンの挙動(ui移動はなし)
//----------------------------------------------------------
{
"key": "ctrl+[",
"command": "workbench.action.closeQuickOpen",
"when": "inQuickOpen"
},
{
"key": "ctrl+[",
"command": "workbench.action.closeQuickOpen",
"when": "inQuickOpen"
},
//----------------------------------------------------------
// サイドバーでのファイル名編集(ui移動はなし)
//----------------------------------------------------------
{
"key": "ctrl+r",
"command": "renameFile",
"when": "explorerViewletVisible && filesExplorerFocus"
},
{
"key": "Enter",
"command": "explorer.openToSide",
"when": "explorerViewletVisible && filesExplorerFocus"
},
//----------------------------------------------------------
// サイドバーのファイルをエディターで開く(サイドバー -> エディター)
//----------------------------------------------------------
{
"key": "ctrl+l",
"command": "explorer.openToSide",
"when": "explorerViewletFocus && explorerViewletVisible"
},
//----------------------------------------------------------
// デバッグモードUI(*->デバッグモードへの移動)
//----------------------------------------------------------
{
"key": "ctrl+o ctrl+d",
"command": "workbench.view.debug"
},
{
"key": "ctrl+o d",
"command": "workbench.view.debug"
},
//----------------------------------------------------------
// バージョン管理UI(*->バージョン管理UIへの移動)
//----------------------------------------------------------
{
"key": "ctrl+o ctrl+g",
"command": "workbench.view.scm"
},
{
"key": "ctrl+o g",
"command": "workbench.view.scm"
},
//----------------------------------------------------------
// サイドバーのトグル(*->サイドバーへの移動)
//----------------------------------------------------------
{
"key": "[IntlYen] v",
"command": "workbench.view.explorer",
"when": "!explorerViewletVisible && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
{
"key": "[IntlYen] v",
"command": "workbench.action.toggleSidebarVisibility",
"when": "explorerViewletVisible && !searchViewletVisible && !inDebugMode && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
//----------------------------------------------------------
// コマンドパレットオープン(*->コマンドパレット)
//----------------------------------------------------------
{
"key": "ctrl+o ctrl+o",
"command": "workbench.action.showCommands"
},
{
"key": "ctrl+o o",
"command": "workbench.action.showCommands"
},
//----------------------------------------------------------
// vscodeのviewを選択(*->*)
//----------------------------------------------------------
{
"key": "ctrl+o ctrl+v",
"command": "workbench.action.quickOpenView"
},
{
"key": "ctrl+o v",
"command": "workbench.action.quickOpenView"
},
//----------------------------------------------------------
// vscodeのviewを選択(*->*)
//----------------------------------------------------------
{
"key": "tab",
"command": "editor.emmet.action.expandAbbreviation",
// "when": "explorerViewletVisible && !searchViewletVisible && !inDebugMode && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
"when": "explorerViewletVisible && !inDebugMode && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
//----------------------------------------------------------
// vscodeのterminalのトグル(*->terminal)
//----------------------------------------------------------
{
"key": "[IntlYen] t",
"command": "workbench.action.terminal.toggleTerminal",
"when": "!terminalFocus && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
{
"key": "[IntlYen] t",
"command": "workbench.action.terminal.toggleTerminal",
"when": "terminalFocus && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
//----------------------------------------------------------
// sidebarの検索キャンセル(*->terminal)
//----------------------------------------------------------
{
"key": "Escape",
"command": "list.toggleKeyboardNavigation",
"when": "listFocus && listSupportsKeyboardNavigation"
},
{
"key": "ctrl+[",
"command": "list.toggleKeyboardNavigation",
"when": "listFocus && listSupportsKeyboardNavigation"
},
//----------------------------------------------------------
// gitの操作系(uiの移動なし)
//----------------------------------------------------------
{
"key": "g c",
"command": "git.commit",
"when": "editorTextFocus && vim.mode == 'Normal'"
},
{
"key": "g a",
"command": "git.stage",
"when": "editorTextFocus && vim.mode == 'Normal'"
},
{
"key": "g g",
"command": "cursorTop",
"when": "editorTextFocus && vim.mode == 'Normal'"
},
]
ここからはsettings系です。(僕の中ではまぁまぁTab周辺がvimに近くなったかなと思います。)
settings.json
{
//-----------------------------------------------------------------------------------------------------------
// vscodeのデフォルトの設定
//-----------------------------------------------------------------------------------------------------------
//----------------------------------------------------------
// vscodeのeditorの設定
//----------------------------------------------------------
"editor.fontSize": 9, // フォントサイズ
"editor.wordWrap": "on", // コードの一行が長くなるための可読性向上
"editor.minimap.enabled": false, // ミニマップはいらない
"editor.insertSpaces": true, // tab キーを押すとスペースが挿入されます。
"editor.tabSize": 2, // tabをデフォルトで2スペースにする
"editor.renderWhitespace": "boundary", // エディターで空白文字を表示する方法を制御します。'none'、'boundary' および 'all' が使用可能です。'boundary' オプションでは、単語間の単一スペースは表示されません。
"editor.formatOnSave": false, // 時間のかかるフォーマットだとバグが出るのでfalse
"breadcrumbs.enabled": true, //エディターで開くパンくずの設定
//----------------------------------------------------------
// vscodeの検索系
//----------------------------------------------------------
// 検索除外対象のディレクトリ
"search.exclude": {
"**/bower_components": true,
"**/vendor": true,
"**/env": true,
"tags":true,
"**/.svn": true,
"**/.git": true,
"**/.DS_Store": true
},
//----------------------------------------------------------
// vscodeのfileの設定
//----------------------------------------------------------
"files.associations": {
"*.sql": "sql",
"*.vue": "vue"
},
"files.autoGuessEncoding": false, // 有効な場合、ファイルを開くときに文字セット エンコードを推測します。言語ごとに構成することも可能
"files.trimFinalNewlines": false, // 有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします。
"files.trimTrailingWhitespace": true, // 有効にすると、ファイルの保存時に末尾の空白をトリミングします。
// ファイル監視から除外するファイル
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true,
"**/.svn/**":true,
},
//----------------------------------------------------------
// vscodeのバージョン管理系
//----------------------------------------------------------
// ソース管理プロバイダーのセクションを常に表示するかどうか。
"scm.alwaysShowProviders": true,
//----------------------------------------------------------
// vscodeの作業環境の設定(おもにタブの設定をvimと近づけるために設定)
//----------------------------------------------------------
// エディターのラベルの書式を制御します。例としてこの設定を変更することでファイルの場所を理解しやすくなります:
// - short: 'parent'
// - medium: 'workspace/src/parent'
// - long: '/home/user/workspace/src/parent'
// - default: '.../parent', 別タブで、同じタイトルを共有する場合や、相対的なワークスペース パス タブが無効になっている場合
"workbench.editor.labelFormat": "short",
// 任意の表示グループが開かれた場合に、そこにエディターを表示するかどうかを制御します。無効にした場合、エディターは現在のアクティブなエディター グループに優先して開かれます。有効にした場合は、現在のアクティブなエディター グループにもう一度開くのではなく、既に開いているエディターが表示されます。特定のグループ内や現在アクティブなグループの横に強制的にエディターを開いた場合などに、この設定が無視される場合もあることにご注意ください。
"workbench.editor.revealIfOpen": true,
"workbench.editor.showIcons": false, // 開いているエディターをアイコンで表示するかどうかを制御します。これには、アイコンのテーマを有効にする必要もあります。
"workbench.editor.highlightModifiedTabs": true, // 編集中のタブをハイライト
"workbench.editor.tabSizing": "shrink", // エディターのタブの大きさを制御します。常に完全なエディター ラベルを表示するのに足りるタブの大きさを維持するには 'fit' を設定します。すべてのタブを一度に表示するには利用可能なスペースが足りない場合に、タブを縮小可能にするには 'shrink' を設定します。
"workbench.editor.tabCloseButton": "off", // エディター タブの閉じるボタンの位置を制御するか、[off] に設定した場合に無効にします。
// todo エディターグループにアクティブなエディターが一つしか存在できない
// 前のセッションからエディターが復元されていない場合に、起動時に表示するかどうかを制御します。'none' を選択するとエディターなしで開始します。'welcomepage' を選択するとウェルカム ページを開きます (既定)。'newuntitledfile' を選択すると新しい無題のファイルを開きます (空のワークスペースを開いているときのみ)。
"workbench.startupEditor": "none",
// エディターを開く場所を制御します。'left' または 'right' を選択すると現在アクティブになっているエディターの左または右にエディターを開きます。'first' または 'last' を選択すると現在アクティブになっているエディターとは別個にエディターを開きます。
"workbench.editor.openPositioning": "first",
"workbench.activityBar.visible": false, // アクティビティバーでよけいなスペースを取られるのでfalse
"workbench.list.automaticKeyboardNavigation": false, // サイドバーのツリー検索でデフォルトの挙動をoffにする
"explorer.openEditors.visible": 0, // [開いているエディター] ウィンドウに表示するエディターの数。
//----------------------------------------------------------
//ワンセット
"workbench.editor.showTabs": true, //タブで見えるようにしないと何が開いているのかわからない
"workbench.editor.enablePreview": true,
"workbench.editor.enablePreviewFromQuickOpen": true,
// { "key": "cmd+w", "command": "workbench.action.closeeditorsingroup" }
// { "key": "ctrl+tab", "command": "workbench.action.openpreviouseditorfromhistory" },
// { "key": "ctrl+tab", "command": "workbench.action.quickopennavigatenext", "when": "inquickopen" },
//----------------------------------------------------------
//----------------------------------------------------------
// vscodeのdebugの設定
//----------------------------------------------------------
// デバッグ中にエディターの行内に変数値を表示します
"debug.inlineValues": true,
//----------------------------------------------------------
// vscodeのwindowの設定
//----------------------------------------------------------
"window.zoomLevel": 0,
//----------------------------------------------------------
// vscodeのterminalの設定
//----------------------------------------------------------
"terminal.integrated.copyOnSelection": true, // 設定した場合、ターミナルで選択しているテキストはクリップボードにコピーされます。
"terminal.integrated.fontSize": 9, // ターミナルのフォントサイズ
//-----------------------------------------------------------------------------------------------------------
// installした拡張の設定
//-----------------------------------------------------------------------------------------------------------
//----------------------------------------------------------
// emmetの設定
//----------------------------------------------------------
"emmet.includeLanguages": {
"twig": "html",
"vue-html": "html"
},
"html-css-class-completion.enableEmmetSupport": true,
//----------------------------------------------------------
// php-fixerの設定
//----------------------------------------------------------
"php-cs-fixer.executablePath": "php-cs-fixer",
"php-cs-fixer.config": "$home/.php_cs",
"php-cs-fixer.onsave": true, // execute php cs fixer on save
"php.validate.run": "onSave", // リンターを保存時に実行するか、入力時に実行するか。
//----------------------------------------------------------
// vscode vimの設定
//----------------------------------------------------------
"vim.useSystemClipboard": true, // systemのclipboardを使用します
"vim.hlsearch": true, // hlsearchは必要だと思う
"vim.easymotion": true, // 検索をするときに見やすいモッサりすることなければこのまま
"vim.visualstar": true, // wordを* or + で検索するでしょ?
"vim.useCtrlKeys": true,
"vim.ignorecase": true, // ignore case in search patterns.
"vim.incsearch": true, // show where a / search matches as you type it.
"vim.sneak": true, // enable the sneak plugin for vim.
//----------------------------------------------------------
// vscode goの設定
//----------------------------------------------------------
"go.docsTool": "gogetdoc",
"go.useLanguageServer": false,
"go.languageServerExperimentalFeatures": {
"format": true,
"autoComplete": true
},
"go.autocompleteUnimportedPackages": true,
//----------------------------------------------------------
// vscode gitの設定
//----------------------------------------------------------
"git.autofetch": true,
//----------------------------------------------------------
// vscode pythonの設定
//----------------------------------------------------------
"python.jediEnabled": false,
//----------------------------------------------------------
// vscode javascriptの設定
//----------------------------------------------------------
"javascript.updateImportsOnFileMove.enabled": "always",
//----------------------------------------------------------
// cssの設定
//----------------------------------------------------------
"css.lint.float": "error", // 'float' の使用を避けてください。float は脆弱な css につながり、レイアウトの一部が変更されたときに css が破損しやすくなります。
"css.lint.propertyIgnoredDueToDisplay": "error", // display によってプロパティを無視します。例: 'display: inline' の場合、width、height、margin-top、margin-bottom、float プロパティには効果がありません。
"css.lint.universalSelector": "error", // ユニバーサル セレクター (*) を使用すると処理速度が低下することが分かっています
"css.lint.boxModel": "error", // widthとheightをいっしょに使用しない
"css.lint.duplicateProperties": "error", // 重複する属性の使用不可
"css.lint.idSelector": "error", // id属性にはcssをつけない
//----------------------------------------------------------
// veturの設定
// https://vuejs.github.io/vetur/formatting.html#formatters
//----------------------------------------------------------
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": false,
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatterOptions": {
"prettier": {
// Prettier option here
"semi": false
}
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"gitstash.explorer.enabled": true,
"git.confirmSync": false,
// enable per-language
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
そのほかにはphp-fixerをかける設定などや
Docker + php + xdebug + vscodeみたいな構成も割と簡単にできて満足しています!
VSCode最高ですね！
今のところは自分のvimとほとんど同じ挙動なので満足ですがバグはあるかもしれません!
次回Docker + php + xdebug + vscodeも共有したいと思います。