Develop Reference

How do I update my config file in vs code?

When I see example config files on VS Code they are often lengthy and offer two panels for updating (one for default settings and the other for customization). For some reason my config file is only a few lines and whenever I try to update it, nothing happens:
{
// 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": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
For example I'm trying add a line of code to get rid of the error displayed for using .jsx in a .js file as found here and here but it doesn't work. This is just an example, I've tried other modifications as well. How do I add the below code my launch.json (and is there more than one launch.json?). As you can see, I'm super new to this so thanks for any help.
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

You can open:
default settings: Ctrl+Shift+P/Cmd+Shift+P -> Open Default Settings (JSON).
VS Code setting (applied to whole VS code instance): Ctrl+Shift+P / Cmd+Shift+P` -> Open Settings (JSON).
workspace settings (applied only to current "project"/folder): create in root directory '.vscode' folder -> 'settings.json' file.
All these you can find in UI instead of JSON.
In your example, you provided Launch configuration (it is not vs code settings), it is used to configure how to launch/debug your application.
And if you want to get rid of errors, you don't need to use VS Code settings. These rules:
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
are configuration for eslint plugin (based on links you provided). So, you need to place these lines to .eslintrc file and eslint and appropriate plugins should be installed and properly configured.

The launch.json file is used for launching commands like building, running or debugging, you need to change some settings, not launching any thing.
vsCode offers you couple of ways to declare your settings:
Workspace - will save a settings.json file on your root workspace dir.
User - will save a settings.json file on one of those pathes (according your os):
Windows %APPDATA%\Code\User\settings. json.
Mac $HOME/Library/Application Support/Code/User/settings. json.
Linux $HOME/. config/Code/User/settings. json.
On vsCode docs you can read all about it.
You can edit your settings by ctrl+shift+p to open the command palette and search settings, or File > Preferences > Settings (Code > Preferences > Settings on Mac).

What does "." (Dot) do in Visual Studio Code "runtimeArgs" property of launch.json

Today, I opened up my Visual Studio Code and saw that a new update has been released. Like any other normal (and ignorant) user, I just installed the update without any research about the changes. It's been months since I haven't had a problem with the updates so I assumed this one would be no different. But after the update, "launch" options would no longer work!
I have an Electron/Angularjs app. This launch config simply runs the app. Everything was working fine before the VS Code update but after the latest update (v 1.22.1), the app fails to launch from within VS Code.
I can, however, run my app through command line, so there are no changes/problems with Electron or others. The main Electron process would fail to find a module at $workspaceFolder (something about electron.asar resolvePaths?).
After a couple of hours of research, I found out that adding this simple property, grants my wish:
"runtimeArgs": [
"."
]
Does anyone know what this little guy does in VS Code launch.json?
Here's the full launch.json in case you need it:
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"program": "${workspaceFolder}/Src/main.js",
"protocol": "inspector",
"console": "integratedTerminal",
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"."
]
}
]

dot "." would pass your current working directory(cwd) to runtimeExecutable
,which in this case is .bin/electron.
So this executes
$ electron .
I'm guessing"program": "${workspaceFolder}/Src/main.js" is redundant and can be removed, because electron accepts a directory as path , given there's a package file in it.

How do I debug webpack-dev-server's built-in express server in VS code?

I've got a configuration file where in the webpack devServer config
Withing the webpack devServer config, I have defined a express middleware function:
devServer: {
before(app){
init(app);
},
...
}
Where init is a function of the form:
init(app){
app.get('/endpoint', (req,res,next)=> {...;debugger; next();});
...
}
How can I debug this webpack-dev-server code?
I would prefer if I could debug it straight in VSCode, but I'm happy to use in-browser debugging if necessary.

As it turns out, there was a pretty simple way to debug webpack-dev-server in VSCode. Just debug the executable as a node file!
Here was my launch.json:
{
"type": "node",
"request": "launch",
"name":"launch webpack-dev-server",
"program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"args": ["--progress", "--inline", "--config", "build/webpack.dev.conf.js"]
}
Note: For anyone who copies this, you will have to change the webpack configuration file path arg to whatever it is on your machine.
You can debug webpack build scripts in the exact same way:
{
"type": "node",
"request": "launch",
"name":"launch webpack",
"program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
"args": ["--progress", "--config", "build/webpack.prod.conf.js"]
},
Note: this debugs the build / server itself. If you want to debug the output files, you need to also attach a debugger to the url. You can do that using using something like the chrome debugger.

Incorrect breakpoint location using VS Code, TypeScript and Node.js

Trying to debug a node application using TypeScript in VS Code.
The problem is that the debugger does not stop at the correct location in the source code.
app.ts
class Foo
{
doSomething(){
console.log("TEST");
}
}
var foo = new Foo()
foo.doSomething();
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "ES5",
"module": "commonjs"
}
}
launch.json
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch app.js",
// Type of configuration.
"type": "node",
// Workspace relative or absolute path to the program.
"program": "app.ts",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or 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": ["--nolazy"],
// Environment variables passed to the program.
"env": {
"NODE_ENV": "development"
},
// Use JavaScript source maps (if they exist).
"sourceMaps": true,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
tasks.json
// A task runner that calls the Typescript compiler (tsc) and
// compiles based on a tsconfig.json file that is present in
// the root of the folder open in VSCode
{
"version": "0.1.0",
// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "tsc",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// Tell the tsc compiler to use the tsconfig.json from the open folder.
"args": ["-p", "."],
// use the standard tsc problem matcher to find compile problems
// in the output.
"problemMatcher": "$tsc"
}
The problem is that if I set a breakpoint at the "console.log("test");" line, the debugger jumps down two lines and misses my breakpoint.
Any idea why this happens. As far as I have understood it should be possible to debug node applications written in typescript.

I suspect the reason is that your app.js and app.map.js were not updated when your app.ts changed at some point.
You should run the tsc task every time before you run the debugger to ensure that the generated JavaScript files reflect the changes you made in the TypeScript files.
A simple project template for this (very common) use case can be found at https://github.com/jyuhuan/node-ts. It defines a tsc task that monitors the TS files for any changes, keeping the generated JS files always up-to-date.

How to see output result when running a test in debugger with protractor?

I want to see output result when running a test in debugger with protractor, in Visual Studio Code.
I have the following parameters:
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Tests",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "node_modules/*",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": ["Configuration.js", "--resultJsonOutputFile result.json", "--suite=lab"],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": "./test/",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": "",
// Optional arguments passed to the runtime executable.
"runtimeArgs": ["--nolazy"],
// Environment variables passed to the program.
"env": {
"NODE_ENV": "development"
},
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": "output"
If I run the command line: protractor Configuration.js --resultJsonOutputFile output\result.json --suite=smoke, it works.