検索

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

vscodeでHTMLを実行する方法

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

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

vscodeでHTMLを実行する方法

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

手順:

  1. Visual Studio Code (VSCode) を開く。
  2. 新しい HTML ファイルを作成するか、既存のファイルを開きます。
  3. HTML ファイルに次のコードを入力します: 
<code class="html"><!DOCTYPE html>
<html>
<head>
  <title>我的第一个 HTML 页面</title>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
</body>
</html></code>
  1. [ターミナル] タブに移動するか、Ctrl ~ (Cmd ~ Mac の場合) 内蔵ターミナルを開きます。
  2. ターミナルで次のコマンドを入力します: 
<code>live-server</code>
  1. Enter キーを押します。

詳細:

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

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

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

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

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

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

関連記事

続きを見る