简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > 開発ツール > VSCode > 本文

vscodeでHTMLを実行する方法

下次还敢
リリース： 2024-04-03 04:21:20
オリジナル
1412 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル：
vscode
ソース：php.cn
前の記事：vscodeでHTMLを直接実行する方法 次の記事：vscode が C++ コードを実行する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...
から 2024-04-06 21:21:07
0
1
474
私のページには HTML にタイトルがありますが、表示されません 私はコーディングを始めたばかりなので、私を批判しないでください。 vscodeを使用してWebサイトを作成しようとしています。HTMLとCSSを使用していますが、コードの左上隅に配...
から 2024-04-01 18:24:53
0
1
364
VSCode id 属性をカスタマイズするにはどうすればよいですか? 最近 Atom から VSCode に移行しました。エディタの大部分を自分の好みに合わせてカスタマイズすることができましたが、気に入っている Atom の機能がまだ欠けています。そ...
から 2024-03-31 14:13:45
0
1
373
/bin/sh: 1: C:xamppphpphp.exe: 見つかりません 私はWSL2、Ubuntu20.04を使用し、VSCodeを実行しています。 Windows 上の VSCode および XAMPP で CodeRunner 拡張機能を使用してお...
から 2024-03-31 09:10:37
0
1
333
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！