Microsoftの無償コードエディタ「Visual Studio Code（VSCode）」のインストールと設定

以前から気になっていたMicrosoftの「Visual Studio」ですが、「Visual Studio Code」として無償公開されることになってから、かなりお世話になっています。

Visual Studio Code – Code Editing. Redefined
「Visual Studio Code」はWindows、Linux、OS Xで動作する軽量のコードエディタソフトウェアです。
HTML、CSSやJavaScriptなどWebフロントから、Java、PHPやC++などサーバサイドのプログラムまで、幅広いフォーマットに対応しています。

実務に導入してみた感触などをメモとして残して、評価したいと思います。
導入環境は

• Windows 11 Home 64bit
• Windows 10 Home 64bit
• Windows 7 Professional 64bit

インストール

本サイトからインストールパッケージをダウンロードして、インストーラに従いインストールします。
Visual Studio Code – Code Editing. Redefine
難しいことはありません。

機能

AtomやBracketsといったIDEは、デフォルト時に機能はほとんど備えておらず、自分が必要なものだけプラグイン（パッケージ、エクステンション）をインストールします。
一見良さそうにみえますが、プラグインの選定は意外と手間です。
同じ機能であっても複数の開発者が異なるプラグインを開発しているため、品質もばらばらであり、厳選には時間がかかります。また、さまざまなプラグインを導入する中で、組み合わせによってはショートカットコマンドが重複するなど、不具合が発生することもあります。さらにパフォーマンスの評価も曖昧なため、プラグインが増えるほど、動作が重くなります。

一方で「Visual Studio Code」では、一般的に必要と思われる機能は最初から備わっています。
その中からいくつか紹介します。

コード入力補助とチェック

HTML、CSSやJavaScriptなどのバリデーションや、JavaやPHPなどプログラムのエラーチェックも標準で機能として備わっています。
また、各言語についてコードヒント機能もあり、途中まで入力したコードから推測して、関数などの候補を補完してくれます。
さらに最近WebコーディングではスタンダードになりつつあるEmmetも標準で搭載されており、Tabキーで機能させることができます。

Git

既に環境にGitをインストールされていることが前提ですが、作成したリポジトリやクローンしたフォルダをオープンすると、Gitであることを認識して、エディタ上からコミットなどができるようになります。

おすすめの設定

VSCodeは、より自分の使い方に合った細かい設定が可能です。
メニューの「ファイル」⇒「基本設定」⇒「設定」をクリック、または、ショートカットキー「Ctl + ,」で設定画面を開くことができます。

VSCodeでは設定内容をjsonファイルで管理しており、古いバージョンでは設定を変更するためにjsonファイルを編集していました。
現バージョンではGUIで設定できます。

ご参考までに、私が実際に使用しているおススメの設定です。
設定項目は多いですが、以下のキーで検索することができます。

キー	項目	設定
Editor: Render Whitespace	エディターで空白文字を表示するかどうかを制御します。	「boundary」にすることで、文章内の単一スペースを除いた余白を可視化できます。余白ゴミの発生を防止するためです。
Editor: Tab Size	Tabのインデント幅の設定です。デフォルトは「4」で、半角スペース4つ分の幅になります。	インデントが深いソースだと横スクロールが発生しコードの可視性が悪くなるので、私は「2」に設定しています。
Files: Auto Guess Encoding	有効な場合、ファイルを開くときに文字セットエンコードをエディターが推測します。言語ごとに構成することも可能です。	未チェックのままだと、あらゆるファイルをデフォルトの文字コード（UTF-8）で開いてしまうので、それいがいの文字コードの場合、文字化けが発生してしまします。 チェック済みにすると、UTF-8、SHIFT-JIS、EUC-JPなどを自動判定してくれます。
Files: Trim Trailing Whitespace	有効にすると、ファイルの保存時に末尾の空白をトリミングします。	有効にして余白ゴミを自動削除しましょう。
HTML > Format: Wrap Line Length	自動整形のとき、1行あたりの最大文字数（0 = 無効にする）。	個人的に自動改行されると余計な差分が発生することがあるので、「0」にして無効にします。

おすすめのプラグイン

私が活用しているおすすめのプラグインをご紹介します。

全般

Git History	VSCodeにはデフォルトでgitを使用する環境が備わっていますが、その操作性や可視性は物足りないものがあります。「Git History」を導入するとログも見やすくなり、使いやすいUIが追加され操作性もアップします。
Remote – WSL	WSLで開発する方は必須でしょう。WSL上で管理しているソースの編集や、WSL上でのbashなどコマンド実行を、ローカルホストで作業しているのと変わらない操作性を提供してくれます。

PHP開発におすすめ

PHP Intelephense	PHP開発においてコードの補完や整形などサポートされており、PHP開発には必須でしょう。クラスや関数など参照元へジャンプできるのが便利です。

Vue.js開発におすすめ

Vetur	Vue.js 2開発に必須です。これがないと拡張子.vueのファイルが強調表示されません。スニペット、Emmetなどサポートしてくれます。
Volar	こちらもVue.js開発に必須のプラグインですが、公式サイトよりVue.js 3の場合にはこちらが奨励されています。