Visual Studio Codeでjavascriptを実行して結果を表示する方法はありますか?
例えば、次のようなスクリプトファイルがあります。
console.log('hello world');
nodejsが必要だと思うのですが、どうすればいいのかわかりません。
EDIT: "Visual Studio Code"というのは、Microsoftの新しいコードエディタのことで、Visual Studioを使って書かれたコードではありません。
Visual Studio Codeで書かれたコードではありません。
**このソリューションは、現在開いているファイルをノードで実行し、その出力を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}"]
}
]
}
すると、次のようになります。
F1を押す > タイプ run task
> enter > select runFile
> enter`` を押すと、タスクが実行されます。
しかし、私はタスクリストを開くためのカスタムキーバインディングを追加する方が簡単だと思いました。
キーバインドを追加するには、VSCodeのUIメニューの 'Code' > 'Preferences' > 'Keyboard Shortcuts' を開きます。これをキーボードショートカットに追加します。
{
"key": "cmd+r",
"command": "workbench.action.tasks.runTask"
}
もちろん、好きなものをキーの組み合わせとして選択できます。
更新:。
JavaScriptのコードをテストするために実行していると仮定すると、タスクのisTestCommand`プロパティをtrue
に設定することで、タスクを_test_タスクとしてマークし、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"
}
単純にコードを実行してコンソールに出力を表示するには、@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で新しいファイルを作成して実行すると、まだ設定ファイルがない場合は、設定ファイルが作成されます。唯一設定が必要なのは、"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
}
]
}