Quantcast
Channel: Vimタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 5655

普段使いのVimの使用感により近づけるためにVSCodeの設定を考えてみた

$
0
0

はじめに

こんにちは。普段はNeoVimで開発していますがふとVSCodeで開発したい場面が出てきたので、設定した内容を書いていきます。
ちなみにNeoVimは、プラグインを90個ほど入れているのでそのプラグインの機能を実現することにも着目していきます。
なお機能によって、setting.jsonに書くか、keybindings.jsonに書くかが変わるので、ファイル名で区別してください。

基本的な設定

まず以下のVSCodeのextensionを入れます。これで大体のVimの機能は入ります。

https://github.com/VSCodeVim/Vim

後は、extensionを入れると付いてくるplugin達を有効にしていきましょう。

settings.json
//vimplugins"vim.easymotion":true,"vim.surround":true,"vim.sneak":true,"vim.camelCaseMotion.enable":true,"vim.replaceWithRegister":true,

使い方はREADMEに書いてあるので詳しくは触れませんが、普段Vimを利用している人は大体入っているpluginが多いかなと思います。
後は細かい設定をしていきます。

settings.json
//commonconfig"vim.visualstar":true,//*で検索できるようにする"vim.useSystemClipboard":true,//クリップボードを利用できるように"vim.useCtrlKeys":true,"vim.hlsearch":true,"vim.incsearch":true,"vim.highlightedyank.enable":true,//vim-highlightedyankと同じ機能"vim.highlightedyank.duration":500,"vim.leader":"<space>",//leaderキーを設定

Tabをやめて、Bufferライクな操作感を実現する

まずTabは基本的に利用しないので、機能自体をoffにします。
Tabを利用したい人もいるとは思うのですが、自分が今どれくらいのファイルを開いているのかがわからない点が個人的にきついので、Tabは利用しません。

settings.json
//tabs"workbench.editor.tabSizing":"shrink","workbench.editor.tabCloseButton":"off","workbench.editor.showTabs":false,

そして以下の拡張を入れて、直近開いたファイルから検索をする形式を取ります。

https://marketplace.visualstudio.com/items?itemName=junv.recent-files

僕は以下のように設定をしています。

settings.json
"vim.normalModeKeyBindingsNonRecursive":[{"before":["<leader>",";"],"commands":["extension.openRecentFiles"]}]

leader + ;で直近開いたファイルのリストが開きます。

register 0の内容をpasteする

VSCodeでも同様の処理ができそうだったので、そのまま以下のように追加しました。
ちなみに0には、yankした内容が入っておりdeleteした内容は1から順番に入っていくので、常にyankされた内容をペーストできます。

settings.json
//visualmodeのkeymapにも加えとくと楽です"vim.normalModeKeyBindingsNonRecursive":[//paste0register{"before":["<leader>","p"],"after":["\"","0","p"]},{"before":["<leader>","P"],"after":["\"","0","P"]}]

ファイル検索、プロジェクト内検索

Vimを利用している時、ファイルを開いたりプロジェクト内を全部検索したりするのはFZFを利用していたのですが、VSCodeではデフォルトのものを利用しようと思います。
以下のように設定をしました。

settings.json
"vim.normalModeKeyBindingsNonRecursive":[{"before":["<leader>","t"],"commands":["workbench.action.quickOpen"]},{"before":["<leader>","a"],"commands":["workbench.action.findInFiles"],"when":["!searchInputBoxFocus"]},]

検索サイドバー内でも、デフォルトでjkなどで動けるようなのでそこまで不自由はしないかなと思いました。

File Explorerを開く

NeoVimでは<Leader> + ddefx.nvimというFile Explorerを開くようにしていたので、VSCodeでも同じようにしました。

settings.json
"vim.normalModeKeyBindingsNonRecursive":[{"before":["<leader>","d"],"commands":["workbench.view.explorer"]}]

VSCodeのFile Explorerもhjklで移動できるので、使用感はそこまで変わらずに使用できました。

vscode-accelerated

accelerated-jkと同等のものがVSCodeにあったので、以下のものを入れました。

https://github.com/ypresto/vscode-accelerated

設定はREADMEに書かれているので、それを書いたら動くと思います。

vscode-partial-diff

linediff.vimと使用感は少し違いますが使いやすそうな、Partial Diffを利用しました。

https://github.com/ryu1kn/vscode-partial-diff

そしてREADMEに書かれていますが、以下のような設定をしました。

keybindings.json
[//PartialDiff{"key":"ctrl+1","command":"extension.partialDiff.markSection1","when":"editorTextFocus"},{"key":"ctrl+2","command":"extension.partialDiff.markSection2AndTakeDiff","when":"editorTextFocus"},]

tips: VSCodeのextensionを管理する

project rootに.vscode/extension.jsonを置くと、projectごとにinstallするextensionを管理できるらしいが、普段使いする際には一回installしてしまえば良いので、今回はCLIでinstallをします。

参考: https://code.visualstudio.com/docs/editor/extension-gallery

以下のようにMakefileを定義してやって、vscode_extensions.txtを更新してやるようにしました。

Makefile
update_vscode_extension:
    rm script/vscode_extensions.txt && code --list-extensions> script/vscode_extensions.txt

そして実際にinstallする時は以下のようなscriptを利用して、installします。

cat'./script/vscode_extensions.txt' | xargs -I% code --install-extension %

終わりに

VSCodeでの開発に少し抵抗感があったのですが、そこまでpluginなど入れなくても普段使いのVimに近づけるんだなと感動しました。
欲を言うと、検索だったりターミナルをfloating windowで頼みたいがさすがに無理っぽい

参考: https://oita.oika.me/2018/12/14/vscode-floating-window/

設定ファイルは一式は以下の箇所に置いています。
https://github.com/mitubaEX/dotfiles/tree/master/.config/Code/User

非常に参考になった記事

大体の設定は以下にあるので、適宜もらっていってください


Viewing all articles
Browse latest Browse all 5655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>