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

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

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

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

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

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

Visual Studio Code Editorで HTML ファイルを開きます。
左端の垂直ツールバーで「拡張機能」をクリックします。または、キーボードショートカット「Ctrl + Shift + X」を使用して拡張機能を起動することもできます。
検索バーをクリックして書き込みを有効にします。
「ブラウザで開く」と入力します。検索用語に一致する拡張子を選択してください。
「インストール」ボタンをクリックします。
プログラムをリロードします。
左側のツールバーからエクスプローラーを選択します。
エクスプローラーで HTML ファイルを見つけて右クリックします。「デフォルトのブラウザで開く」または「他のブラウザで開く」を選択します。
「デフォルトのブラウザで開く」オプションを選択すると、デフォルトとして設定されているブラウザで 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 でそのオプションを有効にする方法は次のとおりです。

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

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

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

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

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

拡張子 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」。

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

Visual Studio Code での HTML の実行

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

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

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

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

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

その他の便利な 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 ファイルを開くことができましたか? どの拡張機能を使用しましたか? 以下のコメントセクションでお知らせください。

Tags: #HOME PC & MOBILE DEVICES MAC

VPNとは？VPN仮想プライベートネットワークのメリットとデメリット

VPNとは何か、そのメリットとデメリットは何でしょうか？WebTech360と一緒に、VPNの定義、そしてこのモデルとシステムを仕事にどのように適用するかについて考えてみましょう。

ほとんどの人は、Windows セキュリティのこれらの隠し機能を使用しません。

Windows セキュリティは、基本的なウイルス対策だけにとどまりません。フィッシング詐欺の防止、ランサムウェアのブロック、悪意のあるアプリの実行防止など、様々な機能を備えています。しかし、これらの機能はメニューの階層構造に隠れているため、見つけにくいのが現状です。

コーディングは思ったほど難しくない

一度学んで実際に試してみると、暗号化は驚くほど使いやすく、日常生活に非常に実用的であることがわかります。

Windows 7でRecuva Portableを使って削除されたデータを復元する

以下の記事では、Windows 7で削除されたデータを復元するためのサポートツールRecuva Portableの基本操作をご紹介します。Recuva Portableを使えば、USBメモリにデータを保存し、必要な時にいつでも使用できます。このツールはコンパクトでシンプルで使いやすく、以下のような機能を備えています。