はじめに

Visual Studio Code（以下、VS Code）は優れたコーディングツールとして、開発者に多くの新機能をもたらしてきました。しかし、全ての開発者がソフトウェアの更新内容を毎回詳細に検討しているわけではないことは承知しております。本稿では、開発作業をより快適にするための新機能について、皆様のご参考となるよう要点をまとめてご紹介いたします。ご注意いただきたいのは、本稿が作成された時点でのVS Codeの最新バージョンは1.85であるため、ソフトウェアのアップグレードを先に実施していただくことをお勧めします。

バージョン情報の確認方法は、エディターの左上隅に位置する「Code」メニューから「Check for Updates」を選択することにより、利用可能な更新の有無を確認することができます。ただし、Macユーザーは自動更新が失敗する可能性があるため注意が必要です。更新が失敗した場合、VS Codeがapplicationフォルダ内に正しくインストールされているかを確認してください。もしダウンロードフォルダにインストールされていた場合は、アプリケーションを選択し、applicationフォルダにドラッグし、VS Codeを再起動してください。これで準備は完了です。

お勧めの新機能

ツリービューの検索結果

Search機能は日常的な開発作業で非常に頻繁に使用される機能ですが、今ではマッチング結果をツリー形式で表示するようにサポートされています。マッチング結果が多い場合でも、ディレクトリの階層構造や分布状況が明確にわかります。また、ツリーアイコンをクリックしてツリービューまたはフラットビューの切り替えも可能です。この機能は追加設定不要で更新時に自動的に提供されます。

gitの衝突サポート三ウィンドウマージモード

初期段階におけるコード競合の解決方法として広く知られているのは、<<<<<<< HEAD (Current Change)というマーカーを用いた方式です。この方式では、現在の変更がマーカーの上部に、他者の変更が下部に表示され、競合するコードを比較し、削除することで解決を図ります。後続バージョンでは、VS Codeには3つのウィンドウで衝突を解決するモードが追加されました。

この機能を有効にするには、左下隅にある設定アイコンをクリックしgit.mergeEditorと入力した後、表示されるチェックボックスをオンにする必要があります。

競合を解決した後、、三つのウィンドウモードになります：

上部の2つのウィンドウは、他の人とあなたの競合しているコードを示しております。必要なコードバージョンを選択する際にはチェックボックスを使用することができます。選択されたコードの結果は、画面の下部に位置する第3のウィンドウに表示されます。もちろん、最終的に予定されたコードを編集するためには、第3のウィンドウで作業を行うことが可能です。このプロセスの詳細については、実際にご自身で操作を体験し、その機能性をご確認ください。

VS Codeは当初、この三つのウィンドウを用いる競合解決機能をデフォルトで提供することを計画していました。しかし、リリース後に多くのユーザーが以前の解決策をよりシンプルで直接的だと感じたため、習慣の変更は難しいという実情を踏まえ、公式バージョン1.72.0ではgit.mergeEditorをデフォルト設定falseに変更しました。のデフォルト設定をfalseに変更しました。この変更の具体的な理由については、Issue Change default git conflict experience to be the inline editorをご参照ください。もし以前に設定を行っていなかった場合でも、競合が発生した際に画面右下隅にある「Open in Merge Editor」ボタンをクリックすることで、三つのウィンドウ表示モードを利用することが可能です：

実は、これら2つのモードはシームレスに切り替えることが可能です。具体的な操作手順については、後述する画面録画をご参照ください。なお、VS Code公式情報によれば、3つのウィンドウを統合する機能は今後も改善されていく予定ですので、その操作を理解することが重要です。

Searchは複数選択操作可能

前述のように、Search機能はツリー形式で展開された検索結果をサポートしていますが、それ以外にも以前のバージョンでは、検索結果ファイルの複数選択による置換や削除がサポートされていました。たとえば、12個の条件に合致するファイルが見つかった場合、そのうち3つを一括で置換したいときは、command（mac）またはctrl（windows）キーを押しながら対象のファイルを選択し、選択されたファイルに対してreplaceやdeleteの操作を行うことができます。

