Categories: JavaScriptVSCode

VScodeでJavaScript用のlaunch.jsonファイルを生成する方法

launch.jsonの生成方法

VSCodeを開いたら、フォルダーを選択し、ctrl+shift+pでコマンドパレットを開き、「Debug:Open launch.json」を選択すると、以下の内容のlaunch.jsonが生成されます。

注意

フォルダーを開いてから「Debug:Open launch.json」を選択しないと、launch.jsonが生成されないので注意です。

MEMO

launch.jsonは、指定したフォルダの中に生成される「.vscode」フォルダ直下に生成されます。

CSS

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}"
        }
    ]
}

VSCodeでJavaScriptのconsole.logを出力する方法

方法1

JavaScriptで標準入出力するには"console": "integratedTerminal"を追加し、以下のようにします。

CSS

{
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}",
            "console": "integratedTerminal"
        }
    ]
}

方法2

方法1の代わりに"outputCapture": "std"を追加する方法もあります。

CSS

{
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}",
            "outputCapture": "std"
        }
    ]
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp