If you are using VSCode, use these recommended configurations and settings:

Install Vetur and when you do, you must enable these settings for a good development experience:

• Vetur > Experimental: Template Interpolation Service
• Vetur > Validation: Interpolation
• Vetur > Validation: Template Props

NOTE: Vetur is falling out of favor, Volar might be the new hotness.

To run the server and unit tests in VSCode, add these entries to .vscode/launch.json

{
  "name":"Run Server",
  "type":"node",
  "request":"launch",
  "cwd":"${workspaceRoot}",
  "runtimeExecutable":"${workspaceRoot}/node_modules/.bin/ts-node-dev",
  "args":[
      "${workspaceRoot}/src/server/server.ts"
  ],
  "restart":true,
  "sourceMaps": true,
  "outFiles": ["**/*", "!build/**"]
},
{
  "name": "Run Single Unit Test",
  "program": "${workspaceFolder}/node_modules/ts-mocha/bin/ts-mocha",
  "request": "launch",
  "type": "node",
  "args": [
    "${file}",
    "-r",
    "tests/utils/setup.ts",
    "-p",
    "tests/tsconfig.json",
    "--no-timeouts",
  ],
  "outFiles": ["**/*", "!build/**", "!node_modules/**"],
},

"Run Single Unit Test" runs the test that your editor has focus on.

Are you still running all tests with npm test when all you want to test is a single file? Are you still trying to figure out why your code isn't working with console.log?

Then you should be using the VSCode Debugger. Here are some steps you can take to debug your app or test. This assumes you already have VSCode set up.

1. Go to the Run and Debug view (CTRL-SHIFT-D)

2. On the very top, to the right of the green arrow is a dropdown. Click the dropdown.

3. Click "Add Configuration..."

   If you haven't used launch.json yet, then you'll have an empty (initialized) configuration file.

4. Add the following two entries as elements of the configurations:

        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/build/src/server/server.js",
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Run test in editor",
            "program": "${workspaceRoot}/node_modules/mocha/bin/mocha",
            "args": [
                "--file", "build/tests/utils/Vue.js",
                "--no-timeout",
                "--colors",
                "${workspaceFolder}/build/${relativeFileDirname}/${fileBasenameNoExtension}.js"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        },

(Note that these may change as we move to .vue files. Check back here for updates.)

eg

{ // TOP OF FILE
    // Use IntelliSense to learn about possible attributes.
    // Blah blah blah
    "configurations": [
            {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",

1. Somewhere in this whole process, set breakpoints in your server code (F9 key)
2. In the terminal type npm run build
3. Go to the Run and Debug view (CTRL-SHIFT-D)
4. Select "Launch Program" from the drop-down
5. Click the green arrow.
6. ...
7. MAGIC

1. Set breakpoints in your server code (F9 key). These breakpoints can be anywhere in server code.
2. Open the .spec.ts file you want to debug. Don't select another editor view.
3. In the terminal type npm run build && npm run pretest
4. Go to the Run and Debug view (CTRL-SHIFT-D)
5. Select "Run test in editor" from the drop-down
6. Click the green arrow.
7. ...
8. MAGIC

• Instead of navigating all the way to the Run and Debug View to launch, pressing F5 will run the last thing you ran. So for instance, if the last thing you ran was a local test, then pressing F5 will run that again. (But if your active editor is a different window, it'll try running that as a test.)

• Use Shift-F5 to terminate an app or test early (which you would normally do with CTRL-C)