VimmerのVimmerによるVimmerのためのVSCode環境構築(Part2)

前回に引き続き、VimmerのためのVSCode環境構築を進めていきたい。
今回は主にタブの移動やエディター以外の部分(サイドバーやターミナルなど)との行き来について設定していきたい。

この記事の内容

拡張機能の追加
settings.jsonの設定

拡張機能の追加

前回の記事からも継続して調査を続けており、便利そうだと思った拡張を追加した。
その分をまず紹介したい。

vscode-pdf

vscode-pdf - Visual Studio Marketplace

(https://marketplace.visualstudio.com)

VSCode上でpdfファイルを開けるようにする拡張。
それだけだが、まあ便利。

Path Intellisense

Path Intellisense - Visual Studio Marketplace

(https://marketplace.visualstudio.com)

パスの補完ができるようになる拡張。
でも、たまにうまく動かないときがある。
何か設定があるのだろうか…？

Material Icon Theme

Material Icon Theme - Visual Studio Marketplace

(https://marketplace.visualstudio.com)

サイドバーのファイルツリーのアイコンをおしゃれにする拡張。
それだけだけど、見た目大事。

indent-rainbow

indent-rainbow - Visual Studio Marketplace

(https://marketplace.visualstudio.com)

インデントを色で示す拡張。
Pythonとかだとインデントがそのままforループの範囲になるなど、インデントが重要な言語などでわかりやすいのは便利。
これに慣れたらないと辛くなりそう。

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 - Visual Studio Marketplace

(https://marketplace.visualstudio.com)

括弧のペアを同じ色で表示してくれる拡張。
Goとかだと括弧が何個も入れ子構造になることが多いので、それが可視化されるのは便利。

Rainbow CSV

Rainbow CSV - Visual Studio Marketplace

(https://marketplace.visualstudio.com)

前述の2つと合わせて、可視化系拡張として紹介。
CSV限定だけど、同じ列の項目を同じ色で表示してくれる便利拡張。
これがあればわざわざExcelとかで開かなくても結構わかりやすく確認できる。

他にも入れた拡張はあるが、特定のファイル形式専用のものなのでそれはまた別途紹介したい。

settings.jsonの設定

では、前回に引き続き、settings.jsonに設定を追加していく。
今回も、各項目について内容を説明し、JSONファイル全体は最後に示すこととする。

Vimの設定

“vim.surround”: true,

この設定だけで、vim-surroundも使えることを知った。
使い方はこのページを参考にするとわかりやすいと思う。

vim-surroundでvimmerへの道を極めよう - Qiita

Qiita (https://qiita.com)

“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っぽい色にしている。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


{
    "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モードのキーバインド

1
2
3
4
5
6
7
8


{
    "before": [
        "<Enter>"
    ],
    "commands": [
        "editor.action.insertLineAfter"
    ]
}

NormalモードでもEnterキーで改行できるようにする設定。
なんとなく使えると便利。

Visualモードのキーバインド

1
2
3
4
5
6
7
8
9


{
    "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は以下の通り。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331


{
    "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上のエディター以外のショートカットを登録していく。

1
2
3
4
5
6
7
8
9


{
    "key": "ctrl+h",
    "command": "workbench.action.previousEditor"
}

{
    "key": "ctrl+l",
    "command": "workbench.action.nextEditor"
}

隣のタブに移動する設定。
ctrl+hで左へ、ctrl+lで右へ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


{
    "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で上下に移動する設定。
キーボードだけで操作するためには必須の設定。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
    "key": "ctrl+t",
    "command": "workbench.action.terminal.toggleTerminal",
    "when": "editorTextFocus"
}

{
    "key": "ctrl+t",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "terminalFocus"
}

エディター画面とターミナル画面を行き来するコマンド。
プログラミング時などは多用する。

今回はここまでにしておく。
とりあえず、現状のkeybindings.jsonは以下の通り。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


[
    {
        "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"
    }
]

まとめ

まだサイドバーの有効な使い方などがわかっていないので、今回はそこには触れることはできなかった。
今後も継続的に調べてみて、便利な使い方やキーバインドがあれば紹介していきたい。