こんにちは。インフルエンザはほぼ治りました shundroid です。
もう 2017 年も終わりですね。
そこで今回は今年が終わる時点での、
ぼくの Visual Studio Code の開発環境を紹介していこうと思います。
多分これから変わることはないと思いますので・・。
コンセプト
マウスを触らない
もともとぼくは Vim というエディタで開発をしてきましたが、
auto-complete とかを入れまくったら、重くなってしまい、
ほかのエディタで Vim っぽくできないかと、Spacemacs や、Atom など試してきて、
そこで一番高速で高機能な Visual Studio Code に落ち着いた次第なのです。
マウスを触らない―それは究極の効率でコードを書くための手段。
キーボードから手を離すことによるタイムロスを防ぐことができます。
そのために工夫しているキーバインドやプラグインを紹介していきたいと思います。
プラグイン
必須プラグインです。VSCode で Vim ライクなキー入力に対応します。
またこのプラグインにより後ほどキーバインドを設定していきます。
検索や保存も完ぺきにできます。
しかしちょっと C-e C-y によるスクロールのレスポンスが遅い気がします。
それはしゃーなし。
行末のスペースを表示してくれます。
便利ですね。
VSCode をカラフルに彩ってくれます。きれいですね。
来ました神プラグイン。
User Settings や Keybindings ファイルを複数の端末で同期してくれます！
同期には Gists を使います。ロマンあふれますね。
複数のパソコンで開発する人には必須ですね。
あれ、設定したはずのキーバインドが使えねえ・・あ、こっちで設定してなかっためんどっ
っていうのがなくなります。
ぼくも壊れかけのノートパソコンでもたまに開発するので、Sync するようにしています。
Gif では手動アップロードの方法を紹介しましたが、
なんと自動同期もしてくれるんです。なんてすばらしい・・・！
この記事が詳しいので、続きはこちらをご覧ください。ありがとうございます。
その他
Vue ファイルに対応する Vetur、stylus に対応する language-stylus、
C/C++、Git Log が見れる Git History（ほぼ使用しない）を入れています。
キーバインド
Vim（vscode-vim）で、 <leader> キーを使用したキーバインドができるので、
Space キーをリーダーキーにして、
マウスを触らず、手が疲れないキーバインドを実現！！
<leader> キーを使ったキーバインドの方法
ふつう、キーバインドだと、Ctrl や Alt などを使うことが多いのですが、
キーを使うことによって、Space キーなどでキーバインドを組むことができるようになります。
右側の USER SETTINGS に、
{
"vim.leader": "<space>"
}
この行を追加します。（波かっこは不要です）
これで Space キーをリーダーキーにできました！
NORMAL MODE のキーバインドを設定する
設定とかを開きたいときって、Normal Mode のときですよね。
ステータスバーに -- NORMAL MODE -- と表示されているときです。
vscode-vim だとその時のキーバインドでは、Other Modes という類に追加するそうなので、
ためしに、otherModes のキーバインドに、 <leader> + p でファイルを開けるようにしてみましょー。
{
"vim.otherModesKeyBindings": [
{
"before": ["<leader>", "p"],
"after": [],
"commands": [
{ "command": "workbench.action.quickOpen" }
]
}
]
}
これを設定して、保存（ :w でできます）して、
Normal Mode でないときは ESC を押してから、
Spaceキー + P で、ファイルを開くあれが出てくると思います。
その他のキーバインド
ほかに、ぼくは上の要領で、次のキーバインドを追加しています。
| キー |
動作 |
コマンド |
<leader> + w + l |
右のパネルへ |
after を ["<C-w>", "l"] とする |
<leader> + w + h |
左のパネルへ |
after を ["<C-w>", "h"] とする |
<leader> + o |
Open Recent |
workbench.action.openRecent |
<leader> + s |
Show Commands |
workbench.action.showCommands |
<leader> + f |
プロジェクト内検索 |
workbench.action.findInFiles |
<leader> + d |
フォルダーを開く |
workbench.action.files.openFolder |
<leader> + b |
サイドバーの表示・非表示 |
workbench.action.toggleSidebarVisibility |
<leader> + @ |
ターミナルの表示・非表示 |
workbench.action.terminal.toggleTerminal |
command の部分を書き換えることで、様々な動作に対応できます。
また、上２つは after を使っていますが、
after を使うと、キーの動きをさらにキーの動きにして返すことができます。
例えば１番上のだと、
{
"vim.otherModesKeyBindings": [
{
"before": ["<leader>", "w", "l"],
"after": ["<C-w", "l"]
}
]
}
こうなるので、 <leader> + w + l で、Ctrl + w + l をシミュレートできるのです。
コマンドの種類は、keybindings.json に一覧が乗っているので、そちらを参照してください。
ドヤる
キーボードだけで操作しています。
実は左側のファイル一覧の画面も、Vim ライクな操作ができるんです。
あと、ステータスバーの色が insert 時変わっていますが、
それは次の設定を USER SETTINGS にすることにより変えられます。
{
"vim.statusBarColorControl": true,
"vim.statusBarColors" : {
"normal": "#005f5f",
"insert": "#5f0000",
"visual": "#5f00af",
"visualline": "#005f87",
"visualblock": "#86592d",
"replace": "#000000"
}
}
他にも、選択時・行・ブロック選択時・置き換え時も色を変えられます。
しかしまだ課題もあります。
いったん左側のサイドメニューやターミナルにフォーカスが当たると、
そこから自分で設定したキーバインドが使えなくなってしまいます。
それが直ればもうマウスとはおさらばですね！
実機テストのときはどっちみち使いますが・・・ｗ