ただし、ここでいう「delete」とは実際にファイルを削除するわけではなく、この検索結果から特定のファイルを非表示にするために使用されることにご注意ください。

ローカルフォルダの検索

Search 機能に関しましては、グローバル検索の利便性は広く認識されております。ただし、現在特定のディレクトリ内で一致するコンテンツを検索したい場合はどうすればよいでしょうか？対象とするフォルダディレクトリを選択した後、command/ctrl + Fキーを押して検索窓を開き、検索したいパターンを入力します。この操作によって、選択中のディレクトリ内でのみ検索結果が表示されます。

もしディレクトリ内に複数のサブディレクトリが存在しており、一部の結果が見えにくくなる場合は、検索窓の右側にあるフィルターボタンをクリックすることで、VS Codeがそのディレクトリ内にある一致する全ての結果を明示的に表示します。具体的な操作方法は以下の画面録画を参照してください：

バージョン1.72.0におきまして、検索ボックスの配置をユーザーのご都合に合わせて自在に変更できるドラッグアンドドロップ機能が導入されました。これにより、検索結果の可視性が向上し、表示の妨げとなる問題が解消されております。

スティッキースクロール

数千行のコードをスクロールする際に現在の関数やコンテキストを見失わないようにするために、スティッキースクロールという機能が提供されております。この機能を有効にするには、設定センターで「stickyScroll」を検索し、表示されたチェックボックスをオンにしてください。これにより、スクロールしても現在の関数が画面上部に固定されるため、コードのどの部分を編集しているかが一目でわかるようになります。

タブの折り返し表示

プロジェクトの進行に伴い、開かれたタブの数が増加し、ファイルの検索が困難になることがあります。VS Codeはバージョン1.53より、タブの折り返し表示機能をサポートしており、この機能はタブが画面の幅を超えた際に自動的に次の行に折り返すことを可能にします。

この機能を有効にするには、設定画面で workbench.editor.wrapTabs を検索し、該当するオプションにチェックを入れてください。これにより、多くのファイルが開かれている状況でも、タブが複数行にわたって表示され、ファイルの識別と選択が容易になります。

ドラッグアンドドロップで新しいウィンドウを開く

VS Codeの以前のバージョンでは、異なるファイルを同一ウィンドウ内で表示するための分割ウィンドウ機能のみを提供しておりましたが、画面サイズが限られている場合や多くのコードを同時に表示する必要がある場合には、この機能では不十分でした。また、同じプロジェクト内の同一ファイルを複数回開くことはできませんでした。バージョン1.85のリリースにより、フローティングウィンドウ機能が導入され、ユーザーは単一ファイルを独立した浮動ウィンドウへとドラッグアンドドロップにより移動できるようになりました。これにより、コードの比較や分割表示をより効率的に行うことが可能となります。特定のファイルタブ上でマウスの右クリックを行うと、新しいオプションが表示されるほか、ファイルを直接ドラッグアンドドロップすることもできます。

コピペでファイルを素早くエディタにペースト

従来、ローカルファイルをプロジェクトに取り込むためには、エディタおよび該当ファイルを含むウィンドウを開いた状態で、マウスを利用して当該ファイルを選択し、エディタへドラッグアンドドロップする操作が求められておりました。現在、VS Codeでは、より迅速な操作が可能となっております。具体的には、ご希望のファイルを選択し「Ctrl + C」を押下後、エディタのファイル領域にてクリックし「Ctrl + V」を押下することで、素早くエディタへと貼り付けることができる機能が実装されています。

ターミナルログのスティッキースクロール

かつては、VS Codeの内臓ターミナルを利用する頻度が低かったことがございました。これは、ログの量が多い際にログの開始点や終了点を見極めることが難しいという事情によるものです。然るに、バージョン1.85においては、粘着スクロール機能が実装され、ユーザーはコマンドの開始点を粘着ポイントとして画面上に固定して表示させることが可能となりました。この機能を用いるためには、設定においてterminal.integrated.stickyScroll.enabled を true に変更する操作が必要です。

