Visual Studio CodeでJavaScriptを実行する

JavaScriptを実行して結果を表示する方法はありますか Visual Studio Codeますか？

たとえば、次を含むスクリプトファイル：

console.log('hello world');

Node.jsが必要だと思いますが、それを行う方法を見つけることができませんか？

Visual StudioのコードのVisual Studioを使用して書かれていないコード-私はマイクロソフトから新しいコードエディタを意味します。

このソリューションは、ノードで現在開いているファイルを実行し、VSCodeに出力を表示することを目的としています。

同じ質問があり、新しく紹介されたことがわかりました tasksはこの特定のユースケースに役立つ。少し面倒ですが、これが私がしたことです：

作成し.vscode、あなたのプロジェクトのルートディレクトリを作成し、tasks.jsonその中にファイルを。このタスク定義をファイルに追加します。

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

次に、次のことができます。 press F1 > type `run task` > enter > select `runFile` > enter ます。タスクを実行しますが、タスクリストを開くためのカスタムキーバインディングを追加する方が簡単です。

キーバインディングを追加するには、VSCode UIメニューで、[コード]> [設定]> [キーボードショートカット]に移動します。これをキーボードショートカットに追加します。

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.runTask"
}

もちろん、キーの組み合わせとして好きなものを選択できます。

更新：

JavaScriptコードを実行してテストする場合、そのプロパティをに設定してタスクをテストタスクとしてマークし、キーをコマンドにバインドできます。isTestCommandtrueworkbench.action.tasks.testし、シングルアクション呼び出しのます。

つまり、tasks.jsonファイルには次のものが含まれます。

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "isTestCommand": true,
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

...そしてkeybindings.json今あなたのファイルは以下を含みます：

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.test"
}

JavaScriptを実行するはるかに簡単な方法があり、設定は必要ありません。

1. コードランナー拡張機能をインストールする
2. テキストエディターでJavaScriptコードファイルを開き、ショートカットControl+ Alt+ N（またはmacOSでは⌃ Control+ ⌥ Option+ N）を使用するか、を押しF1てから選択/入力するRun Codeと、コードが実行され、出力が出力ウィンドウに表示されます。

さらに、JavaScriptコードの一部を選択して、コードスニペットを実行することもできます。この拡張機能は保存されていないファイルでも機能するため、ファイルを作成し、それをJavascriptに変更して、コードをすばやく書くことができます（何かをすばやく試す必要がある場合）。とても便利！

これがまだ言及されていないことに驚いています：

.jsVS Codeで問題のファイルを開き、「デバッグコンソール」タブに切り替え、左側のナビゲーションバーのデバッグボタンをクリックして、実行アイコン（再生ボタン）をクリックするだけです。

nodejsをインストールする必要があります！

これは私の意見ではあなたにとって最も速い方法です。

• ビジュアルスタジオコードで統合ターミナルを開く（View > Integrated Terminal）
• タイプ 'node filename.js'
• Enterキーを押します

注：ノードのセットアップが必要です。（自作がある場合は、ターミナルで「brew install node」と入力してください）

注2：まだ持っていない場合は、自作とノードを強くお勧めします。

ごきげんよう。

