Skip to content

vscode

vscode 代码规范

推荐安装插件

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

  • Live Server

  • Material Icon Theme

  • ESLint

  • Prettier - Code formatter

  • Vetur

    • 目前前端项目都是 vue 2 项目,推荐使用 vetur

可选插件:

  • TypeScript Extension Pack
  • EditorConfig for VS Code
  • Vue Language Features (Volar)
    • 暂时不用安装,vue 3 项目推荐使用,到时候可以根据项目生成 workspace 文件,目前统一配置即可
  • TypeScript Vue Plugin (Volar)

关于 workspace 可以查看这篇文章

主要是根据项目类型和框架版本生成不同的 workspace 文件,然后团队统一配置。

项目通用配置:

json
// settings.json

{
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "material-icon-theme",
  "editor.tabSize": 2,
  "editor.fontSize": 13, // allow customization
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "prettier.trailingComma": "none",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
    // "editor.defaultFormatter": "Vue.volar",
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "editor.unicodeHighlight.invisibleCharacters": false,
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "other": "on",
      "comments": "off",
      "strings": "off"
    },
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
// settings.json

{
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "material-icon-theme",
  "editor.tabSize": 2,
  "editor.fontSize": 13, // allow customization
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "prettier.trailingComma": "none",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
    // "editor.defaultFormatter": "Vue.volar",
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "editor.unicodeHighlight.invisibleCharacters": false,
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "other": "on",
      "comments": "off",
      "strings": "off"
    },
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

commit 规范可以由规范自己制定,社区都有成熟的包支持。

社区比较流行的是 angular 团队的 commit 规范。

commit message 格式如下:

xml
<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>

type 和 subject 必需,scope、body、footer 可选。

type描述
feat新增 feature
fix修复 bug
docs修改文档,如 readme.md
style修改代码格式,不改变代码逻辑,如逗号、缩进、空格等
refactor代码重构,没有新增功能或修复 bug
perf优化相关,如提升性能、用户体验等
test测试用例,包括单元测试、集成测试
ci修改 ci 配置文件或脚本,如 jenkins fastlame
chore修改构建脚本、或者增加依赖库、工具等
revert回滚之前的 commit