VS Codeからブラウザで開く方法

HTML、PHP、または JS ファイルを使用している場合は、Visual Studio Code からブラウザーでファイルを開くことができます。ただし、これを行うための統合オプションはありません。これは、特にコーディングの結果をすぐに確認したい場合にイライラする可能性があります。

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

Windows PC 上の VS Code でブラウザで開く方法

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

1. Visual Studio Code Editorで HTML ファイルを開きます。
   
2. 左端の垂直ツールバーで「拡張機能」をクリックします。または、キーボード ショートカット「Ctrl + Shift + X」を使用して拡張機能を起動することもできます。
   
3. 検索バーをクリックして書き込みを有効にします。
   
4. 「ブラウザで開く」と入力します。検索用語に一致する拡張子を選択してください。
   
5. 「インストール」ボタンをクリックします。
   
6. プログラムをリロードします。
7. 左側のツールバーからエクスプローラーを選択します。
   
8. エクスプローラーで HTML ファイルを見つけて右クリックします。「デフォルトのブラウザで開く」または「他のブラウザで開く」を選択します。
   
9. 「デフォルトのブラウザで開く」オプションを選択すると、デフォルトとして設定されているブラウザで HTML ファイルが起動します。「他のブラウザで開く」を選択した場合は、使用するブラウザを指定する必要があります。

Visual Studio Marketplaceには便利な拡張機能がたくさんあります。または、ユーザー レビューが最も好評な Open in Browser 拡張機能をここで入手できます: Extension 1、Extension 2、Extension 3、Extension 4。

Mac 上の VS Code でブラウザで開く方法

Visual Studio Code は、プログラムの機能を強化するさまざまな拡張機能を使用してアップグレードできます。あるタイプの拡張機能を使用すると、HTML、PHP、または JS ファイルをデフォルトまたは他のブラウザで開くことができます。Mac でそのオプションを有効にする方法は次のとおりです。

1. Visual Studio コード エディターを使用して、目的のファイルを開きます。
   
2. 左側のツールバーに移動し、「拡張機能」を選択します。
   
3. [拡張機能] パネルの検索バーをクリックし、「ブラウザで開く」と入力します。
   
4. 拡張機能を選択し、「インストール」をクリックします。
   
5. ソフトウェアをリロードします。
6. 左側のツールバーに移動し、エクスプローラーを選択します。
   
7. エクスプローラー パネルで開きたいファイルを見つけて右クリックします。「デフォルトのブラウザで開く」または「他のブラウザで開く」を選択します。
   
8. 「デフォルトのブラウザで開く」オプションを選択すると、事前に選択したブラウザを使用してファイルが起動します。「他のブラウザで開く」を選択すると、マシンにインストールされているブラウザの 1 つを選択できるプロンプトが表示されます。
   

Visual Studio Marketplace には、 Visual Studio Code に新しい関数を追加できる拡張機能が豊富に揃っています。プログラムをさらに微調整したい場合は、Web サイトを調べてみる価値があります。[ブラウザで開く] 拡張機能のみに興味がある場合は、次のような提案があります:拡張機能 1、拡張機能 2、拡張機能 3、拡張機能 4。

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

Visual Studio Code のほぼすべての [ブラウザーで開く] 拡張機能には、キーボード ショートカットが有効になっています。ただし、ショートカットは均一ではありません。代わりに、各拡張機能には、ブラウザでファイルを開くことを有効にするキーの特定の組み合わせがあります。

この記事で提案されている拡張機能のキーボード ショートカットを次に示します。

1. 拡張子 1: Windows では「Ctrl + 1」、Mac では「Command + 1」。
   
   
2. 拡張子 2: Windows では「Ctrl + Alt + O」、Mac では「Command + Option (Alt) + O」。
   
3. 拡張子 3: Windows では「Ctrl + Shift + F9」、Mac では「Command + Shift + F9」。
   
   
4. 拡張子 4: Windows では「Ctrl + Shift + P」、Mac では「Command + Shift + P」。
   
   

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

Visual Studio Code での HTML の実行

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

最初の方法では、実行するファイルを手動でロードします。

1. Visual Studio Code を開き、新しい HTML ファイルを作成します。
   
2. 「ファイル」に移動し、「保存」をクリックします。
   
3. HTML:5 を使用して、HTML のテンプレートをアクティブにします。次に、手順 2 で保存したファイルを開きます。
   
