vscode が js 実行環境を構成する方法-VSCode-php.cn

ホームページ

開発ツール

VSCode

vscode が js 実行環境を構成する方法

王林

Dec 14, 2019 pm 05:31 PM

js vscode 動作環境構成

vscode が js 実行環境を構成する方法

VSCode のインターフェイスは非常にシンプルです。インストール後、すべての機能が一目でわかります。プラグインをインストールし、図に示すようにツールと言語をクリックする必要があります。図:

vscode が js 実行環境を構成する方法

図に示すように、次の 2 つのプラグインをインストールします。(他のプラグインを選択することもできます。これは単なる例です)

vscode が js 実行環境を構成する方法

js をデバッグしたいので、html ドキュメントを作成してそれに js を追加する必要があります。方法は、ファイルを作成してコンパイラに直接ドラッグするだけです。内容は次のとおりです:

<html>    
    <body>
        <script>windows.alert(&#39;Hello World&#39;)</script>
    </body>
</html>

ログイン後にコピー

ファイルをコンパイラに配置した後、F5 キーを押すと、どの環境を使用するかを尋ねるポップアップボックスが表示されます。まだ作成されていないため、[詳細] ボタンを選択して、プラグインを使用するとデバッグできます:

vscode が js 実行環境を構成する方法

拡張機能ストアリストを入力すると、インストールする Chrome プラグインのデバッガーを選択できます。インストール後、再起動する必要があります。有効になるか、クリックしてリロードします:

vscode が js 実行環境を構成する方法

インストール後、F5 を再度押すと Chrome が表示されます。選択後、コンパイラは同じになります。ディレクトリを現在の HTML ファイルとして作成し、launch.json 構成ファイルが存在する .vscod フォルダーを作成し、コンパイラーに表示されます:

vscode が js 実行環境を構成する方法

次に、本来は IISを構成する必要がありますが、現在学習段階にあり、後で Web について学習する予定はないため、ローカル IIS サービスは構成しません。URL に対応する値にパスを直接入力できます。パスがわからない場合は、まずブラウザで開くことができます。次のように、ブラウザのアドレスを URL に対応する値にコピーします:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "file:///C:/Users/xfdg/Desktop/jsCode/helloworld.html",
            "webRoot": "${workspaceRoot}"
        }
    ]}

ログイン後にコピー

これを実行して F5 を押した後、正常に実行できることがわかり、安心して js の基本知識を学ぶことができます:

vscode が js 実行環境を構成する方法
おすすめの関連記事とチュートリアル: vscode チュートリアル

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

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7500

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

vscode で Word ドキュメントを表示する方法 vscode で Word ドキュメントを表示する方法 May 09, 2024 am 09:37 AM

まず、コンピュータ上で vscode ソフトウェアを開き、図の①に示すように、左側の [拡張機能] アイコンをクリックし、図の②に示すように、拡張機能インターフェイスの検索ボックスに「officeviewer」と入力します。次に、図の③のように検索結果からインストールする「officeviewer」を選択し、最後に以下のようにdocxやpdfなどのファイルを開きます。

カリフォルニア工科大学の中国人がAIを使って数学的証明を覆す！タオ・ゼシュアンの衝撃を5倍にスピードアップ、数学的ステップの80％が完全に自動化 Apr 23, 2024 pm 03:01 PM

テレンス・タオなど多くの数学者に賞賛されたこの正式な数学ツール、LeanCopilot が再び進化しました。ちょうど今、カリフォルニア工科大学のアニマ・アナンドクマール教授が、チームが LeanCopilot 論文の拡張版をリリースし、コードベースを更新したと発表しました。イメージペーパーのアドレス: https://arxiv.org/pdf/2404.12534.pdf 最新の実験では、この Copilot ツールが数学的証明ステップの 80% 以上を自動化できることが示されています。この記録は、以前のベースラインのイソップよりも 2.3 倍優れています。そして、以前と同様に、MIT ライセンスの下でオープンソースです。写真の彼は中国人の少年、ソン・ペイヤンです。

vscode でバックグラウンド更新を有効にする方法 vscode でバックグラウンド更新を有効にする方法 May 09, 2024 am 09:52 AM

1. まず、インターフェースを開いた後、左上隅のファイルメニューをクリックします。 2. 次に、設定列の設定ボタンをクリックします。 3. ジャンプした設定ページで、アップデートセクションを見つけます。最後に、マウスをクリックしてチェックして有効にし、Windows のバックグラウンドで新しい VSCode バージョンのボタンをダウンロードしてインストールし、プログラムを再起動します。

vscode ワークスペースにファイルを追加する方法 vscode ワークスペースにファイルを追加する方法 May 09, 2024 am 09:43 AM

1. まず、vscode ソフトウェアを開き、エクスプローラーアイコンをクリックして、ワークスペースウィンドウを見つけます。 2. 次に、左上隅にあるファイルメニューをクリックし、フォルダーをワークスペースに追加オプションを見つけます。 3. 最後に、フォルダーの場所を見つけます。ローカルディスク、追加ボタンをクリックします

vscode で wsl 設定ファイルを無効にする方法 vscode で wsl 設定ファイルを無効にする方法 May 09, 2024 am 10:30 AM

1. まず、設定メニューで設定オプションを開きます。 2. 次に、よく使用されるページでターミナル列を見つけます。 3. 最後に、列の右側にある usewslprofiles ボタンのチェックを外します。

VScode でアニメーションのスムーズな挿入を設定する方法アニメーションのスムーズな挿入を設定する VScode チュートリアル May 09, 2024 am 09:49 AM

1. まず、インターフェースを開いた後、ワークスペースインターフェースをクリックします。 2. 次に、開いている編集パネルで、「ファイル」メニューをクリックします。 3. 次に、「環境設定」列の下にある「設定」ボタンをクリックします。 4. 最後に、マウスをクリックして CursorSmoothCaretAnimation を確認します。ボタンを押して保存するだけです

Vscode でワークスペースの信頼権限を開く方法 Vscode でワークスペースの信頼権限を開く方法 May 09, 2024 am 10:34 AM

1. まず、編集ウィンドウを開いた後、左下隅にある設定アイコンをクリックします。 2. 次に、表示されるサブメニューで [ワークスペース信頼の管理] ボタンをクリックします。 3. 次に、編集ウィンドウでページを見つけます。最後に、あなたのオフィスによると、必要に応じて関連する指示を確認してください