EmacsからVSCodeへメインエディタを変更するときの備忘録

これまで、10年以上Emacsを使ってきました。途中、SublimeTextを使ったり、VSCodeを使ったり、Atomを使ったりとエディタ難民をしていた時期もあります。
そんな自分ですが、これからIT技術教育者の立場になることもあり、受講者に推奨するVSCodeをメインに変更することに決めました。

長年連れ添い、慣れ親しんだエディタから離れるというのは存外寂しいものです。Emacsに関する熱いコンテンツを書いたこともあります。
しかしながら、「停滞は後退と同じである」という考えのもと、自らを新しく成長させる良い機会としてトライしてみます。

Visual Studio Code(VSCode)とは

WindowsやOffice、Azureといった世界的に有名な製品を手掛けるMicrosoft社が開発するコードエディタです。ときどきIDE（統合開発環境）と勘違いされている人がいますが、最初から多くのツールが入ったIDEと違い、VSCodeは自分でカスタマイズする前提です。

VSCodeは、そのカスタマイズ性から現代的なコーディング作業において、多くの恩恵を受けられるのでメリットを紹介しておきます。

VSCodeを使うメリット

これだけ見ても十分すぎるほど高機能であることがわかります。そして無料です。

VSCodeはどういう人が使うべきか

次に、VSCodeを選ぶべき対象者について列挙します。

ほぼすべてのエンジニアといっても過言ではない対象者です。
少なくとも、リモートサーバに入って黒い画面で作業し続ける伝統的なインフラエンジニア以外はVSCodeが主戦場になります。

ただ、あくまでもスタンドアロン型アプリケーションです。容量が限られている環境（マイコンやサーバ等）ではviやVim、Emacsを使うことになるので、そういった由緒正しいエディタの使い方もタイミングで覚えておきましょう。

【初めての人用】VSCodeセットアップ

というわけで早速VSCode環境を作っていきます。
今回は最低限、業務遂行できる程度の環境ということでミニマムに仕上げますので、その後は自由にカスタマイズしてみてください。

VSCodeのインストール

以下のリンクからダウンロードしましょう。
お使いのOSに応じたリンクが表示されるはずですが、そうでない場合はページ下部にOSごとのリンクがあるので、そこからダウンロードしてください。

VSCodeダウンロードリンク

macOSでダウンロードするとzip形式なので解凍すればそのまま使えます。

VSCode画面説明

ダウンロードしてVSCodeを起動したら以下のようなWelcome画面が表示されます。
日本語ユーザーの人は右下の「インストールして再起動」を押して日本語化しましょう。

VSCode初期画面

まずは基本的な画面の見方について説明していきます。

ファイルエクスプローラー

左側のファイルアイコンで開くエクスプローラーは、「自分のパソコン内のフォルダを探索するメニュー」です。
ここからファイルを開くことで編集画面に入れます。基本的なコードエディタとして機能はここで完結できます。

ファイルエクスプローラー

ファイル検索

左側の虫眼鏡アイコンは「フォルダ内に存在するファイルを検索・置換できるメニュー」です。
検索も爆速な上、置換までその場で実行できる非常に便利なツールです。

ファイル探査

ソース管理

左側のノードがつながったアイコンは「Gitをベースにしたソース管理ができるメニュー」です。
Git管理しているフォルダを開いた状態であれば、以下の画像のように変更点が反映されています。（現在、ちょうどこのコンテンツを書いているため変更として表示されています）

ソース管理

実行とデバッグ

左側の三角アイコンは「ファイルの実行とデバッグができるメニュー」です。
試しに簡単なJavaScriptコードを書いて見ると、以下のように `console.log(Hello VSCode!);** とデバッグコンソールに表示されました。

デバッグと実行

拡張機能

左側の四角形が連なったアイコンは「拡張機能をインストール・管理できるメニュー」です。
ここから必要な拡張機能を取得できます。

拡張機能

一個だけ必ず覚えておきたいコマンド

VSCodeにはいくつものコマンドがありますが、コマンドパレットはよく使うことになるので覚えておきましょう。
基本は全共通でF1キーを使って開けます。以下はファンクションキーがない場合です。

macOSの場合

Windows/Linuxの場合

コマンドパレットでVSCodeの設定ファイルを司るsettings.jsonを開きたい場合、コマンドパレットを開いてOpen User Settings(JSON)ですぐに開けます。

VSCodeをミニマム仕様にする

ここからは自由にカスタマイズする流れになります。
自分が使いたい拡張機能を入れ、設定を自分好みに変えていけばOKです。

例として、自分がどういう設定をしたかを掲載しておきます。
もともとEmacsを使っていたこともあり、できるだけ画面がすっきりした状態にしたいのでミニマム仕様に設定しました。

いくつかのUIを消し去る

デフォルトの画面はどことなくごちゃっとしたように見えて、それが好みではなかったので非表示化することに決めました。
以下、それを実行した設定です。

これでだいぶすっきりしました。
ここまで実施すると、ファイルエクスプローラーがなかったりして操作に支障が出るという人は適宜調整してください。自分の場合は、⌘ + Pでファイル検索したほうが速いのでこうしています。拡張機能を追加したい場合はコマンドパレットからInstall Extensionsで検索すると出てきます。

インストールしたい拡張機能は省略

別コンテンツとして書く予定ですが、このコンテンツでは拡張機能のおすすめについては割愛します。
というのも、使っている言語やフレームワーク、そしてチーム開発におけるコード制約など、おすすめしたからといってその人に合うかはわからないという現実があります。

とはいえ、おすすめしたい拡張機能はいくつかありますので、しっかりと「どういう人が使うべきか」も含めてしっかりレビューしたコンテンツを近日公開するので楽しみにしていてください。

EmacsからVSCodeへ移行した感想

今回、VSCodeのコンテンツを書きながら触ってみましたが、どうやら仲良くなれそうです。
さすがにEmacsキーバインドに慣れすぎたおかげで、VSCodeもかなりEmacsの仕様に近づけてしまっていますが、これがあるだけで移行の心理ハードルがかなり下がりました。

VSCodeはTypeScriptで拡張機能を作れるということもあるので、lispで拡張機能を作るよりもシンプルに書けることも自分にとって大きなメリットでした。
もし現在VSCode移行を悩んでいるEmacsenやVimmer、そしてこれからエディタ選定をしようとしているエンジニアの方がいたら強くおすすめします。