VSCode Customization

• Open “Preferences > Settings”
• Copy the followings and save

{
  "dart.previewFlutterUiGuides": true,
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.suggestSelection": "first",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "files.autoSave": "onFocusChange",
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "window.zoomLevel": 1,
  "workbench.startupEditor": "newUntitledFile"
}

Reference: https://code.visualstudio.com/docs/editor/extension-gallery

• install ESLint with VS Code extension

See more details at ESLint

Reference: https://code.visualstudio.com/docs/editor/extension-gallery

• Auto Close Tag
• Auto Rename Tag
• C#
• Debugger for Chrome
• ENV
• Gulp Tasks
• IntelliSense for CSS class
• npm
• npm IntelliSense
• Path IntelliSense
• Tasks Panel
• Vetur
• vscode-icons
• Vue 2 Snippets
• webpack

If you are a Flutter developer, install the following extensions:

• Dart
• Flutter
• Kotlin Language
• vscode-flutter-i18n-json

• Material Icon Theme (File Icon Theme)

reference: https://docs.microsoft.com/en-us/visualstudio/ide/using-regular-expressions-in-visual-studio?view=vs-2019

whitespace: (?:(?=[^\r\n])\s)
one or more whitespace: (?:(?=[^\r\n])\s)+
new line character: (\r\n|\r|\n)
optional: ?

• Combined Examples

(?:(?=[^\r\n])\s)+//(?:(?=[^\r\n])\s)+(\.json\(true\))(\r\n|\r|\n)

will match the following, including the new line character at the end (invisible)
// .json(true)

• using optional

(?:(?=[^\r\n])\s)+(//)?(?:(?=[^\r\n])\s)+(\.json\(true\))(\r\n|\r|\n)

will match the following two by using optional // by using (//)?, including the new line character at the end (invisible)
// .json(true)
   .json(true)

Reference: https://github.com/Microsoft/vscode-recipes/tree/master/nodemon

We could use VS code to debug BOTH node.js backend and frontend codes at the same time. We use “congress.system” as an example, so change your startup script name, port, etc. accordingly.

• install nodemon (to hot reload backend scripts for node.js)

$ npm install --save-dev nodemon

• modify package.json to run dev mode with nodemon

  ...
  "scripts": {
    ...
    "dev": "cross-env NODE_ENV=development nodemon --inspect congress.system.js", // change your startup script name here
  },
  ...

Config the launch.json with different configurations:

{
  // Use IntelliSense to learn about possible Node.js debug 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": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/congress.system.js", // change your startup script name here
      "cwd": "${workspaceRoot}"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 5858
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Node: Nodemon",
      "processId": "${command:PickProcess}",
      "restart": true,
      "protocol": "inspector",
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "https://0.0.0.0:8080",          // change your IP, port here
      "webRoot": "${workspaceFolder}/public",  // change your folder here
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///public/*": "${webRoot}/*"
      }
    }
  ]
}

• The first 2 configurations are standard node.js debug configurations created by VS Code.
• The 3rd configuration is added to “attach” the debugger to running node process with nodemon
• The 4th configuration is to open the Chrome browser with connecting to the debugger

Follow these steps to run the debugger

• Start the node backend by running the command in VS Code terminal: “npm run dev”
• Go to VS Code debug pane and run “Node: Nodemon” from the dropdown
  • when prompt, select the running node process corresponding to the “npm run dev”
• Go to VS Code debug pane and run “vuejs: chrome” from the dropdown
  • it will open Chrome

You could now debug both backend and frontend in VS Code.

• when you edit any backend file, nodemon will auto restart the node process

You could run the Mocha test inside VS code so that you could even put a breakpoint when running test.

e.g. you have a test script in package.json

...
"scripts": {
  "test:lib": "NODE_ENV=test mocha --exit 'lib/test.setup.js' 'lib/**/*.spec.js'",
  "test:models": "NODE_ENV=test mocha --exit 'models/test.setup.js' 'models/**/*.spec.js'",
}

You could add a new configuration to your VS code “Launch.json” as follows. The most important part is the “args” list where you put your original arguments there.

...
"configurations": [
...
  {
    "type": "node",
    "request": "launch",
    "name": "test:lib",
    "env": {"NODE_ENV": "test"},
    "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
    "args": [
      "--timeout",
      "999999",
      "--colors",
      "--exit",
      "${workspaceFolder}/lib/test.setup.js",
      "${workspaceFolder}/lib/**/*.spec.js"
    ],
    "internalConsoleOptions": "openOnSessionStart"
  },
  {
    "type": "node",
    "request": "launch",
    "name": "test:models",
    "env": {"NODE_ENV": "test"},
    "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
    "args": [
      "--timeout",
      "999999",
      "--colors",
      "--exit",
      "${workspaceFolder}/models/test.setup.js",
      "${workspaceFolder}/models/**/*.spec.js"
    ],
    "internalConsoleOptions": "openOnSessionStart"
  },
]

• Test components in the '/public/upload' etc. modules

'use strict'

const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const vueBaseConfig = require('./vue.base.config.js')

module.exports = merge(vueBaseConfig, {
  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  },
  devtool: 'inline-cheap-module-source-map',
  externals: [nodeExternals()]
})

'use strict'

require('jsdom-global')()
const chai = require('chai')
const sinonChai = require('sinon-chai')

chai.use(sinonChai)

...
"scripts": {
   "test:public": "cross-env NODE_ENV=test mochapack --colors --watch --webpack-config webpack/vue.test.config.js --require 'public/test.setup.js' 'public/**/*.spec.js'",
}

add configuration to vscode launch.json file:

...
"configurations": [
...
    {
      "type": "node",
      "request": "launch",
      "name": "test:public",
      "env": {"NODE_ENV": "test"},
      "program": "${workspaceFolder}/node_modules/mochapack/bin/mochapack",
      "args": [
        "--colors",
        "--watch",
        "--webpack-config",
        "${workspaceFolder}/webpack/vue.test.config.js",
        "--require",
        "${workspaceFolder}/public/test.setup.js",
        "${workspaceFolder}/public/**/*.spec.js",
      ]
    }
]

Install cucumber-js and add features and steps

• npm install –save-dev cucumber
• add /features/xxx.feature
• add /features/step_definitions/xxx.js

...
"configurations": [
...
    {
      "type": "node",
      "request": "launch",
      "name": "test-bdd",
      "env": {"NODE_ENV": "test"},
      "program": "${workspaceFolder}/node_modules/.bin/cucumber-js",
      "args": [
        "${workspaceFolder}/features/**/*.feature",
        "-r",
        "${workspaceFolder}/features/step_definitions/**/*"
      ],
      "console": "integratedTerminal"
    }
]