VSCodeからブラウザで開く方法

2022/06/10

HTML、PHP、またはJSファイルを使用している場合は、VisualStudioCode内からブラウザーでそれらを開くことができます。ただし、このための統合オプションはありません。これは、特にエンコーディングの結果をすばやく確認したい場合に、煩わしい場合があります。

幸い、他の方法で「ブラウザで開く」機能を有効にすることができます。この記事ではその方法を説明します。

WindowsPCのVSCodeでブラウザで開く方法

WindowsでVisualStudioCodeの[ブラウザで開く]オプションを取得する最も簡単な方法は、拡張機能を使用することです。Visual Studio Codeに拡張機能をインストールするのは比較的簡単で、ブラウザでファイルを開くために拡張機能を使用するのと同じです。

VisualStudioコードエディターでHTMLファイルを開きます。

左端の垂直ツールバーで、[拡張機能]をクリックします。または、キーボードショートカット「Ctrl + Shift+X」を使用して拡張機能を起動することもできます。

検索バーをクリックして、エントリを有効にします。

「ブラウザで開く」と入力します。検索クエリに一致する拡張子を選択します。

「インストール」ボタンをクリックします。

プログラムをリロードします。
左側のツールバーから[ファイルエクスプローラー]を選択します。

ファイルエクスプローラーでHTMLファイルを見つけて、右クリックします。「デフォルトのブラウザで開く」または「他のブラウザで開く」を選択します。

[デフォルトのブラウザで開く]オプションを選択すると、HTMLファイルは任意のデフォルトのブラウザで実行されます。「他のブラウザで開く」を選択した場合は、使用するブラウザを指定する必要があります。

VisualStudioMarketplaceには多くの便利な拡張機能があります。または、ここで最も肯定的なユーザーレビューを持つ「ブラウザで開く」拡張機能を入手できます：拡張機能1、拡張機能2、拡張機能3、拡張機能4。

MacのVSCodeでブラウザで開く方法

Visual Studio Codeは、プログラムの機能を向上させるさまざまな拡張機能で更新できます。1つのタイプの拡張機能を使用すると、デフォルトのブラウザまたは別のブラウザでHTML、PHP、またはJSファイルを開くことができます。Macでこのオプションを有効にする方法は次のとおりです。

Visual Studio Code Editorを使用して、目的のファイルを開きます。

左側のツールバーに移動し、[拡張機能]を選択します。

拡張バーの検索バーをクリックして、「ブラウザで開く」と入力します。

拡張機能を選択し、[インストール]をクリックします。

ソフトウェアをリロードします。
左側のツールバーに移動し、[ファイルエクスプローラー]を選択します。

エクスプローラーバーで開きたいファイルを見つけて右クリックします。「デフォルトのブラウザで開く」または「他のブラウザで開く」を選択します。

「デフォルトのブラウザで開く」オプションは、事前に選択されたブラウザを使用してファイルを開きます。「他のブラウザで開く」を選択すると、コンピュータにインストールされているブラウザの1つを選択するためのプロンプトが表示されます。

Visual Studio Marketplaceは、VisualStudioCodeに新しい機能を追加できるさまざまな拡張機能を提供します。プログラムをさらにカスタマイズしたい場合は、Webサイトを調べる価値があります。また、Open in Browser拡張機能のみに関心がある場合は、いくつかの提案があります：拡張機能1、拡張機能2、拡張機能3、拡張機能4。

ブラウザのショートカットで開く

VisualStudioCodeのほとんどすべてのOpeninBrowser拡張機能には、キーボードショートカットが含まれています。ただし、ラベルは均一ではありません。代わりに、各拡張機能には、ブラウザでファイルを開くことをアクティブにする特定のキーの組み合わせがあります。

この記事で提案されている拡張機能のキーボードショートカットは次のとおりです。

拡張機能1：Windowsでは「Ctrl + 1」、Macでは「Command+1」。

拡張機能2：Windowsでは「Ctrl + Alt + O」、Macでは「Command + Option（Alt）+O」。

拡張機能3：Windowsでは「Ctrl + Shift + F9」、Macでは「Command + Shift+F9」。

拡張機能4：Windowsでは「Ctrl + Shift + P」、Macでは「Command + Shift+P」。

これらのショートカットは、この記事でリンクされている対応する拡張機能でのみ機能することに注意してください。別の拡張機能をインストールすることを選択した場合、対応するショートカットがマーケットプレイスページに表示される可能性があります。

VisualStudioCodeでのHTMLの実行

Visual Studio CodeでHTMLを操作することに興味がある場合は、プログラムでHTMLコードを実行するいくつかの方法があります。

最初の方法は、実行するファイルを手動でダウンロードすることです。

Visual Studio Codeを開き、新しいHTMLファイルを作成します。

[ファイル]に移動し、[保存]をクリックします。

