Visual StudioコードでJavaScriptを実行する
JavaScriptを実行してVisual Studioのコードを使用して結果を表示する方法はありますか？
たとえば、次の内容を含むスクリプトファイル
console.log('hello world');
私はnodejsが必要だと思いますが、それをどうやってやればいいのでしょうか。
編集： "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コードを実行してテストすると仮定すると、 isTestCommandを設定することで、タスクをテストタスクとしてマークできます。 property をtrueにすると、シングルアクション呼び出しの場合は workbench.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を実行するためのはるかに簡単な方法があります。設定は不要です。
- インストールする Code Runner Extension
- テキストエディタでJavaScriptコードファイルを開き、ショートカット
Ctrl+Alt+Nを使うか、F1を押してRun Codeを選択/入力すると、コードが実行され、出力が出力ウィンドウに表示されます。
また、JavaScriptコードの一部を選択してコードスニペットを実行することもできます。とても便利！
私はこれがまだ言及されていないことに驚いています。
問題の.jsファイルをVS Codeで開き、[Debug Console]タブに切り替えて、左側のナビゲーションバーにある[debug]ボタンをクリックし、[実行]アイコン（再生ボタン）をクリックするだけです。
Nodejsをインストールする必要があります。
統合端末のショートカットは（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番目のショートカットは出力パネルを切り替えます。すでにショートカットがありますが、これらのキーは隣同士になっていて操作が簡単です。
私が最初にVS Codeと拡張子Code Runnerを使い始めたとき、私はこの正確な問題に直面しました。
あなたがする必要がある事は node.js パスをユーザー設定に設定することです
Windowsマシンにインストールするときに Path を設定する必要があります。
私の場合それは\"C:\\Program Files\\nodejs\\node.exe\"でした
ファイルディレクトリ名にスペースがある
下記のImageをご覧ください。コードの実行に失敗しました 最初に 私は パス名に間違いをしました 
これがお役に立てば幸いです。
そしてもちろん、私のVS CODEでJSを実行するための助けを得るためにここに来たので、あなたの質問は私を助けました
これは私の考えではあなたにとって最も早い方法です。
- ビジュアルスタジオコードで統合端末を開く（
View > Integrated Terminal） - タイプ
'node filename.js' - enterを押す
注：ノード設定が必要です。 （自作の場合は、端末に「brew install node」と入力するだけです）
注2：まだ持っていないのなら、自作とノードを強くお勧めします。
良い一日を。
@canerbalciが述べたように、単にコードを実行してコンソールに出力を表示するには、タスクを作成して実行することができます。
これのマイナス面は、あなたが出力を得るだけで、それがそれであるということです。
私が本当にやりたいことは、コードをデバッグできることです。Imが小さなアルゴリズムを解こうとしているか、新しいES6機能を試しているとしましょう。
そのため、タスクを作成する代わりに、このディレクトリの.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で新しいファイルを作成して実行する場合は非常に簡単です。まだ設定ファイルがない場合は、それを作成するために設定する必要がある唯一のものは "program"値です。メインの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
}
]
}
Node Execを使用しました。設定は不要です。現在終了しているファイル、または選択されたファイルを作成し、VSCode内に出力します。
https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node
ちょっとした設定であなたはBabelを追加することができます。
V1.32以降では、これが最も簡単な方法です。
{
"key": "ctrl+shift+t",
"command": "workbench.action.terminal.sendSequence",
"args": { "text": "node '${file}'\u000D" }
}
独自のキーバインドを使用してください。
リリースノートを参照してください。 sendSequenceと変数 。
Vscode v1.32では、現在のファイルである${file}のような変数を使って端末にsendSequenceを付けることができます。他のパスが必要な場合は、上記のキーバインドで$ {file}をあなたのパス名に置き換えてください。
\u000Dは戻り値であるため、すぐに実行されます。
'のように、ファイルパスにスペースが含まれている場合に備えて、${file}変数の周りにc:Users\Some Directory\fileToRunsを追加しました。
別の方法は端末を開くことですctrl + `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を入力して新規に開始するときに行われます。
おそらくcommand palleteコマンドを好きなキーにキーバインドできます。
シモンズ：nodeがインストールされ、あなたのパスにあるはずです
JavaScript、pythonなどのコードをVisual Studioのコードで実行するための環境を設定する必要はありません。コードランナーエクステンションをインストールして、実行するコードの部分を選択して実行するだけです。右上隅にある実行ボタン。
Visual StudioコードでJavaScriptを実行する方法はたくさんあります。
あなたがノードを使用する場合は、私はVSCで標準のデバッガを使用することをお勧めします。
私は通常、外部テストを行うtest.jsのようなダミーファイルを作成します。
自分のコードがあるフォルダに、 "。vscode"というフォルダを作成し、 "launch.json"というファイルを作成します。
このファイルに以下を貼り付けて保存します。今すぐあなたのコードをテストするための2つのオプションがあります。
「Nodemon Test File」を選択したら、test.jsにテスト用のコードを入れる必要があります。
Nodemonをインストールするには、VSCでnodemonを使用してデバッグする方法に関する詳細情報を読むことをお勧めします。 article 、launch.jsonファイルの後半部分と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",
},
]
}
もう1つの選択肢は、Visual Studio Code内の開発者ツールコンソールを使用することです。ヘルプメニューから「開発者ツールの切り替え」を選択し、ポップアップ表示された開発者ツールの「コンソール」タブを選択してください。そこからあなたはChromeで入手できるものと同じ開発ツールREPLを持ちます。