ホームページ > 記事 > 開発ツール > vscodeでHTMLを実行する方法

vscodeでHTMLを実行する方法

下次还敢オリジナル: 2024-04-03 04:21:201222ブラウズ

Visual Studio Code で HTML ファイルを実行するには、次の手順だけが必要です。HTML ファイルを作成し、コードを入力します。組み込みターミナルを開き、「live-server」と入力します。 Enter キーを押してデフォルトのブラウザで HTML ファイルを開き、ファイルの変更をリアルタイムで更新します。

vscodeでHTMLを実行する方法

Visual Studio Code で HTML を実行する方法

手順:

Visual Studio Code (VSCode) を開く。
新しい HTML ファイルを作成するか、既存のファイルを開きます。
HTML ファイルに次のコードを入力します:

<code class="html"><!DOCTYPE html>
<html>
<head>
  <title>我的第一个 HTML 页面</title>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
</body>
</html></code>

[ターミナル] タブに移動するか、Ctrl ~ (Cmd ~ Mac の場合) 内蔵ターミナルを開きます。
ターミナルで次のコマンドを入力します:

<code>live-server</code>

Enter キーを押します。

詳細:

Live Server は、ブラウザベースのプロジェクトを迅速に起動してプレビューするための VSCode の組み込み拡張機能です。ローカルホスト上で開発サーバーを起動し、ファイルの変更時にライブ更新を自動的に実行します。

HTML ファイルを実行すると、Live Server はデフォルトのブラウザでファイルを開きます。ページが正常にレンダリングされ、ファイルに変更を加えるとブラウザ内のページが自動的に更新されることがわかります。

追加のヒントをいくつか紹介します:

HTML ファイルを実行する前に、必ず Live Server 拡張機能をインストールしてください。
ライブサーバーは、VSCode の下部にあるライブサーバーアイコン (プレーヤーボタンに似ています) をクリックして開始することもできます。
Ctrl L (Mac の場合は Cmd L) を押すと、ターミナルとエディターをすばやく切り替えることができます。

以上がvscodeでHTMLを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

json html visual studio vscode visual studio code

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vscodeでHTMLを直接実行する方法次の記事：vscodeでHTMLを直接実行する方法

続きを見る