4. 以前にインストールした「ブラウザで開く」拡張機能を使用して、ブラウザでファイルを起動します。
5. ブラウザーを開いたままにして、Visual Studio Code に戻り、HTML ファイルを編集し、変更を保存します。
   
6. ブラウザに戻り、「更新」をクリックします。編集に基づいてページが変更されるのが確認できるはずです。
   
7. 手順 5 と 6 を繰り返して、HTML ファイルの編集を続行しながら進行状況を確認します。

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

1. Visual Studio Code で、左側のツールバーの下部にある [拡張機能] に移動します。
   
2. 拡張機能の検索バーに「ライブサーバー」と入力します。
   
3. Live Server 拡張機能の横にある「インストール」ボタンをクリックします。
   
4. 新しい HTML ファイルを作成して保存します。
   
   
5. Visual Studio Code Explorer で、新しいファイルを右クリックします。「ライブサーバーを開く」を選択します。
   
6. HTML ファイルがブラウザで開きます。完了したら、HTML コードを編集してみます。進行状況を保存します。
   
   
7. コードに変更を加えて保存するとすぐにブラウザが更新され、新しいコンテンツが表示されます。ページを手動で更新する必要はなく、変更をリアルタイムで視覚的に確認できます。
   

その他の便利な Visual Studio Code HTML 拡張機能

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

• lit-plugin : 構文を強調表示し、入力をチェックし、エラーなしでコードを完成させるのに役立つツール。この拡張機能にはカスタマイズ可能なルールがあります。
• SCSS Everywhere : HTML、SCSS、Elixir、SASS、PHP、CSS、およびその他の多くのファイル タイプのクラス定義のオートコンプリート拡張機能。
• Angular Snippets : HTML および TypeScript で簡単に使用できるように Angular スニペットを追加します。この拡張機能は、部分的に入力されたスニペットを展開することで機能します。
• ES6 文字列 HTML : es6 文字列コードの構文強調表示のサポートを有効にします。HTML、CSS、XML、GLSL、その他の形式で動作します。
• Split HTML Attributes : この拡張機能は、HTML 属性、Angular、Vue、React のプロパティとディレクティブを分割します。開始タグと自己終了タグ、および複数の選択に対して使用できます。
• Djaneiro – Django Snippets : Django HTML テンプレートの広範なスニペット コレクション。この拡張機能を使用すると、入力にかかる時間が大幅に短縮されます。
• ライブ プレビュー: Microsoft のライブ プレビュー拡張機能を使用すると、ローカル サーバーのホスティングが可能になります。Angular、React、またはその他のサーバー ツールを使用しないプロジェクトの場合、この拡張機能を使用すると、リアルタイムでページを更新しながら、定期的な埋め込み HTML プレビューが可能になります。
• Oracle JET Core : Oracle Corporation によって作成されたこの拡張機能は、Oracle JET カスタム HTML データを完全にサポートします。含まれているスニペットは、JET 属性とタグを自動補完します。
• CSS ナビゲーション: HTML から CSS、HTML から Less、および HTML から Sass の定義に移動を有効にします。[定義のピーク] コマンドも有効になります。
• HTML アクセント文字コンバータ: 特殊文字を適切な HTML エンティティにシームレスに置き換えます。この拡張機能は状況によっては役立ちますが、ローカライズ可能な文字列を処理する場合には不可欠です。

ブラウザから Visual Studio コードを実行できる

ブラウザーで HTML ファイルを実行するだけでなく、Visual Studio Code 全体をオンラインで使用することもできます。これには、ブラウザで使用するために開発されたプログラムの特定のバージョンを起動する必要があります。

このバージョンは、デスクトップ Visual Studio Code と比較してはるかに軽量であることに注目してください。ただし、これはリポジトリとファイルのナビゲーションを容易にしたり、コードを若干変更したりするための簡単なソリューションになる可能性があります。

Visual Studio Code ブラウザー バリアントを試してみたい場合は、ここをクリックしてすぐに開始できます。

HTML ファイルを起動して実行する

Visual Studio Code 専用の拡張機能を使用すると、ブラウザで HTML ファイルを簡単に開くことができます。このコーディング ツール用の膨大な拡張機能を探索することに決めた場合、ブラウザで開く機能はその旅の始まりにすぎません。

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