複数ファイルの選択ハイライト

ファイル履歴におけるコードの比較作業を行う際、ユーザーは特定のメソッド名を選択することで、当該メソッドが強調表示されるという機能が備わっております。しかしながら、異なる履歴バージョンにおいて同一メソッドの位置を確認しようとする場合、検索機能を利用する必要が生じます。editor.occurrencesHighlight の設定を multiFile に変更した後、メソッドを再選択することで、複数のファイルにわたって該当メソッドがハイライト表示されるようになります。

検索結果にディレクトリ条件を追加しての二次検索

フォルダを右クリックした際に展開されるコンテキストメニューに、「Restrict Search to Folder」という新規オプションが二つ追加されております。このオプションを選択することにより、選択されたフォルダのパスが自動的に検索対象を絞り込むためのテキストボックスに挿入されます。この機能を利用すれば、フォルダパスを手動で入力する手間を省くことができます。

不要になったプラグイン

VS Codeの早期バージョンには、いくつかのユーザビリティに関する問題が存在しておりました。そのため、ユーザーはしばしば外部のプラグインを利用してこれらの機能を補う必要がありました。時が経過するにつれて、VS Codeはこれらの機能を本体でサポートするようになり、ユーザーはより簡単な設定でこれらの機能を利用できるようになりました。これにより、外部プラグインに依存した状態からの脱却が可能となりました。

Bracket Pair Colorizer

Bracket Pair Colorizer、フロントエンド開発者にとって極めて重要なツールであります。括弧やブロックの範囲を色分けしてマークすることにより、コードの可読性を大幅に向上させるものです。現在では、VS Codeの設定で@id:editor.bracketPairColorization.enabled 及び@id:editor.guides.bracketPairsを検索し、該当するチェックボックスを有効にすることで容易にこの機能を利用できます。後者の設定をtrueに指定することで、ブラケットペアカラーライザーを標準で使用することが可能です。

設定後はBracket Pair Colorizerプラグインをアンインストールしても問題ありません。

"editor.bracketPairColorization.enabled": true;

Auto Rename Tag

このプラグインの主な機能は、HTMLやXMLなどのタグ名を変更した際に、開始タグと終了タグが自動的に同期して更新されることを助けることにあります。スクリーンショットの添付はございませんが、下記の設定を適用することで同様の結果を実現可能です。故に、本プラグインは役割を終え、退役する時期に差し掛かっております。

"editor.linkedEditing": true

Auto Close Tag

該当プラグインは、HTML作成時に利用されるものです。例を挙げますと、 <div> と入力した際に自動的に対応する閉じタグが補完される機能を有しております。この機能はVS Codeにおいてもネイティブにサポートされており、以下の属性を設定することにより使用することができます。

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true

Trailing Spaces

コーディングをする際、行末に不要なスペースが追加されていることに気付かないことがよくあります。OCD（強迫性障害）を抱える人たちは、これらを一つ一つ削除する必要を感じるかもしれません。このプラグインは、ファイルを保存する際に自動的に各行の末尾の不要なスペースを削除することを目的としています。今では、下記の設定を利用することで、同様の効果を自動的に実現することが可能です。

"files.trimTrailingWhitespace": true

Path Intellisense

npmパッケージを参照する時によく利用される自動パス補完機能を提供するためのプラグインです。現在、VS Codeはデフォルトでこの機能をサポートしているため、もはやこのプラグインをインストールする必要はありません。

おわりに

それでは、ここまでVS Codeの歴史的なバージョンにおける有益な新機能について述べさせていただきました。皆様のお役に立てる機能が含まれていることを心から願っております。もちろん、本稿に関するご質問やご意見がございましたら、コメントを通じてお寄せいただければ幸いです。

創作チーム

作者：Echo

校閲：Wayne、Yuki