ビルトインJavaScript／TypeScript言語サポート
HTML/CSSと同様に、JavaScript（TypeScriptも含む）も組み込みでサポートされています。HTML/CSSと同様にシンタックスハイライト機能、補完機能（図6）を備えます。
さらに、JavaScriptコードのフォーマット機能を備えます（図7）。
いくつかの機能は設定により有効と無効を切り替えられます。設定は、［拡張機能］－［TypeScript］を開きます。JavaScriptとTypeScriptには、それぞれに独立した項目が割り当てられていますが、ここではJavaScriptをピックアップします。「javascript」を「typescript」に置き換えれば、TypeScriptに適用される項目となります。「js/ts」は、JavaScriptとTypeScriptで共有する設定項目です。表3に、主なビルトインJavaScript／TypeScript言語サポートの設定項目を挙げます。
| 項目 | デフォルト | 概要 |
|---|---|---|
| javascript.autoClosingTags | true | JSX（JavaScriptのコード中に直接HTMLを記述できる拡張構文）中の閉じタグを自動入力するか |
| javascript.format.enable | true | 既定のフォーマッタを有効にするか |
| javascript.suggest.autoImports | true | 自動インポートの提案をするか |
| javascript.validate.enable | true | 検証を有効にするか |
javascript.format.*（typescript.format.*）にはフォーマッタ関連の設定が多数あります。例えばカンマの後・カッコの前後・二項演算子の前後などの空白の挿入、波括弧の配置位置などです。どのような設定があるかは実際の設定項目を参照してください。
EmmetによるHTML／CSSサポート
Emmetは、Dreamweaver、Bracket、Atomなどのテキストエディタあるいは開発環境で利用できるHTML/CSS編集のためのオープンソースのプラグインです。もともとはZen-Codingというプロジェクトでしたが、Emmetに名称変更されました。VSCodeにはEmmetが標準で組み込まれており、特に拡張機能をインストールすることなく利用できます。
Emmetとはプラグインの名称でもありますが、省略記法の名称でもあります。Emmet記法に則って省略形を入力すると、それに相当する内容を自動的に展開する、そんなイメージになります。表4は、Emmetによる主な展開例です。基本的に、入力後に表示される候補から、［Enter］キーか［Tab］キーを押下して展開します（図8）。
| 記法 | 展開される内容 | 展開例 |
|---|---|---|
| ! | テンプレートを挿入 | ! ⇒ <!DOCTYPE html>～</html> |
| !!! | DOCTYPE宣言を挿入 | !!! ⇒ <!DOCTYPE html> |
| タグ名 | 開始タグと終了タグを挿入 | div ⇒ <div></div> |
| .クラス名 | タグにclass属性を付与 | .class ⇒ <div class="class"></div> |
| #id名 | タグにid属性を付与 | #id ⇒ <div id="id"></div> |
| > | 要素を入れ子構造で展開する（親要素と子要素） | div>p ⇒ <div><p></p></div> |
| + | 同階層を展開する（兄弟要素） | div+div ⇒ <div></div><div></div> |
| ^ | 一つ上の階層で展開する | |
| *数字 | 繰り返し | li*5 ⇒ <li></li>が5つ |
| $ | 連番の数字を展開する | .class$*5 ⇒ <div class="class1"></div>～<div class="class5"></div> |
| ( )または{ } | グループを作る（テーブルやリストを作るときなどに使う） | |
| [Cntl]＋[/] | コメントを挿入 | コメント ⇒ <!-- コメント --> |
Emmetによる支援を受けるには、編集中のファイルがHTMLやCSSであることを明示しておく必要があります。既存のHTML/CSSファイルを開くか、あるいは新規ファイル作成後にHTML/CSSファイルとして拡張子を指定して保存する、さらに新規作成後に表示される言語選択の問い合わせに「HTML」か「CSS」などを選択しておく、などです。Emmetの設定は、［拡張機能］－［Emmet］を開いて行います。表5に、主なEmmetの設定項目を挙げておきます。
| 項目 | デフォルト | 概要 |
|---|---|---|
| emmet.optimizeStylesheetParsing | true | 展開位置が適切かの判定を周辺にのみ絞る（falseならファイル全体が判定対象となり精度は上がるが遅くなる） |
| emmet.showAbbreviationSuggestions | true | 候補を表示するか |
| emmet.showExpandedAbbreviation | always | 候補を表示するファイルの種類（always：全て、never：なし、inMarkupAndStylesheetFilesOnly：html、cssなど11種類） |
| emmet.showSuggestionsAsSnippets | false | 候補をスニペットで表示するか |
| emmet.triggerExpansionOnTab | false | Tabキーで候補を表示するか |
| emmet.useInlineCompletions | false | 候補をインライン表示するか |
| emmet.variables | {} | スニペットで参照される変数のリスト |
このうち、emmet.variablesについて例を挙げます。「!」では、HTMLのひな型を自動入力できますが、html要素のlang属性が"en"であるので、これをいちいち"ja"などに書き直すのは面倒です。そこで、スニペットの変数であるlangを"ja"に設定することで、「!」の展開時にlang="ja"にすることができるようになります。
HTMLページ表示のための拡張機能
ここまでは編集機能を紹介しました。編集したHTMLやCSS、JavaScriptの動作確認は、ブラウザで表示、実行させてみるのが一般的です。ここでは、HTMLページをブラウザで表示させる拡張機能を紹介します。動作検証のために、FinderやExplorerでいちいちファイルをダブルクリックして開く必要はないのです。
HTMLファイルをさまざまなブラウザで表示（open in browser）
編集中のHTMLファイルをブラウザでサクッと表示させたい！このような場合には、TechERによるopen in browserをインストールしましょう。ショートカットキーあるいはメニューを使って、デフォルトブラウザあるいは任意のブラウザで編集中のHTMLファイルを表示できます（Igor Dimitrijevićによる似た名前のOpen in Browserもあるので注意してください）。
デフォルトブラウザで開きたい場合には［Option］＋［B］／［Alt］＋［B］、開くブラウザを選択したい場合には［Shift］＋［Option］＋［B］／［Shift］＋［Alt］＋［B］を使います（［Shift］＋［Option（Alt）］＋［B］は、一部の拡張機能と競合することがありますが、キーのカスタマイズはできません）。メニューから開くには、エディタ画面で右クリックして、表示されるメニューから［Open in Default Browser］および［Open in Other Browsers］を選択します。
ブラウザを選択して表示する場合は、コマンドパレットに表示されるブラウザの一覧から選択してください（図9）。もちろん、インストールされているブラウザしか起動できません。
設定は、拡張機能のplugin open-in-browserから行えます。設定項目Open-in-browser（open-in-browser.default）でデフォルトブラウザを指定できます。既定値はDefaultであり、この場合はシステムのデフォルトブラウザが使用されます。open in browser自身のデフォルトブラウザを指定でき、その場合には［Set default browser］欄に表6に挙げる値を設定します。
| ブラウザ | 値 |
|---|---|
| Chrome | chrome, google chrome, google-chrome, gc |
| Firefox | firefox, mozilla firefox, ff |
| Internet Explorer | ie, iexplore |
| Safari | safari |
| Opera | opera |
| Chromium | chromium |
| Firefox Developer Edition | firefox developer, fde, firefox developer edition |
| Edge | edge, msedge, microsoftedge |
open in browserと名乗っているのでWebブラウザ専用と思われがちですが、実際にはファイル拡張子の関連付けに基づいて対応するアプリケーションが起動します。例えばテキストファイル（.txt）の場合は「シンプルテキスト」（macOS）や「メモ帳」（Windows）が起動します。
HTMLファイルをデフォルトブラウザで表示（Open in Default Browser）
この拡張機能も、編集中のHTMLファイルを表示させるためのものです。open in browserと異なるのは、ショートカットキーに加えてエクスプローラーのコンテキストメニューでのブラウザ起動が可能であること、macOSのTouch barに対応していること（図10）、ローカルHTTPサーバが利用可能なこと、そして多言語対応であることです。デフォルトのブラウザは、システムのデフォルトブラウザをそのまま使います。open in browserのような拡張機能自身のデフォルトブラウザを持つことはできません。このような違いを踏まえて、どちらの拡張機能を使うか選択しましょう。
ショートカットキーとしては［Command］＋［1］／［Control］＋［1］が使用できます。コンテキストメニューから開くには、エクスプローラーでファイルを右クリックして、表示されるメニューから［ブラウザで開く］を選択します。「開いているエディター」で開くコンテキストメニューには表示されないので注意してください。
設定は、拡張機能のOpen in Default Browserから行えます。設定項目［ローカルHTTPサーバーで開く］（Open With Local Http Server）で、HTMLファイルをブラウザで開く際にファイルシステムから開くか、HTTPサーバーから開くか指定できます。HTMLコンテンツがJavaScriptを読み込むなどHTTPサーバーを必要とする場合には、このオプションを有効にしておきます。
HTMLファイルをサーバから表示（Live Server）
上記の2つは、ファイルシステムあるいは簡易的なサーバからHTMLファイルをブラウザで開く拡張機能でした。ここで紹介するRitwick DeyによるLive Serverは、シンプルですが本格的な開発用のHTTPサーバとして機能します。主な機能を挙げておきます。
- VSCodeのステータスバーから起動と停止が可能
- カスタマイズ可能なショートカットキーか、コンテキストメニューから起動可能
- ファイルの変更を検出して再読み込みが可能（監視対象から除外するファイルも指定可能）
- サーバルート、ポート番号、デフォルトブラウザを変更可能
- SVG（Simple Vector Graphics）のサポート
- HTTPSのサポート
- CORS（Cross-Origin Resource Sharing）に対応
- Web ExtensionによりPHPなどの動的ページにも対応可能
ご覧のとおり、実運用にこそ向かないものの、手軽な開発環境のためのHTTPサーバとしての機能は十分に備えていると言えます。特にCORSに対応しているので、Same-Originに制約のあるコンテンツを表示させる必要のある場合には非常に便利です。
Live ServerはHTTPサーバであるので、ワークグループかフォルダのコンテンツをブラウザに提供するのが基本です。フォルダにインデックスファイル（index.htmlなど）があればそれを開き、ない場合にはリストから開くファイルを選択します。このとき、ブラウザのアドレス欄には「127.0.0.1:5500」のように表示され、サーバから開いていることを確認できます。
サーバの起動と停止は、ステータスバーの表示をクリックするほか（図11）、コマンドパレットから「Live Server」を検索して表示される選択肢からも可能です。ショートカットキーとしては、起動が［Command］＋［L］［Command］＋［O］／［Alt］＋［L］［Alt］＋［O］、停止が［Command］＋［L］［Command］＋［C］／［Alt］＋［L］［Alt］＋［C］となっています。
エクスプローラーのコンテキストメニューからは、［Open with Live Server］を選択するとサーバを起動でき、ファイルを個別に表示できます（「開いているエディター」で開くコンテキストメニューには表示されないので注意してください）。
設定は、拡張機能のLive Server Configから行えます。設定項目［Custom Browser］（liveServer.settings.CustomBrowser）で、起動するブラウザを選択できます（既定値はnullで、システムのデフォルトブラウザ）。設定項目［Https］（liveServer.settings.https）で、HTTPSの有効/無効を切り替えられます（既定値は無効《false》）。有効（true）にすると、証明書ファイルやパスフレーズなどの設定も必要になります。このほか、［Port］（liveServer.settings.port）や［Use Local Ip］（liveServer.settings.useLocalIp）で待機ポートやローカルIPアドレスの指定も可能です。
