テキストエディタをAtomからVisual Studio Codeに移行しました

自分はずっとAtomを使っていたのですが、最近MicrosoftのVisual Studio Codeに移行しました。今回はAtomからVisual Studio Codeに移行した理由や移行の時の設定をもろもろ解説します。

移行の理由

Atomは自分がWebの勉強を始めた頃からずっと使っていましたし、かなりお気に入りのテキストエディタだったのですが、今回移行を考えた理由が「動作が重かったから」です。

前々からVisual Studio Codeが軽いという話を聞いていたのですが、根本的に使われている技術が一緒（AtomもVisual Studio CodeもElectronというライブラリで作られています）なのでそんなに大きく変わる事が無いだろうと思っていました。

しかし、いざ触ってみるとVisual Studio Codeの方が断然軽く。そのまま移行しました。

最近のコーディングはファイルをどんどん分割して管理しやすくしていくのが主流なのですが、その結果一度に大量のファイルを開いたり、大量のファイルの中から特定の文字列を探したりという事が増えてきました。

Atomだとその辺りの動作が重くてストレスだったのですが、Visual Studio Codeだと比較的軽くなりそうです。

Visual Studio Codeのインストール

code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

https://code.visualstudio.com

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

インストールはVisual Studio Codeの公式サイトからダウンロードしてインストールします。

初期設定

起動すると下の画像のような表示が出てきます。ここから初期設定をしていきます。

日本語化

まずはデフォルトだと英語だったので、日本語化の設定からしていきます。サイドバーの一番下のアイコンをクリックして[拡張機能]ウインドウを開きます。

自分の場合は開くと既に「Japanese Language Pack for Visual Studio Code」がインストールされていたのですが、まだインストールされていない人は上の検索ボックスから検索してインストールしてください。

次に、Command + Shift + Pを押してコマンドパレットを開き、「Configure Display Langage」を入力して選択します。

locale.jsonというファイルが開くので、「en」を「ja」に書き換えて保存（Command + S）。

後はVisual Studio Codeを再起動して、ちゃんと日本語になっていれば日本語化は完了です。

ユーザー設定の変更

Command + ,（カンマ）で「ユーザー設定」が開けます。
ここでVisual Studio Codeの設定が色々出来るのですが、デフォルトの状態で結構設定されていたので、ほとんど触っていません。

フォントサイズの変更

[ユーザー設定]→[よく使用するもの]でフォントに関する設定ができます。
デフォルトだとフォントサイズが12pxと小さすぎるので、14pxに設定しておきます。

1つのタブに相当するスペースの数を設定

[ユーザー設定]→[よく使用するもの]で1つのタブに相当するスペースの数を設定できます。
デフォルトだと4つだったので2つに変更しました（ここは好みやプロジェクトのルールによって設定してください）。

また、すぐ下に「Render Whitespace」という項目があるので「all」を設定しました。これで空白が可視化されるようになります。

外観の設定

[ユーザー設定]→[ワークベンチ]→[外観]でVisual Studio Codeの見た目に関する設定ができます。
自分は下記の3項目の設定を変更しました。

Color Theme：Atom One Dark
Tips：Enable
Status Bar > Feedback：Visible

テーマをAtom One Darkに変えたので、Atomを使っていた自分からするとかなり馴染みのある色になりました。

自分は最初の時点でAtom One Darkがインストールされていたのですが、もし入っていない人はサイドバーの一番下のアイコンをクリックして、検索バーから「Atom One Dark Theme」を検索してインストール出来ます。

Emmetをtabで展開

[拡張機能]→[Emmet]で「Trigger Expansion On Tab」にチェックを入れると、Emmetがtabキーを押すと展開されるようになります。

拡張機能のインストール

次に拡張機能のインストールです。
Atomではminimap等のパッケージも入れる必要がありましたが、Visual Studio Codeではデフォルトの機能として結構色々入っているので、導入したプラグインの数は以下の2つだけです（今後何かいい拡張機能が見つかれば紹介します）。

Path Intelisense

パスの入力を補完してくれます。imgタグのsrc属性なんかを書く時に便利です。
（Atomのautocomplete-pathsのVisual Studio Code版です）

vscode-icons

Visual Studio Codeで開いたファイルの拡張子を読み取り、それぞれファイルに適したアイコンをファイル名の横に表示してくれます。
サイドバーの表示もどんなファイルがあるのか視覚的に分かりやすくなるので、とりあえず入れておきます。
（Atomのfile-iconsのVisual Studio Code版です）