Visual Studio Codeに乗り換えて良かったこと

この記事の目次

昨年までマークアップするときのエディタとしてAtomを使っていましたが、今年からVisual Studio Code(以下、VS Code)を使うようになりました。今回は、VS Codeの魅力を伝えたいと思います。

また、この記事ではVS Codeのバージョン1.25に合わせて説明していきます。

VS Codeとは

VS Codeとは、Microsoftによって開発されたソースコードエディタです。Atomと同じくElectronを使用しているため、Windows・Mac・Linuxで利用することができます。

VS Codeの特長

軽い!

Atomから乗り換えた一番の理由は、VS Codeの軽さです。私の知り合いでも「Atomが重くてVS Codeに乗り換えた」という人が多かったので、私も乗り換えました。

日本語で表示される

以前までは、VS Codeをインストールした時点で日本語で表示されていました。ただ、現在でも、インストールした後に起動すると、以下のような表示が出てきます。

[インストールして再起動]ボタンをクリックすると、言語パック「Japanese Language Pack for Visual Studio Code」がインストールされて、日本語表示になります。

デフォルトの機能が充実している

VS Codeをインストールすると、既に下記の機能が実装されています。

  • IntelliSenseと呼ばれる入力支援機能がある
  • Gitと連携し、基本的な操作ができる
  • VS Code内でターミナルを起動できる
  • Emmetを使うことができる
  • ミニマップが表示される
  • エクスプローラーにファイルアイコンが表示される
  • 矩形選択ができる

Atomであれば拡張機能をインストールしなければいけない機能もあります。そう考えると、VS Codeは標準でも充分な機能が備わっています。

今後の進化が期待できる

Atomではタブをドラッグ&ドロップすることによって画面分割をすることができますが、私がVS Codeに乗り換えた当初(2018年1月頃)はそれができませんでした。しかし、2018年6月のアップデートで、VS Codeでもドラッグ&ドロップによって画面分割ができるようになりました。

リリースノートを見れば分かるように、毎月のようにアップデートされています。今後の進化にも期待が持てます。

また、冒頭でVS Codeのバージョンを記載しました。これは、アップデート(新機能の追加、不具合の修正)が頻繁にあり、バージョンによって仕様が異なるためです。もし他のサイトでVS Codeについて調べる際は、そのバージョンをチェックすることをオススメします。

ユーザー設定と拡張機能の追加

VS Codeの設定をおこなう前に、ユーザー設定と拡張機能の追加の方法をご紹介します。

ユーザー設定

Macの場合は「Command + ,」、Windowsの場合は「Ctrl + ,」でユーザー設定を開くことができます。

左側に[既定のユーザー設定]、右側に[ユーザー設定]が表示されます。設定は、右側の[ユーザー設定]に記述します。

拡張機能の追加

  1. エディタの左側にあるアイコンの上から5つ目をクリックします。
  2. 拡張機能サイドバーの検索窓に拡張機能の名前を入力します。

コードの可読性を良くする設定

エディタを乗り換える際には、まずコードの可読性を良くすることから始めます。コードが読みやすくなることは、ミスの軽減や作業の効率化につながるので、とても重要です。

フォント

フォントは、日本語にも対応したコーディング用フォント「Source Han Code JP」を使用します。

  1. 以下のURLから「Source Han Code JP」をダウンロードし、PCにインストールします。
    https://github.com/adobe-fonts/source-han-code-jp
  2. [ユーザー設定]に以下の記述を加えます。

"editor.fontFamily": "Source Han Code JP",

配色テーマ

配色テーマは人によって好みが分かれると思います。VSCodeThemesに多くの配色テーマがまとめられているので、自分の好みに合ったものが見つかると思います。

私は、Atomを使用していたときから使っていた「One Dark Pro」を配色テーマとして設定しています。

  1. 拡張機能から「One Dark Pro」をインストールし、再読み込みします。
  2. [ユーザー設定]に以下の記述を加えます。

"workbench.colorTheme": "One Dark Pro",

スペースとタブの表示

コードに記載されているスペースとタブを表示するために、[ユーザー設定]に以下の記述を加えます。


"editor.renderWhitespace": "all",

便利な拡張機能

拡張機能をインストールすることで、より効率的にコーディングをおこなうことができます。

Auto Rename Tag

URL: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

対応する開始タグと終了タグを同時に編集することができます。

EditorConfig for VS Code

URL: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

EditorConfigをサポートする拡張機能です。.editorconfigファイルは、エディタのインデントや改行コードなどを設定することができ、共有することで異なるエディタでもスタイルを統一することができます。

html tag wrapper

URL: https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper

HTMLコーディングの途中で、複数の要素を一括してラップするタグを追加したい時に便利です。

Project Manager

URL: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

複数のプロジェクト(フォルダ)を管理するのに便利です。

Path Intellisense

URL: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

パスやファイル名の入力を補完してくれます。

Settings Sync

URL: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Gist経由で設定ファイルを同期することができ、他の端末でも同じVS Codeの環境を簡単に構築することができます。同期されるのは、ユーザー設定・拡張機能・スニペットなどです。

設定方法は、Settings Syncの「Steps To Get a Personal Access Token from GitHub」に記載されています。

さいごに

ここまで、VS Codeの魅力に加えて、コーディング作業を効率化するユーザー設定や拡張機能についても触れました。

エディタを変更する際は、操作方法やショートカットキーを覚えなおす必要があり、新しいエディタを使いこなすまでに学習コストがかかります。ただ、個人的にはVS Codeに乗り換えてコーディングが捗るようになったと感じていて、学習コストを加味してもVS Codeに乗り換えて良かったと思っています。

この記事が、他のエディタからVS Codeへ乗り換えるキッカケになれば嬉しいです。

参考URL