development:tools:vscode:start [Questwork's Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== VSCode Customization ======


===== User Settings =====

  * Open "Preferences > Settings" 
  * Copy the followings and save

<code>
{
  "editor.renderWhitespace" : "boundary",
  "dart.previewFlutterUiGuides" : true,
  "[javascript]" : {
    "editor.defaultFormatter" : "vscode.typescript-language-features"
  },
  "workbench.startupEditor" : "newUntitledFile",
  "editor.insertSpaces" : true,
  "security.workspace.trust.untrustedFiles" : "open",
  "editor.accessibilitySupport" : "off",
  "editor.tabSize" : 2,
  "files.autoSave" : "onFocusChange",
  "editor.suggestSelection" : "first",
  "files.eol" : "\n",
  "eslint.validate" : [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "workbench.editor.untitled.hint" : "hidden",
  "editor.detectIndentation": false,
  "editor.wordWrap" : "on",
  "files.insertFinalNewline": true,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "mssql.connections": [
    {
      "server": "192.168.88.241\\SQLEXPRESS",
      "database": "jccpa",
      "authenticationType": "SqlLogin",
      "user": "jccpa",
      "password": "",
      "emptyPasswordInput": false,
      "savePassword": true
    }
  ],
  "dart.debugExternalPackageLibraries": true,
  "dart.debugSdkLibraries": true,
  "window.zoomLevel": 1
}
</code>

==== Newline character ====

Please set the newline character as 'LF'

Reference: https://wiki.questwork.com/dokuwiki/doku.php?id=zh:staff:mao_joe:about_git_newline:start&s[]=crlf


===== ESLint =====

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

  * install ESLint with VS Code extension

See more details at [[howto:eslint:start|ESLint]]

===== Common Extensions =====

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

^ Name ^ Backend ^ Frontend ^ Flutter ^ Design ^ Optional ^ Remarks ^
| [[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag|Auto Close Tag]] | ✅ | ✅ | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag|Auto Rename Tag]] | ✅ | ✅ | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp|C#]] | ✅ | ✅ | | | | |
| [[https://marketplace.visualstudio.com/items?itemName=Codeium.codeium|Codeium]] | | | | | ✅ | free AI code acceleration plugin for your favorite languages |
| [[https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code|Dart]] | ✅ | | ✅ | ✅ | | |
| __[Deprecated] Debugger for Chrome__ | | | | | | |
| [[https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer|Debug Visualizer]] | | | | | ✅ | A visual watch window that lets you visualize your data structures while debugging. |
| [[https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker|Docker]] | ✅ | | | | | |
| [[https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv|DotENV]] | ✅ | ✅ | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio|Draw.io Integration]] | ✅ | ✅ | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens|Error Lens]] | | | | | ✅ | |
| [[https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint|ESLint]] | ✅ | ✅ | | ✅ | | |
| Fig | ✅ | | | | ✅ | You need to install [[https://fig.io/|Fig]], and then will auto install the vscode extension. Currently only supports Mac, with cross-platform support coming soon. |
| [[https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter|Flutter]] | ✅ | | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=GitHub.copilot|GitHub Copilot]] | | | | | ✅ | AI pair programmer. Requires a subscription. |
| [[https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion|IntelliSense for CSS class names in HTML]] | ✅ | ✅ | | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=mathiasfrohlich.Kotlin|Kotlin Language]] | | | ✅ | | | |
| [[https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare|Live Share]] | ✅ | ✅ | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme|Material Icon Theme (File Icon Theme)]] | | | | | ✅ | |
| [[development:tools:vscode:mongodb for vscode:|MongoDB for VS Code]] | ✅ | ✅ | ✅ | | | Except for backend colleagues, please only use it for search purposes as much as possible. |
| [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense|npm Intellisense]] | ✅ | ✅ | | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense|Path Intellisense]] | ✅ | ✅ | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=ms-mssql.sql-database-projects-vscode|SQL Database Projects]] | ✅ | ✅ | ✅ | | | Just for MSSQL Databases. Set it once and use it in different projects. The disadvantage is that switching tabs will execute sql again. |
| [[https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools|SQLTools]] | ✅ | ✅ | ✅ | | | Need to setup in each projects. Except for backend colleagues, please only use it for search purposes as much as possible. Requires installing corresponding database driver separately |
| [[https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools-driver-mssql|SQLTools Microsoft SQL Server/Azure]] | ✅ | ✅ | ✅ | | | As SQLTools' driver. |
| [[https://marketplace.visualstudio.com/items?itemName=BitLaboratory.task-panel|Tasks Panel]] | ✅ | ✅ | ✅ | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode|tldraw]] | | | | | ✅ | |
| [[https://marketplace.visualstudio.com/items?itemName=octref.vetur|Vetur]] | ✅ | ✅ | | ✅ | | |
| [[https://marketplace.visualstudio.com/items?itemName=esskar.vscode-flutter-i18n-json|vscode-flutter-i18n-json]] | | | ✅ | | | |
| [[https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons|vscode-icons]] | | | | | ✅ | |
| [[https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets|Vue 3 Snippets]] | ✅ | ✅ | | ✅ | | A Vue.js 3 And Vue.js 2 Code Snippets Extension |
| [[https://marketplace.visualstudio.com/items?itemName=jeremyrajan.webpack|webpack]] | ✅ | ✅ | | | | |


=== file icon setting: ===

{{zh:staff:ma_daniel:file_icon_theme_1.png?400}}

{{zh:staff:ma_daniel:file_icon_theme_2.png?600}}

===== Use VS Code Regular Expression to search and replace =====

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

<note tip>VS Code allows you to search test or search by Regular Expression</note>

==== Example 1 ====

  * using regular expression to find and replace all $('...') to $("....")
  * escape characters like $ ( with \
  * using (.*) to match any characters inside
  * using $1 to replace the matched characters

<code>
\$\('(.*)'\)
$("$1")
</code>

{{:development:tools:vscode:screenshot_2022-07-13_at_1.34.58_pm.png?600|}}

==== Example 2 ====

{{:development:tools:vscode:screenshot_2020-06-19_at_11.54.44_am.png?400|}} 

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


  * Combined Examples
<code>
(?:(?=[^\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)
</code>

  * using optional
<code>
(?:(?=[^\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)
</code>

===== Use VS Code to Debug =====

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.

==== Prerequisite ====

  * install nodemon (to hot reload backend scripts for node.js)
<code>
$ npm install --save-dev nodemon
</code>

  * modify package.json to run dev mode with nodemon
<code>
  ...
  "scripts": {
    ...
    "dev": "cross-env NODE_ENV=development nodemon --inspect congress.system.js", // change your startup script name here
  },
  ...
</code>

==== Launch.json ====

Config the launch.json with different configurations:

<code>
{
  // 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}/*"
      }
    }
  ]
}
</code>

=== Explanations ===


  * 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

==== Debugging ====

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


===== Using VS Code to run Mocha =====

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
<code>
...
"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'",
}
</code>

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.
<code>
...
"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"
  },
]
</code>

<note tip>we may change "user interface" from "tdd" to "bdd"</note>


===== Using VS Code to run mochapack (for vue) =====

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

^ File | /webpack/vue.test.config.js |
<code>
'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()]
})
</code>

^ File | /public/test.setup.js |
<code>
'use strict'

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

chai.use(sinonChai)
</code>

^ File | package.json |
<code>
...
"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'",
}
</code>

add configuration to vscode launch.json file:
<code>
...
"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",
      ]
    }
]
</code>


===== Using VS Code to run Cucumber =====

Install cucumber-js and add features and steps
  * npm install --save-dev cucumber
  * add /features/xxx.feature
  * add /features/step_definitions/xxx.js

<code>
...
"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"
    }
]
</code>

===== Troubleshooting =====


Problem: Left side bar Explorer icon is missing

Solution:

Run this in VS Code command palette:
<code>
View: Reset View Locations
</code>