如果您也使用VS Code作为CabloyJS项目开发的主编辑器,那么可以参考官方使用的插件集,此外也提供了一些周边工具

这是官方亲测可用的最简插件集,再也不必东奔西走了

插件集

插件名称 用途
Vim Vim模拟
ESLint 格式验证工具
Prettier - Code formatter 格式化工具
Vetur Vue语言服务
.ejs ejs语言服务
All Autocomplete 从已打开文件生成自动完成条目
Search node_modules 快速检索node_modules中的文件

settings.json

打开系统配置文件settings.json,添加以下配置:

{
  ...
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  // prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // vetur
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
    }
  },
  // associations
  "files.associations": {
    "*.js.ejs": "javascript",
    "*.css.ejs": "css",
    "*.less.ejs": "less"
  },
  ...
}

代码片段

在项目根目录提供了代码片段的样本文件: .vscode/cabloy.code-snippets,方便我们快速生成各类代码骨架,目前提供的代码片段如下:

/**
* supported code snippets as follows:
*   controller service model route
*   atom broadcast event local
*   middleware queue schedule sequence
*   startup stats test
**/

启动项配置

在项目根目录提供了启动项配置文件:.vscode/launch.json,方便我们直接启动后端服务,进入调试环境