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

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

王林

リリース： 2019-12-14 17:31:16

オリジナル

20643 人が閲覧しました

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 チュートリアル