ホームページ > 記事 > ウェブフロントエンド > vscodeでコードhtmlを実行する方法
vscodeでコードhtmlを実行する方法
- 百草オリジナル
- 2024-03-25 15:37:41822ブラウズ
HTML は本質的に静的マークアップ言語であり、ブラウザーで直接解析して表示できるため、Visual Studio Code (VSCode) で HTML コードを実行するのは簡単です。この記事では、VSCode のインストール、HTML ファイルの作成、HTML コードの作成または編集、HTML ページのプレビュー、JavaScript コードのデバッグなど、VSCode で HTML コードを実行およびプレビューする手順について詳しく説明します。
HTML は基本的にブラウザーで直接解析して表示できる静的マークアップ言語であるため、Visual Studio Code (VSCode) で HTML コードを実行するのは比較的簡単です。ただし、「コードの実行」と言うときは、HTML ページのプレビューまたはデバッグ、そしておそらくそれに関連付けられた JavaScript や CSS のことを指していると思います。 VSCode で HTML コードを実行してプレビューする方法の詳細な手順は次のとおりです。
ステップ 1: Visual Studio Code をインストールする
まず、最新バージョンがインストールされていることを確認します。 VSコード。 VSCode 公式 Web サイト (https://code.visualstudio.com/download) からダウンロードしてインストールできます。
ステップ 2: HTML ファイルを作成または開く
新しい HTML ファイルを作成するか、VSCode で既存の HTML ファイルを開くことができます。新しいファイルを作成するときは、サイドバーの [新しいファイル] アイコンをクリックするか、ショートカット Ctrl N (Windows/Linux) または Cmd N (Mac) を使用できます。次に、ファイルを保存するときに、index.html などの .html 拡張子が付いていることを確認してください。
ステップ 3: HTML コードの作成または編集
開いた HTML ファイルで、HTML コードの作成または編集を開始できます。単純な HTML ページは次のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个 HTML 页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的 HTML 页面示例。</p>
</body>
</html>コードが完全で、構文エラーがないことを確認してください。 VSCode の組み込み構文強調表示機能は、コード内のエラーを特定するのに役立ちます。
ステップ 4: HTML ページをプレビューする
VSCode には、HTML ページをプレビューするためのいくつかのメソッドが用意されています。
メソッド 1: 組み込みのメソッドを使用します。ブラウザ プレビューを参照する場合
VSCode にはブラウザ プレビュー機能が組み込まれており、エディタの右上隅にある [ライブ配信] ボタンをクリックするか、ショートカット Alt B (Windows/Linux) を使用できます。 ) または Shift Cmd P 次に、「Live Server: Open with Live Server (Mac)」と入力して、ローカル サーバーを起動し、ページをプレビューします。これには、「Live Server」というプラグインが必要です。まだインストールしていない場合は、次の手順に従ってください:
VSCode の拡張機能ストアを開きます (サイドバーの四角いアイコンをクリックするか、Ctrl Shift X /Cmd Shift を押します)バツ）。
検索ボックスに「ライブサーバー」と入力します。
検索結果から「Live Server」プラグインを見つけて、「インストール」ボタンをクリックします。
インストールが完了したら、Live Server を起動し、上記の方法で HTML ページをプレビューできます。 Live Server は、ファイルを保存するとブラウザを自動的に更新するため、コード変更の影響をリアルタイムで確認できます。
方法 2: 外部ブラウザで開く
HTML ページをプレビューするもう 1 つの方法は、外部ブラウザでファイルを直接開くことです。エディターで HTML ファイルを右クリックして「ブラウザーで開く」を選択するか、ショートカット Ctrl クリック (Windows/Linux) または Cmd クリック (Mac) を使用してファイルを開くことができます。 VSCode は、デフォルトのブラウザを使用してファイルを開こうとします。ただし、この方法では、特に相対パス経由で参照されている場合、関連する CSS または JavaScript ファイルが読み込まれない可能性があることに注意してください。
ステップ 5: JavaScript コードをデバッグする (オプション)
HTML ページに JavaScript コードが含まれており、コードをデバッグしたい場合は、VSCode 組み込みデバッガーを使用できます。 。まず、プロジェクト内に launch.json 構成ファイルをセットアップして、デバッグ環境を定義する必要があります。 VSCode には、このファイルを作成するためのウィザードが用意されています。通常、このプロセスは、サイドバーの「実行とデバッグ」アイコンをクリックして (またはショートカット Ctrl Shift D / Cmd Shift D を使用して)、「launch.json ファイルの作成」をクリックして開始します。 「Chrome」またはデバッグ ターゲットとして使用する別のブラウザを選択し、適切なオプションを構成します。その後、JavaScript コードにブレークポイントを設定し、デバッグ セッションを開始してコードをステップ実行できます。
概要
VSCode で HTML コードを実行するには、主に HTML ページの作成とプレビューが含まれます。 HTML 自体をコンパイルしたり実行したりする必要はありませんが、Live Server を使用するか、ブラウザでファイルを直接開くと、ページのレンダリングを簡単に確認できます。 JavaScript を含む複雑なページの場合、VSCode のデバッグ機能はコードのデバッグに役立ちます。 VSCode の機能やプラグインを適切に活用することで、HTML プロジェクトをより効率的に開発できます。
以上がvscodeでコードhtmlを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。