vscode はコード html をどのように実行しますか_vscode はコード html をどのように実行しますか-htmlチュートリアル-php.cn

vscodeでコードhtmlを実行する方法

百草

リリース： 2024-03-25 15:37:41

オリジナル

870 人が閲覧しました

HTML は本質的に静的マークアップ言語であり、ブラウザーで直接解析して表示できるため、Visual Studio Code (VSCode) で HTML コードを実行するのは簡単です。この記事では、VSCode のインストール、HTML ファイルの作成、HTML コードの作成または編集、HTML ページのプレビュー、JavaScript コードのデバッグなど、VSCode で HTML コードを実行およびプレビューする手順について詳しく説明します。

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