「Vim」から「VScode」へ移行する方法を解説！

皆さんはテキストエディタ―は何をお使いでしょうか？テキストエディタは種類が多く、無料のものから有料のものまで選択肢はさまざまです。

その中でも、VimやVScodeは評判が高く、利用しているユーザーも多いと思います。特にVScodeは非常に使いやすいと評判で、Vimから移行しようと考えている方も多いです。そこで今回は、VimからVScodeへの移行方法を紹介していきます。

VimからVScodeへの移行を考えている方はぜひご覧ください。まずは、Vimとはなにか？という点を下記項目では紹介していきます。

Vimとは、”Vi”から派生した”高機能なテキストエディタ”のことを言います。高い操作性に優れており、利用者も多くいらっしゃいます。そのため、Vimの操作方法を調べればシームレスなコピペ方法や設定、その他問題点の解決法などがすぐに確認できます。

利用者が多いという点でも非常に便利なテキストエディタであり、問題点を解決しやすいのが特徴です。プログラマーであれば、一度は使っておきたいエディタです。

しかし、最近ではVScodeに移行してVimの拡張機能を入れるなどの手段をとっている方も多くいらっしゃいます。次の項目では、VScodeとはどのようなエディタか？という点を紹介していきます。確認しましょう。

上記では、Vimとはどのようなソフトか、という点を紹介しました。続いては、”VScode”とはどのようなソフト(エディタ)かという点をご紹介したいと思います。

VScodeを知ることで、Vimから移行する理由はメリットが見つかるでしょう。下記項目で詳細をご覧ください。

VScodeとは、Windowsパソコンで有名な”Microsoft社”が開発したエディタのことを言います。Windowsはもちろん、Linux、Macパソコンでも動作する有能なエディタです。

Vimも非常に有能なエディタですが、このVScodeも最近では注目を集めています。VScodeの方が起動時間が早かったり、拡張機能を導入することである程度Vimに近い使用感を得られるのです。

Vimの拡張機能や、設定などを変えることでシームレスなコピペやその他機能が便利に利用できます。Vimの拡張機能が導入できるという点で、VimからVScodeに移行する方が多いようです。

上記では、VimとVScodeの詳細情報をお伝えしました。どちらもテキストエディタとしては優秀です。なぜ、「VimからVScodeへ」の移行を検討するのか、その理由をこの項目では明確にしていきます。

上記の詳細情報だけでもVimから移行するメリットは見えましたが、より明確にメリット等を確認しておきたいという方は、下記の項目を見ていきましょう。移行準備に取り掛かりたい方は、ここを飛ばしてもらっても構いません。

VimからVScodeに移行する主な理由を確認していきましょう。主な理由としては、やはり”VScodeの使い勝手の良さ”や”Vimの拡張機能による環境の再現性の高さ”が挙げられます。詳細を下記でご覧ください。

まず理由として一番に挙げるのは、VScodeの使い勝手の良さです。無料で導入できるテキストエディタなのに、使い勝手もよく他のエディタと比べて起動が早いという魅力があります。

また、UI/UXも近代的で、作業をしていて楽しいといった声も見かけます。Microsoftという信頼性のある会社が開発しているということもあり、Vimからの移行を検討するユーザーが多いようです。

Vimから移行する理由として、”Vimの環境の再現性が高い”ことも挙げられます。VScodeはVimだけでなく、ほとんどのエディタの開発環境を再現できると言われています。

人気エディタであるVimも、再現するための拡張機能や設定方法が多く登場しています。問題の解決法も先人達の知恵により、「調べれば出てくる」といった初心者にとってありがたいメリットもあります。

シームレスなコピペやコロン、セミコロンの入れ替えなども、細かく設定を変更することで自分にとって作業しやすい開発環境が整うでしょう。

上記では、VimからVScodeに移行する主な理由を紹介しました。Vimの環境再現が出来るという点は、非常に高いメリットかと思います。元々Vimを使っていた方でも、移行後スムーズな作業が拡張機能や設定等で可能になるでしょう。

