VimmerのVimmerによるVimmerのためのVSCode環境構築(Part2)
前回に引き続き、VimmerのためのVSCode環境構築を進めていきたい。
今回は主にタブの移動やエディター以外の部分(サイドバーやターミナルなど)との行き来について設定していきたい。
この記事の内容
- 拡張機能の追加
- settings.jsonの設定
拡張機能の追加
前回の記事からも継続して調査を続けており、便利そうだと思った拡張を追加した。
その分をまず紹介したい。
VSCode上でpdfファイルを開けるようにする拡張。
それだけだが、まあ便利。
パスの補完ができるようになる拡張。
でも、たまにうまく動かないときがある。
何か設定があるのだろうか…？
サイドバーのファイルツリーのアイコンをおしゃれにする拡張。
それだけだけど、見た目大事。
インデントを色で示す拡張。
Pythonとかだとインデントがそのままforループの範囲になるなど、インデントが重要な言語などでわかりやすいのは便利。
これに慣れたらないと辛くなりそう。
括弧のペアを同じ色で表示してくれる拡張。
Goとかだと括弧が何個も入れ子構造になることが多いので、それが可視化されるのは便利。
前述の2つと合わせて、可視化系拡張として紹介。
CSV限定だけど、同じ列の項目を同じ色で表示してくれる便利拡張。
これがあればわざわざExcelとかで開かなくても結構わかりやすく確認できる。
他にも入れた拡張はあるが、特定のファイル形式専用のものなのでそれはまた別途紹介したい。
settings.jsonの設定
では、前回に引き続き、settings.jsonに設定を追加していく。
今回も、各項目について内容を説明し、JSONファイル全体は最後に示すこととする。
Vimの設定
- "vim.surround": true,
この設定だけで、vim-surroundも使えることを知った。
使い方はこのページを参考にするとわかりやすいと思う。
- "vim.highlightedyank.enable": true,
- "vim.highlightedyank.color": "rgba(100, 170, 240, 0.5)",
- "vim.highlightedyank.duration": 150,
ヤンクしたときに文字を一瞬ハイライトさせる設定。
1行目をtrueでON、2行目で色を指定、3行目でハイライト時間を指定。
色はなんとなくIceburgに馴染むような色にしている。
"vim.whichwrap": "h,l,<,>,[,]"
左右方向のカーソル移動で、行をまたいだ移動をする設定。
"h,l"がhキーとlキーでの移動、"<,>"が矢印キーでの移動(Normalモード)、"[,]"が矢印キーでの移動(Insertモード)の設定。
- "vim.statusBarColorControl": true,
ステータスバーの色の設定を有効化する。
色自体は以下のように設定し、Iceburgっぽい色にしている。
{
"vim.statusBarColors.normal": ["#161821", "#818596"],
"vim.statusBarColors.insert": ["#84A0C6", "#161821"],
"vim.statusBarColors.visual": ["#B4BE82", "#161821"],
"vim.statusBarColors.visualline": ["#B4BE82", "#161821"],
"vim.statusBarColors.visualblock": ["#B4BE82", "#161821"],
"vim.statusBarColors.replace": ["#E2A478", "#161821"],
"vim.statusBarColors.commandlineinprogress": ["#818596", "#161821"],
"vim.statusBarColors.searchinprogressmode": ["#818596", "#161821"],
"vim.statusBarColors.easymotionmode": ["#818596", "#161821"],
"vim.statusBarColors.easymotioninputmode": ["#818596", "#161821"],
"vim.statusBarColors.surroundinputmode": ["#818596", "#161821"]
}
この設定だけだと、うまく色が切り替わってくれない。
そのため、Iceburgのテーマファイルを少しいじる必要がある。
以下のフォルダのJSONファイルを開く。
~/.vscode/extensions/cocopon.iceberg-theme-1.1.0/themes/icebarg.color-theme.json
そして、以下の3行をコメントアウトすればOK。
- "statusBar.debuggingForeground": "#6b7089",
- "statusBar.foreground": "#6b7089",
- "statusBar.noFolderForeground": "#6b7089",
Normalモードのキーバインド
{
"before": ["<Enter>"],
"commands": ["editor.action.insertLineAfter"]
}
NormalモードでもEnterキーで改行できるようにする設定。
なんとなく使えると便利。
Visualモードのキーバインド
{
"before": [
"<Leader>",
"j"
],
"after": [
"<Esc>"
]
},
ちょっと悩んでるキーバインド。
VisualモードからNormalモードに戻るためのEscが遠いので、こんなキーバインドをしてみた。
InsertモードからNormalモードのときはjjにしているが、本当はそっちも\<Leader\>+jにした方がいいのかも。
ただ、今までNeoVimでjjで使っていたので、なかなか移行しづらい…
もう少し考えてみる。
テーマの設定
- "workbench.iconTheme": "material-icon-theme",
Meterial Icon Themeをインストールすると自動で入る設定。
ということで、今回までのsettings.jsonは以下の通り。
{
"editor.minimap.enabled": false,
"editor.renderWhitespace": "all",
"files.trimTrailingWhitespace": true,
"vim.leader": "<space>",
"vim.useSystemClipboard": true,
"vim.useCtrlKeys": true,
"vim.easymotion": true,
"vim.surround": true,
"vim.visualstar": true,
"vim.hlsearch": true,
"vim.highlightedyank.enable": true,
"vim.highlightedyank.color": "rgba(100, 170, 240, 0.5)",
"vim.highlightedyank.duration": 150,
"vim.whichwrap": "h,l,<,>,[,]",
"vim.statusBarColorControl": true,
"vim.statusBarColors.normal": ["#161821", "#818596"],
"vim.statusBarColors.insert": ["#84A0C6", "#161821"],
"vim.statusBarColors.visual": ["#B4BE82", "#161821"],
"vim.statusBarColors.visualline": ["#B4BE82", "#161821"],
"vim.statusBarColors.visualblock": ["#B4BE82", "#161821"],
"vim.statusBarColors.replace": ["#E2A478", "#161821"],
"vim.statusBarColors.commandlineinprogress": ["#818596", "#161821"],
"vim.statusBarColors.searchinprogressmode": ["#818596", "#161821"],
"vim.statusBarColors.easymotionmode": ["#818596", "#161821"],
"vim.statusBarColors.easymotioninputmode": ["#818596", "#161821"],
"vim.statusBarColors.surroundinputmode": ["#818596", "#161821"],
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["u"],
"commands": [
{
"command": "undo"
}
]
},
{
"before": ["<C-r>"],
"commands": [
{
"command": "redo"
}
]
},
{
"before": ["x"],
"after": ["\"", "_", "x"]
},
{
"before": ["s"],
"after": ["\"", "_", "s"]
},
{
"before": ["j"],
"after": ["g", "j"]
},
{
"before": ["k"],
"after": ["g", "k"]
},
{
"before": ["n"],
"after": ["n", "z", "z"]
},
{
"before": ["N"],
"after": ["N", "z", "z"]
},
{
"before": ["*"],
"after": ["*", "z", "z"]
},
{
"before": ["#"],
"after": ["#", "z", "z"]
},
{
"before": ["<Enter>"],
"commands": ["editor.action.insertLineAfter"]
},
{
"before": ["<Leader>", "c"],
"commands": [
{
"command": "editor.action.commentLine"
}
]
},
{
"before": ["<Leader>", "w"],
"after": [],
"commands": [
{
"command": "workbench.action.files.save",
"args": []
}
]
},
{
"before": ["<Leader>", "q"],
"after": [],
"commands": [
{
"command": "workbench.action.closeActiveEditor",
"args": []
}
]
},
{
"before": ["<Leader>", "x"],
"after": [],
"commands": [
{
"command": "editor.action.formatDocument",
"args": []
}
]
},
{
"before": ["<Leader>", "l"],
"after": ["$"]
},
{
"before": ["<Leader>", "h"],
"after": ["^"]
},
{
"before": ["<Leader>", "m"],
"after": ["%"]
},
{
"before": ["<Leader>", "z"],
"commands": [":noh"]
}
],
"vim.insertModeKeyBindingsNonRecursive": [
{
"before": ["j", "j"],
"after": ["<Esc>"]
},
{
"before": [";", ";"],
"commands": ["editor.action.triggerSuggest"]
}
],
"vim.visualModeKeyBindingsNonRecursive": [
{
"before": ["<Leader>", "j"],
"after": ["<Esc>"]
},
{
"before": ["<Leader>", "l"],
"after": ["$"]
},
{
"before": ["<Leader>", "h"],
"after": ["^"]
},
{
"before": ["<Leader>", "m"],
"after": ["%"]
},
{
"before": [">"],
"commands": ["editor.action.indentLines"]
},
{
"before": ["<"],
"commands": ["editor.action.outdentLines"]
}
],
"workbench.colorTheme": "Iceberg",
"workbench.iconTheme": "material-icon-theme"
}
keybindings.jsonの設定
次にkeybindings.jsonの設定を行っていく。
ここでは、VSCode上のエディター以外のショートカットを登録していく。
{
"key": "ctrl+h",
"command": "workbench.action.previousEditor"
}
{
"key": "ctrl+l",
"command": "workbench.action.nextEditor"
}
隣のタブに移動する設定。
ctrl+hで左へ、ctrl+lで右へ。
{
"key": "ctrl+j",
"command": "selectNextSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
}
{
"key": "ctrl+k",
"command": "selectPrevSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
}
{
"key": "ctrl+j",
"command": "workbench.action.quickOpenSelectNext",
"when": "inQuickOpen",
}
{
"key": "ctrl+k",
"command": "workbench.action.quickOpenSelectPrevious",
"when": "inQuickOpen ",
}
コマンドパレットや補完などをctrl+jとctrl+kで上下に移動する設定。
キーボードだけで操作するためには必須の設定。
{
"key": "ctrl+t",
"command": "workbench.action.terminal.toggleTerminal",
"when": "editorTextFocus"
}
{
"key": "ctrl+t",
"command": "workbench.action.focusActiveEditorGroup",
"when": "terminalFocus"
}
エディター画面とターミナル画面を行き来するコマンド。
プログラミング時などは多用する。
今回はここまでにしておく。
とりあえず、現状のkeybindings.jsonは以下の通り。
[
{
"key": "ctrl+h",
"command": "workbench.action.previousEditor"
},
{
"key": "ctrl+l",
"command": "workbench.action.nextEditor"
},
{
"key": "ctrl+j",
"command": "selectNextSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
"key": "ctrl+k",
"command": "selectPrevSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
"key": "ctrl+j",
"command": "workbench.action.quickOpenSelectNext",
"when": "inQuickOpen"
},
{
"key": "ctrl+k",
"command": "workbench.action.quickOpenSelectPrevious",
"when": "inQuickOpen "
},
{
"key": "ctrl+t",
"command": "workbench.action.terminal.toggleTerminal",
"when": "editorTextFocus"
},
{
"key": "ctrl+t",
"command": "workbench.action.focusActiveEditorGroup",
"when": "terminalFocus"
}
]
まとめ
まだサイドバーの有効な使い方などがわかっていないので、今回はそこには触れることはできなかった。
今後も継続的に調べてみて、便利な使い方やキーバインドがあれば紹介していきたい。
