VSCodeなかなかええやん
サクラエディタおじさんと肩を並べて、Vimで作業をしていたのですが、
重い腰を上げてVSCodeを一から設定してみました。
改めて使ってみると中々良かったので設定を晒してみます。
setting.json
{
//visual studio codeの設定
//vsvimが有効ならghでコマンドの説明文を確認できるので使う
//========================================================================
// vscodeのeditorの設定
//========================================================================
//----------------------------------------------------------
"editor.fontSize" : 13.5, //fontsize
"editor.wordWrap" : "on", //1行長くならないように
"editor.lineHeight" : 0, //1行の高さ
"editor.renderLineHighlight" : "all", //現在の行番号含めて強調表示する
"editor.minimap.enabled" : false, //minimap削除
"editor.quickSuggestions" : true, //入力補完を自動で表示する
"editor.insertSpaces" : false, //tabをスペースとして扱う
"editor.tabSize" : 4, //tabをデフォルトで4にする
"editor.renderWhitespace" : "boundary", //エディタ上での空白表示設定
"breadcrumbs.enabled" : true, //パンクズリスト表示
"editor.renderControlCharacters": true, //制御文字の表示
"editor.cursorBlinking" : "smooth", //カーソルの点滅をヌルヌルにする
"editor.autoIndent" : true, //autoindentを入れる
"editor.fontFamily" : "Cica,Consolas, 'Courier New', monospace", //font settings
"extensions.autoUpdate" : true, //プラグインを自動アップデート
"files.autoGuessEncoding" : true, // 有効な場合、ファイルを開くときに文字セット エンコードを推測します。言語ごとに構成することも可能
"files.autoSave" : "off", //ダーティファイルの作成を無効化
//----------------------------------------------------------
// vscodeのバージョン管理系
//----------------------------------------------------------
// ソース管理プロバイダーのセクションを常に表示するかどうか。
"scm.alwaysShowProviders": true,
//----------------------------------------------------------
// vscodeの作業環境の設定(おもにタブの設定をvimと近づけるために設定)
//----------------------------------------------------------
"workbench.editor.labelFormat": "short",
"workbench.editor.revealIfOpen": true,
"workbench.editor.showIcons": true,
"workbench.editor.highlightModifiedTabs": true,
"workbench.editor.tabCloseButton": "left",
"workbench.startupEditor": "none",
"workbench.editor.openPositioning": "last",
"explorer.openEditors.visible": 0,
"files.exclude": { // エクスプローラーから非表示にするファイル
"tags":true,
"**/.svn/**": true,
},
//----------------------------------------------------------
// vscodeのdebugの設定
//----------------------------------------------------------
"debug.inlineValues": true,
//----------------------------------------------------------
// vscodeのwindowの設定
//----------------------------------------------------------
"window.zoomLevel" : 0,
"workbench.tips.enabled": false,
"C_Cpp.updateChannel" : "Insiders",
//vscode sync
"sync.forceDownload" : false,
"sync.quietSync" : false,
"sync.askGistName" : false,
"sync.removeExtensions" : true,
"sync.syncExtensions" : true,
"sync.autoDownload" : false,
"sync.autoUpload" : false,
"editor.autoClosingBrackets": "beforeWhitespace",
"editor.autoClosingQuotes" : "beforeWhitespace",
// ワークベンチ設定
"workbench.editor.showTabs" : true, // タブを表示
"workbench.editor.enablePreview" : false, //毎回新規で開く
"workbench.editor.enablePreviewFromQuickOpen": false, //毎回新規で開く
"workbench.activityBar.visible" : false, // アクティビティバー(左端)を非表示に
"workbench.editor.tabSizing" : "shrink", // タブが多い場合,文字を非表示にしてもタブ表示を優先する
"workbench.statusBar.visible" : true, // ステータスバー(下端)を表示
"workbench.sideBar.location" : "left", // サイドバーを左に
"workbench.colorTheme" : "One Dark Pro",
"workbench.colorCustomizations" : {
"editor.lineHighlightBackground" : "#002255", //現在の行の背景色
"editor.selectionBackground" : "#31ca4a77", //選択業の背景
"editor.selectionHighlightBorder" : "#00e1ff", //線学業の前背景
"editorError.border" : "#ff0000", //エラーの下線の色
"tab.activeBorder" : "#ffffff", //アクティブなタブの色
"tab.inactiveForeground" : "#999999", //アクティブでないタブの色
"editorSuggestWidget.selectedBackground": "#4792b4", //選択しているサジェストの背景色
"editorSuggestWidget.foreground" : "#f1efef", //選択しているサジェストの文字色
},
// クラッシュレポートを送信しない
"telemetry.enableCrashReporter": false,
"telemetry.enableTelemetry" : false,
//========================================================================
//plugin settings
//========================================================================
"scrolloff.alwaysCenter": false,
"scrolloff.scrolloff" : 9,
//========================================================================
//VIM
//========================================================================
"vim.statusBarColorControl" : false, //statusbarの色のコントロールをしない
"vim.highlightedyank.enable": true, //yankした箇所をハイライト表示にする
"vim.leader" : "<space>", //Map Leaderの設定
"vim.autoindent" : true, //autoindent
"vim.easymotion" : true, //easy motionを有効化
"vim.useSystemClipboard" : true, //system clipboardと同期する
"vim.hlsearch" : true, //hlserch
"vim.visualstar" : true, //カーソル上にあるワードを"*"で検索
"vim.useCtrlKeys" : true, //諸々のctrlキーを使った操作が有効になる //================================================================================================================
//key map for vim
//keybinding.jsonと違いキーの組み合わせで処理待ちが発生しない
//keyのデフォルトキーを使い,キー操作を定義したくても
//デフォルトのコマンドが有効になる。(例えば、sh→0にしたくてもsのコマンドが有効になっている)
//Leaderキーを入力後のコマンドは無視されているので、極力Leaderを活用するようにする。
//beforeは必ず定義しなければならないが、afterまたはcommandsでコマンドを呼び出せる。whenによる操作も可能っぽい
//================================================================================================================
//nnoremap
"vim.normalModeKeyBindingsNonRecursive": [
//既存コマンドの上書き
{"before": ["]"],"after" : ["g","d"]}, //定義へ飛ぶ
//文字間移動 prefix shift
{"before": ["J"],"after" : ["1","0","j"]}, //移動を早める
{"before": ["K"],"after" : ["1","0","k"]}, //移動を早める
{"before": ["H"],"after" : ["0"]}, //端に移動
{"before": ["L"],"after" : ["$"]}, //端に移動
//Leaderを利用
//window移動 prefix Leader
{"before": ["<Leader>", "h"],"after" : ["<C-w>","h"]}, //window移動
{"before": ["<Leader>", "j"],"after" : ["<C-w>","j"]}, //window移動
{"before": ["<Leader>", "k"],"after" : ["<C-w>","k"]}, //window移動
{"before": ["<Leader>", "l"],"after" : ["<C-w>","l"]}, //window移動
{"before": ["<Leader>", "s"],"commands": [":split"]}, //水平に開く
{"before": ["<Leader>", "v"],"commands": [":vsplit"]}, //水平にを閉じる
{"before": ["<Leader>", "u"],"after" : ["g","t"]}, //tab移動
{"before": ["<Leader>", "y"],"after" : ["g","T"]}, //tab移動
{"before": ["<Leader>", "x"],"commands": [":q"]}, //tabを閉じる
{"before": ["<Leader>", "q"],"commands": [":qa"]}, //すべてを閉じる
{"before": ["<Leader>", "w"],"commands": [":wa"]}, //すべてを保存
{"before": ["<Leader>","o"],"after" : ["o","<ESC>"]}, //空の行を挿入
{"before": ["<Leader>","O"],"after" : ["O","<ESC>"]}, //空の行を挿入
{"before": ["<Leader>", "w"],"commands": [":w"]}, //サイドバーを表示(toggle)
{"before": ["<Leader>", "w"],"commands": [":w"]}, //デバックウィンドウを表示(toggle)
//外部プラグイン呼び出し
],
//insert mode
"vim.insertModeKeyBindings":[
{"before": ["j", "j"],"after": ["<Esc>"]}, //jjでノーマルモードに戻る
{"before": [";",";"],"commands": ["editor.action.triggerSuggest"]}, //llでサジェストの起動に使う
],
// Visual Mode
"vim.visualModeKeyBindingsNonRecursive": [
{"before": ["J"],"after": ["1","0","j"]}, //移動を早める
{"before": ["K"],"after": ["1","0","k"]}, //移動を早める
{"before" : ["H"],"after": ["0"]}, //端に移動
{"before" : ["L"],"after": ["$"]}, //端に移動
//外部プラグイン呼び出し
{"before": ["<Leader>", "<Space>"],"commands": [{"command": "alignment.align"}]}, //揃える
{"before": ["<Leader>", "c"],"commands" : [{"command": "extension.commentaligner"}]},//コメントを揃える
],
//vimではなくvscode側のキーを有効にする
"vim.handleKeys": {
"<C-a>": false,
"<C-f>": false,
"<C-h>": false,
},
//========================================================================
//自動で挿入されるやつ
//========================================================================
}
setting.jsonは通常の設定とvimの設定をしています。
VScodevimでデフォルトのキーをアンマップする方法が分からなかったので、
prefixとして文字移動はShift、window移動やそれ以外の操作はLeaderを使用する構成にしています。
VSCodeで設定する際にkeybinding.jsonとsetting.jsonで設定を
どちらに書けば良いのか分かりづらかったのですが、
基本的にエディター上での操作はVScodevimに一任するスタイルでやっていってます。
特にお気に入りなのが、オートコンプリートを出すのに;;を使うようにしたものです。
jjでコマンドモードに戻る人も多いと思いますが、
それと同じ要領で覚えることが出来ます。(;;の入力で困ったらそのうち変えそうですが)
keybinding.json
// 既定値を上書きするには、このファイル内にキー バインドを挿入しますauto[]
[
//======================================================================
//key binding
//Editor上の基本の操作はvscode vimの設定にしている(setting.json参照)
//vscode vimで対応出来ない操作(サイドバーの操作)などはこちらで対応するようにする
//prefix ctrn+Space
//======================================================================
// サイドバーへの移動
{
"key": "ctrl+space ctrl+h",
"command": "workbench.action.focusSideBar",
"when": "editorFocus"
},
// サイドバーからの移動
{
"key": "ctrl+space ctrl+l",
"command": "workbench.action.focusFirstEditorGroup",
"when": "!editorFocus"
},
// サジェスチョン操作
{
"key": "ctrl+k",
"command": "selectPrevSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
"key": "ctrl+j",
"command": "selectNextSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
//リスト間移動
{
"key": "ctrl+j",
"command": "list.focusDown",
"when": "explorerViewletFocus && listFocus &&explorerViewletVisible && !inputFocus"
},
{
"key": "ctrl+k",
"command": "list.focusUp",
"when": "explorerViewletFocus && listFocus &&explorerViewletVisible && !inputFocus"
},
//======================================================================
//サイドバー関連
//======================================================================
//サイドバー表示(toggle)
{
"key": "ctrl+Space ctrl+Space",
"command":"workbench.action.toggleSidebarVisibility",
"when": "!explorerViewletVisible && !searchViewletVisible && !inDebugMode && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
{
"key": "ctrl+Space ctrl+Space",
"command": "workbench.action.toggleSidebarVisibility",
"when": "explorerViewletVisible && !searchViewletVisible && !inDebugMode && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
//======================================================================
//panel(下に表示される箇所)関連
//======================================================================
//panelの表示(toggle)
{
"key": "ctrl+space ctrl+p",
"command": "workbench.action.togglePanel",
"when": "!PanelFocus && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
{
"key": "ctrl+space ctrl+p",
"command": "workbench.action.togglePanel",
// "command": "workbench.action.output.toggleOutput",
"when": "PanelFocus && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
},
//======================================================================
//UI操作
//======================================================================
//======================================================================
//explorer(sidebar)
//======================================================================
{
"key": "ctrl+space ctrl+e",
"command": "workbench.view.explorer"
},
{
"key": "ctrl+space e",
"command": "workbench.view.explorer"
},
//======================================================================
// grep検索(sidebar)
//======================================================================
{
"key": "ctrl+space ctrl+f",
"command": "workbench.action.findInFiles",
"when": "!searchInputBoxFocus"
},
{
"key": "ctrl+space f",
"command": "workbench.action.findInFiles",
"when": "!searchInputBoxFocus"
},
// 検索実行後の候補への移動
{
"key": "ctrl+space cntrl+n",
"command": "workbench.action.interactivePlayground.arrowDown",
"when": "interactivePlaygroundFocus && !editorTextFocus"
},
//======================================================================
//debug(sidebar)
//======================================================================
{
"key": "ctrl+space ctrl+d",
"command": "workbench.view.debug"
},
{
"key": "ctrl+space d",
"command": "workbench.view.debug"
},
//======================================================================
//version管理(sidebar)
//======================================================================
{
"key": "ctrl+space ctrl+s",
"command": "workbench.view.scm"
},
{
"key": "ctrl+space s",
"command": "workbench.view.scm"
},
//======================================================================
//plugin管理(sidebar)
//======================================================================
{
"key": "ctrl+space ctrl+x",
"command": "workbench.view.extensions"
},
{
"key": "ctrl+space x",
"command": "workbench.view.extensions"
},
//======================================================================
//terminal(panel)
//======================================================================
{
"key": "ctrl+space ctrl+t",
"command": "workbench.action.terminal.toggleTerminal"
},
{
"key": "ctrl+space t",
"command": "workbench.action.terminal.toggleTerminal"
},
//======================================================================
//error画面(panel)
//======================================================================
{
"key": "ctrl+space ctrl+q",
"command": "workbench.actions.view.problems"
},
{
"key": "ctrl+space q",
"command": "workbench.actions.view.problems"
},
//======================================================================
//上部操作
//======================================================================
// ファイル検索
{
"key": "ctrl+space ctrl+oem_plus",
"command": "workbench.action.quickOpen"
},
{
"key": "ctrl+space ctrl+oem_plus",
"command": "workbench.action.quickOpen"
},
// コマンドパレット
{
"key": "ctrl+space ctrl+oem_1",
"command": "workbench.action.showCommands"
},
{
"key": "ctrl+space oem_1",
"command": "workbench.action.showCommands"
},
]
keybinding.jsonではVScodevimの設定では対応出来ない、サイドバーの操作などを行えるようにしています。
また、prefixはCntr+Spaceで極力押しやすい配置を心がけています。
whenでの動作制限が参考にした記事のままだったり、まだまだ設定が足りていない部分も多いのですが
とりあえず使う分にはこんな感じでいいのかなと思っています。
純粋なVimと比べてみて
どうしようもないところなのですが、やっぱり純粋なVimに比べて
テキストオブジェクトやオペレータが貧弱なのは否めません。
僕はゆとりVimmerなのでブロックを対応してくれるプラグインを入れて
()や""はci(やyi"を使わずcibで対応していたので割と不便に感じます。
また、オペレーターはvim-operator-replaceがないため、わざわざviwしてpを押す事に凄くストレスを感じます。
また、今までvimでお世話になったプラグインが使えなかったり、
一応、おまけとしてついているeasymotionやsurroundも
元々のVimで使っていたものと違うものなので微妙に挙動が違い不便に感じてしまいます。
(easymotionはhaya14busaさんがforkしてたやつ、surroundはrhysdさんがoperatorにしてたやつ
と、ここまでVScodevimについての不満を多く書きましたが、
それは僕がゆとりVimmerだからの話であってpluginを多用しない人や
元々の設定からそこまで多く変えてvimを使っていなかった人にとっては
違和感なく扱えるプラグインだと思います(文句言うならプルリクしろって話ですね、すいません)
逆にVim以外の面ではVimにはない設定のしやすさだったり、オートコンプリートが強力な所
わざわざctagsを使わないでもいい所だったり、快適さが全然違うように感じます。
ここも僕がゆとりVimmerなので大きなことが言えませんが、
デフォルトで強力なのって改めて凄い所なのだなと思いました。
最後に
VSCodeからgvimで開いてくれるプラグインが
ほとんどMacしか対応していないので誰か知っていれば教えてください・・。
設定を参考にさせていただいた記事
割と突き詰めてやったvim→vscode移行
VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)
VSCodeをVimmerが満足できる設定にしてみた