続いては、VimからVScodeに移行する前の”事前準備”を確認していきたいと思います。VimからVScodeに移行するためには、まずVScodeに関する知識を多少は頭に入れておかなければなりません。

VScodeの公式に記載されていることを事前に読んだ上で、基本的な知識を下記項目で確認していきましょう。

VScodeの基本知識を、下記項目で確認していきましょう。それぞれ詳細をご覧ください。

”Shift + Command + E”で開くことが可能です。Explorerでは、開いているディレクトリ配下のファイルをツリーの表示形式で出してくれます。

”Shift + Command + F”で開くことが可能です。Searchでは、ディレクトリ配下を基準に”横断的”にファイル検索をおこなうことができます。検索で出たファイルと場所をそれぞれ表示してくれます。

”Shift + Control + G”で開くことが可能です。VCS/Gifをはじめとしたバージョン管理ツールの利用ができます。

”Shift + Command + D”で開くことが可能です。Debugでは、エディタ上のデバッグ実行、外部とのデバックツール連携を可能にります。.vscode/launch.json を編集することでカスタマイズもできます。

”Shift + Command + X”で開くことが可能です。Extensionsは、VScodeの提供する拡張機能インストールができます。しかしそこまで頻繁におこなう操作ではないので、必要のある方だけ覚えておくと良いでしょう。

”Shift + Command + M”開くことが可能です。PROBLEMS Panelは、エラー、警告表示をしてくれます。同じショートカットを実行することで閉じることができます。

”Shift + Command + U”で開くことが可能です。実行時の出力などを表示することができます。

”Shift + Command + Y”で開くことが可能です。デバッグ用のコンソールを表示することができますが、自分で開くことがあまりないので覚える必要はあまりないかも。

