If you also use VS Code as the main editor for CabloyJS project development, you can refer to the official set of extensions. In addition, the official provides the default optimal settings for project development

This is the simplest set of extensions and the optimal settings available with official testing. You don’t have to go around anymore

Extensions

Extension Name Description
Vim Vim emulation for VS Code
ESLint Integrates ESLint JavaScript
Prettier - Code formatter Code formatter using prettier
Vetur Vue tooling for VS Code
.ejs EJS language support
All Autocomplete Create autocomplete items from open files
Search node_modules Quickly search the node_modules folder

Settings.json

The settings file {project}/.vscode/settings.json is provided in the project root directory. The main parameter settings are as follows:

  1. 1{
  2. 2  ...
  3. 3  "editor.tabSize": 2,
  4. 4  "editor.formatOnSave": true,
  5. 5  // eslint
  6. 6  "editor.codeActionsOnSave": {
  7. 7    "source.fixAll.eslint": true
  8. 8  },
  9. 9  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  10. 10  // prettier
  11. 11  "editor.defaultFormatter": "esbenp.prettier-vscode",
  12. 12  "[javascript]": {
  13. 13    "editor.defaultFormatter": "esbenp.prettier-vscode"
  14. 14  },
  15. 15  // vetur
  16. 16  "vetur.format.defaultFormatter.html": "js-beautify-html",
  17. 17  "vetur.format.defaultFormatterOptions": {
  18. 18    "js-beautify-html": {
  19. 19      "wrap_attributes": "aligned-multiple"
  20. 20    }
  21. 21  },
  22. 22  // associations
  23. 23  "files.associations": {
  24. 24    "*.js.ejs": "javascript",
  25. 25    "*.css.ejs": "css",
  26. 26    "*.less.ejs": "less"
  27. 27  },
  28. 28  ...
  29. 29}

Code Snippets

The code snippets file {project}/.vscode/cabloy.code-snippets is provided in the project root directory, which facilitates us to quickly generate various code skeletons. The code snippets currently provided are as follows:

  1. 1/**
  2. 2* supported code snippets as follows:
  3. 3*   controller service model route
  4. 4*   atom broadcast event local
  5. 5*   middleware queue schedule sequence
  6. 6*   startup stats test
  7. 7**/

For example, you can create a Controller class as follows:

cabloy-snippet-zhcn

Launch Configurations

The launch configurations file {project}/.vscode/launch.json is provided in the project root directory, which facilitates us to directly start the backend service and enter the debugging environment

vscode-debug