統合端末のショートカットはctrl+で`、次にと入力しnode <filename>ます。

または、タスクを作成することもできます。これは私のtasks.json内の唯一のコードです：

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": ["${file}"],
"showOutput": "always"
}

ここからショートカットを作成します。これは私のkeybindings.jsonです：

// Place your key bindings in this file to overwrite the defaults
[
{   "key": "cmd+r",
"command": "workbench.action.tasks.runTask"
},
{   "key": "cmd+e",
"command": "workbench.action.output.toggleOutput"
}
]

これにより、コマンドパレットで「実行」が開きますが、実行するタスク（この場合はノード）をマウスで入力または選択する必要があります。2番目のショートカットは出力パネルを切り替えます。すでにショートカットがありますが、これらのキーは互いに隣接しており、操作しやすくなっています。

まあ、単にコードを実行してコンソールに出力を表示するには、@ canerbalciが言及しているように、タスクを作成して実行できます。

これの欠点は、出力しか得られないということです。

私が本当にやりたいことは、コードをデバッグできるようにすることです。たとえば、小さなアルゴリズムを解こうとしている、または新しいES6機能を試しているとしましょう。それを実行すると、何か怪しいことがあり、VSC内でデバッグできます。

そのため、タスクを作成する代わりに、このディレクトリの.vscode / launch.jsonファイルを次のように変更しました。

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${file}",
        "stopOnEntry": true,
        "args": [],
        "cwd": "${fileDirname}",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    }
]
}

これにより、VSCのデバッガー内で現在開いているファイルが起動されます。開始時に停止するように設定されています。

起動するには、デバッグするファイルでF5キーを押します。

私は最初に拡張機能付きのVSコードを使い始めたときに、この正確な問題に直面しましたCode Runner

あなたがする必要があることはユーザー設定でnode.jsパスを設定することです

Windowsマシンにインストールするときにパスを設定する必要があります。

私にとっては \"C:\\Program Files\\nodejs\\node.exe\"

ファイルディレクトリ名にスペースがあるので

以下のこの画像を参照してください。パス名を間違えたため、最初にコードを実行できませんでした

これがお役に立てば幸いです。

私も実行するための助けを得るためにここに来たようそして勿論、あなたの質問は、私を助けJS、私の中にVSのコードを

VSコードで次の手順に従います。[Windows OSで実行]

1. 新しいファイルを作成

2. その中にJavaScriptコードを記述します

3. ファイルをfilename.jsとして保存

4. [デバッグ]メニューに移動

5. [デバッグを開始]をクリックします

6. または単にF5を押します

デバッグ開始のスクリーンショット

ターミナルでのjsコードの出力のスクリーンショット

私はNode Execを使用しました。構成は必要ありません。現在終了しているファイルまたはこれまでに選択されたファイルをビルドし、VSCode内に出力します。

https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node

少し設定すると、バベルを追加して、その場でトランスパイルすることもできます。

非常に簡単です。VSCodeで新しいファイルを作成して実行すると、構成ファイルがまだない場合は、それを作成します。セットアップする必要があるのは、「プログラム」の値と、それを設定することだけです。メインJSファイルのパスに、次のように表示されます。

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    // ABSOLUTE paths are required for no folder workspaces.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // ABSOLUTE path to the program.
            "program": "C:\\test.js", //HERE YOU PLACE THE MAIN JS FILE
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": [],
            // ABSOLUTE path to the working directory of the program being debugged. Default is the directory of the program.
            "cwd": "",
            // ABSOLUTE path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": null
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

Visual StudioコードでJavaScript、Pythonなどでコードを実行するための環境を設定する必要はありません。必要なのは、コードランナー拡張機能をインストールし、実行するコードの一部を選択して、右上隅にある実行ボタン。

これは、v1.32の時点で最も簡単な方法です。

{
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "node '${file}'\u000D" }
  }

独自のキーバインドを使用します。

リリースノート：sendSequenceおよびvariablesを参照してください。

vscode v1.32では、次のsendSequenceような変数を使用してターミナルにアクセスできます${file}では、現在のファイルであるアクセスできます。そこで他のパスが必要な場合は、上記のキーバインディングの$ {file}をパス名に置き換えます。

\u000Dそれはすぐに実行されますので、リターンです。

ファイルパスにスペースが含まれている場合に備えて'、${file}変数の周りにs を追加しました。c:Users\Some Directory\fileToRun

最近人気のQuokkaと呼ばれるシンプルで簡単なプラグインを使用することをお勧めします。 Quokka.js。このプラグインを使用する最大の利点の1つは、Webブラウザーでコードを評価する時間を大幅に節約できることです。これにより、VSコードで発生しているすべてを確認できるため、時間を大幅に節約できます。

Visual Studio CodeでJavaScriptを実行する方法はたくさんあります。

Nodeを使用する場合は、VSCの標準デバッガーを使用することをお勧めします。

通常、外部テストを行うtest.jsのようなダミーファイルを作成します。

コードがあるフォルダーに、「。vscode」というフォルダーを作成し、「launch.json」というファイルを作成します

このファイルに以下を貼り付けて保存します。これで、コードをテストするための2つのオプションがあります。

「Nodemon Test File」を選択した場合、テストするコードをtest.jsに配置する必要があります。

nodemonをインストールし、VSCでnodemonを使用してデバッグする方法の詳細については、この記事を読むことをお勧めします。この記事では、launch.jsonファイルの2番目の部分とExpressJSでデバッグする方法について詳しく説明しています。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Nodemon Test File",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/test.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector",
        },
    ]
}

別のオプションは、Visual Studio Code内の開発者ツールコンソールを使用することです。ヘルプメニューから[Toggle Developer Tools]を選択し、ポップアップする開発者ツールの[Console]タブを選択するだけです。そこから、Chromeと同じ開発ツールREPLを入手できます。

Windowsの場合：ファイルのファイルの関連付け.jsをnode.exe

1) Take VSCode
2) Right click on the file in left pane
3) Click "Reveal in explorer" from context menu
4) Right click on the file -> Select "Open with" -> Select "Choose another program"
5) Check box "Always use this app to open .js file"
6) Click "More apps" -> "Look for another app in PC"
7) Navigate to node.js installation directory.(Default C:\Program Files\nodejs\node.exe"
8) Click "Open" and you can just see cmd flashing
9) Restart vscode and open the file -> Terminal Menu -> "Run active file".

別の方法は、ターミナルctrl + ` execute を開くことnodeです。これでノードREPLがアクティブになりました。これで、ファイルまたは選択したテキストをターミナルに送信できます。そのためには、VSCode コマンドパレット（F1またはctrl + shift + p）を開き、>run selected text in active terminalまたはを実行し>run active file in active terminalます。

コードを実行する前にクリーンなREPLが必要な場合は、ノードREPLを再起動する必要があります。これは、ターミナルでノードREPL ctrl+c ctrl+cを使用して終了し、入力nodeして新規に開始するときに行われます。

おそらく、コマンドパレットコマンドを任意のキーにキーバインドできます。

PS：nodeインストールして、パスに含める必要があります

nodemonをインストールして実行するだけです

nodemon your_file.js

対コード端末。