”Control + `”で開くことが可能です。その名の通り、ターミナルを表示することがでいます。

”Shift + Command + P”で開くことが可能です。このショートカットを実行することで、コマンドパレットが開けます。VScodeの機能を呼び出すことができるので、VimからVScodeへ移行する時は特に覚えておきたいショートカットかもしれません。

その他補完としては、下記の内容を覚えておくと良いかもしれません。
 

上記では、VimからVScodeに移行するための事前準備として、VScodeの基礎知識を紹介しました。続いては、VimからVScodeに移行するために”インストール”をおこなっていきます。

下記でインストール方法、またインストール後の基本設定などを見ていきましょう。

インストール方法や手順については、上記リンクに記載したリンクをご参考ください。VScodeのインストール、リロードに続き”VScodeVim”が自動的に有効化されます。

VScodeVimをインストールした後、行っておきたい基本設定は以下のとおりです。他にも基本設定として紹介できるものは多くありますが、それについては上記のリンクからご確認ください。
 

VimからVScodeに移行するための事前準備、インストールを経たら次は”設定”をおこないます。Vimのプラグイン(拡張機能)が有効にならない方は、Toggle Vim Modeでプラグインを無効にしていたり、ユーザー設定の誤りがある可能性があります。

まずはVimプラグインを有効にして、以下の設定手順を確認してみましょう。

設定としてご紹介するのは、同期や機能の有効化などです。下記で設定方法を紹介しております。Vimから移行する方は、参考にしてください。

まず紹介するのは、”無名レジスタとクリップボードの同期”です。コピペの内容を同期するため、下記の設定を実行してください。
 

検索結果をハイライトさせたい場合は、下記の設定を実行してください。この設定はおこなっておかないと不便かと思います。
 

次に設定するのは、”カーソル配下の文字列検索”です。”*”キーや”#”キーで、カーソル配下の文字列を検索することができるようになります。下記の設定を実行してください。
 

続いては、”EasyMotionの有効化”です。これはキータッチを数回おこなうことで、どこにでも移動できるというVim特有のプラグインは中々便利な機能です。以下の設定を実行することで、似た様な機能を利用できます。
 

続いては、”Leaderの設定”です。Vimと同じように、VimプラグインではLeaderを使用してキーバインディングができます。設定に関してはどのキーに割り当てるかで決まってきます。
 

最後にご紹介するのは、”Neovimの有効化”です。下記の設定を実行してください。normコマンドを実行するためにインストールして実行するのですが、”noem.”には対応していないようです。
 

上記では、VimからVScodeに移行するためにインストールしたVimのプラグイン、設定に関して紹介をおこないました。Vimから移行する場合は確認しておきましょう。

しかし、Vimのプラグインが”有効になっていない”時はどうすれば良いのでしょう。Vimのプラグインが有効になっていない原因の多くは、上記でも述べた通りユーザー設定の誤りです。

この項目では、VimからVScodeに移行するために覚えておきたい”ユーザー設定”の手順をご紹介したいと思います。確認しましょう。

この項目におけるユーザー設定とは、VimのプラグインではなくVScode側の設定のことを指します。下記で内容の確認、また設定の追加をおこなってください。

スニペットは、デフォルト設定のままだとVimから移行した時に使いづらいです。スぺニットの候補が出ない、またワンキーで展開することができないなどの問題があります。解決法として、下記の設定を追加してみてください。
 

続いて、テーマの設定です。テーマに関してはVimと同じ、”Monokai”を使います。
 

続いてはターミナルです。こちらもデフォルト設定から変更する必要があります。下記の設定で、コマンドプロントを使用してください。
 

続いては下位行コードです。下記の設定で、規定の開業コードを”LF改行”に変更します。
 

次に、文字コードの設定です。文字コードに関しては、推測変換をONにしておきます。
 

最後に設定したいのは、”ミニマップ”についてです。ミニマップに関しては、ミニマップスライダーは”常に”表示・ミニマップ内の文字を”真面目”に表示しないに変更します。
 

上記では、Vimから移行すうためにVScode側のユーザー設定をおこなう方法を紹介しました。ユーザー設定に誤りがあると、Vimのプラグインが正常に動かないこともあるのでお気を付けください。

続いては、Vimの”拡張機能”に関する情報をお伝えしたいと思います。Vimの環境再現を構築するために、必要不可欠なプラグイン(拡張機能)を導入しましょう。

インストールは”code --install-extension”のコマンドを実行します。すでにインストール済の場合は実行されません。

拡張機能の設定をおこなっていきましょう。下記では機能の内容と、リンクを記載しています。それぞれご覧ください。

Git Historyは、VScodeで”Get”の履歴を参照することができるプラグインです。下記ページから導入しましょう。

こちらはGitプラグインで、多機能なため入れておくことを推奨するプラグインです。エディタ上に更新内容を表示したり、ファイルの履歴確認などをおこないたい場合には入れておきましょう。

Code Runnerは、コードスニペットに対して実行をおこなうプラグイン。文法やライブラリの挙動確認などに利用することができます。

上記のプラグインは、VScodeを日本語化することができるプラグインとなります。このプラグインは使用しているOSが日本語なら、自動でインストールを推奨されるので問題なく導入できるかと思います。

Paste JSON as Codeは、JSONから各言語の”スキーマ定義”を作成することができるプラグインです。

上記のプラグインは、指定範囲に”シェルコマンド”を実行することができるプラグインです。

上記プラグインは、”日本語”に最適なカーソル移動を提供してくれるというプラグインです。日本ユーザーにとってはメリットの高いプラグインなので、入れておきましょう。

最後に紹介するのは、Markdownを書く時に必須のプラグインになります。Table Formatterです。テーブルをフォーマットしてくれるプラグインです。

続いては、VimからVScodeに移行するための”細かな設定方法”についてお伝えしていきます。細かな設定では、コロンとセミコロンの入れ替えやシームレスなコピペ設定、relativenumberなどを紹介していきます。

特にシームレスなコピペ設定などは実行しておきたい設定かと思います。細かい点の解決法を下記で確認していきましょう。

細かな設定の解決法として紹介するのは、”コロン/セミコロンの入れ替え、シームレスなコピペ、relativenumber、ノーマルモードのエンターの挙動”などです。下記で詳細を確認しましょう。

まずはコロン/セミコロンの入れ替え方法についてです。コロン/セミコロンの入れ替えに関する解決法は以下のとおりになります。
 

入れ替えに続き、設定しておきたいのはシームレスなコピペです。yankして別のアプリケーションにコピペしたり、別のアプリケーションからコピペしたりといったシームレスなコピペを行えるように設定します。解決法は以下のとおりです。
 

続いては”relativenumber”です。Vimにはset number、set relativenumberという項目があります。relativenumberは行きたい行に一瞬で移動ができるので、入れ替え・シームレスなコピペに続いて設定しておきたい項目と言えます。

Vimから移行する場合は、relativenumberの設定を間違いなくしておきましょう。relativenumberの解決法は以下のとおりです。確認しましょう。
 

続いては、ノーマルモードのエンターの挙動についてです。エンターキーを押すだけで改行挿入できるように設定をおこないましょう。
 

次ぐに、行末/行頭の間をスムーズに移動する設定方法です。コロンとセミコロンの入れ替え同様に、スムーズに操作をおこなう上で設定したい設定内容です。
 

余分なスペースの対処をおこなう方法です。解決法としては、VScodeで設定して削除するのが手っ取り早いです。
 

次に、tabとspaceの適切な表示です。こちらもVScodeの設定で解決することができます。
 

次に、単語や単位の移動、それに対する正しい区切りについてです。これに関しては個人設定ファイルに追記をおこなう必要があります。
 

マウスとトラックパッドを使わない移動の設定方法です。これについてはいくつかありますが、まずはEditor内移動とEditor間移動についてを下記では紹介します。

追加に関しては”Default Keybindings”の設定から抜粋したものと、追加先が”CLI”のものを下記で記載します。
 

Side Bar/Editor間の移動は、現時点では解決方法が見つかっていないのが現状です。File Openはcommand + Pde大丈夫そうですが、中々難しいところです。

Panel/Editor間の移動なら、keybindings.jsonに追記をおこないます。
 

細かい設定、解決法を紹介しました。まだ完全に解決できない項目もありますが、分かっている項目に関しては設定の追記、変更をおこなっておくと良いでしょう。

特にコロンとセミコロンの入れ替え、シームレスなコピペ、relativenumberの3つは個人的に必須の設定かなと思います。relativenumberなんかは非常に便利なので、設定をおこなっておきましょう。

最後はVimキーバインドに関する情報です。確認しましょう。

VimからVScodeに移行するなら、Vimのキーバインドは使うべきと言われています。キーバインド使用の主なメリットを下記で確認しましょう。

まずVimでは、ほとんどの作業において範囲選択をおこなう必要がありません。厳密にいうと完全にないという訳ではないのですが、タイプするだけで単語が切り取れたりするので便利です。

Vimでは、”hjkl”がカーソルの代わりとなってくれます。行内で”F → 目的の文字”でカーソルジャンプがおこなえるので、使い方は覚えて損はないでしょう。

下記ではキーバインドの設定を紹介しています。確認しておきましょう。
 

今回の記事では、VimからVScodeに移行する方法を紹介しました。拡張機能についてやコロンとセミコロンの入れ替え、シームレスなコピペ、relativenumberなどの細かい設定です。

そしてキーバインドに関する設定など、それぞれ確認はできましたでしょうか。細かい設定などその他項目に関してはまだ未解決の問題があるものの、ある程度VScodeでVimが使えるようになるのでおすすめです。

VimからVScodeへの移行を考えている方は参考にしてください。