HTML：5を使用して、HTMLのテンプレートをアクティブ化します。次に、手順2で保存したファイルを開きます。

以前にインストールした「ブラウザで開く」拡張機能を使用して、ブラウザでファイルを起動します。
ブラウザを開いた状態で、Visual Studio Codeに戻り、HTMLファイルを編集して、変更を保存します。

ブラウザに戻り、[更新]をクリックします。編集内容に応じてページが変わるはずです。

手順5と6を繰り返して、HTMLファイルの編集を続けながら進行状況を確認します。

手動による方法は、作業を追跡するのに役立ちます。ただし、さらに優れた解決策があります。それは自動読み込みです。このオプションでは、別の拡張機能をインストールする必要がありますが、それだけの価値があります。

Visual Studio Codeで、左側のツールバーの下部にある[拡張機能]セクションに移動します。

拡張機能の検索バーに「ライブサーバー」と入力します。

LiveServer拡張機能の横にある[インストール]ボタンをクリックします。

新しいHTMLファイルを作成して保存します。

Visual Studio Code Explorerで、新しいファイルを右クリックします。「ライブサーバーを開く」を選択します。

HTMLファイルがブラウザで開きます。これが発生したら、HTMLコードを編集してみてください。進行状況を保存します。

コードに変更を加えて保存するとすぐに、ブラウザが更新されて新しいコンテンツが表示されます。ページを手動で更新する必要はありません。代わりに、リアルタイムで変更を視覚的に確認できます。

その他の便利なVisualStudioCodeHTML拡張機能

前述のように、Visual Studio Marketplaceには優れたツールがたくさんあり、その多くはHTML指向です。ここでは、最も便利で評価の高いHTML拡張機能を10個紹介します。

lit-plugin：構文の強調表示を提供し、入力を検証し、エラーなしでコードを完成させるのに役立つツール。この拡張機能にはカスタムルールがあります。
SCSS Everywhere：HTML、SCSS、Elixir、SASS、PHP、CSS、およびその他の多くのファイルタイプのクラス定義のオートコンプリート拡張。
Angularスニペット：HTMLおよびTypeScriptで簡単に使用できるようにAngularスニペットを追加します。拡張機能は、部分的に印刷された後にフラグメントを展開することによって機能します。
ES6文字列HTML：構文を強調表示するためのes6文字列コードのサポートを有効にします。HTML、CSS、XML、GLSLなどで動作します。
HTML属性の削除：この拡張機能は、HTML属性、およびAngular、Vue、Reactの小道具とディレクティブを削除します。タグの開始と自己終了、および複数の選択に使用できます。
Djaneiro-Djangoスニペット：djangoHTMLテンプレートのスニペットの広範なコレクション。この拡張機能を使用すると、入力にかかる時間が大幅に短縮されます。
ライブプレビュー：Microsoftのライブプレビュー拡張機能を使用すると、ローカルサーバーをホストできます。Angular、React、またはその他のサーバー側ツールを使用しないプロジェクトがある場合、この拡張機能を使用すると、リアルタイムのページ更新で通常のインラインHTMLプレビューを実行できます。
Oracle JET Core：Oracle Corporationによって作成されたこの拡張機能は、カスタムOracleJETHTMLデータを完全にサポートします。含まれているスニペットは、JET属性とタグを自動的に入力します。
CSSナビゲーション：CSSのHTML、LessのHTML、およびSassのHTMLの定義にナビゲートできます。ピーク定義コマンドも含まれています。
アクセント付きHTML文字コンバーター：特殊文字を対応するHTMLエンティティにスムーズに置き換えます。この拡張機能は特定の状況で役立ちますが、ローカライズ可能な文字列を処理する場合に必要です。

ブラウザからVisualStudioCodeを実行できます

ブラウザでHTMLファイルを実行するだけでなく、すべてのVisualStudioCodeをオンラインで使用することもできます。これには、ブラウザで使用するように設計されたプログラムの特定のバージョンを実行する必要があります。

このバージョンは、デスクトップ用のVisualStudioCodeよりもはるかに軽量であることに注意してください。ただし、リポジトリとファイルを簡単にナビゲートしたり、コードに小さな変更を加えたりするためのシンプルなソリューションになる可能性があります。

ブラウザベースのバージョンのVisualStudioCodeを試してみたい場合は、ここをクリックしてすぐに開始できます。

HTMLファイルを準備して実行します

Visual Studio Codeのカスタム拡張機能を使用すると、ブラウザーでHTMLファイルを簡単に開くことができます。このコーディングツールの広範な拡張機能を検討することを選択した場合、「ブラウザで開く」機能はあなたの旅の始まりにすぎません。

選択したブラウザでHTMLファイルを開くことができましたか？どの拡張子を使用しましたか？以下のコメントでお知らせください。