前端-团队效率(二)代码规范

1,715 阅读2分钟

团队协作中最重要的一点就是代码规范

  1. 开发规范文档为尺度
  2. vscode编码格式为利刃(文章结尾分享本人使用的vscode配置)
  3. 插件(重要) Beautify css/sass/scss/less,Chinese (Simplified) Language Pack for Visual Studio Code,ESLint,Git History,Git Project Manager,GitLens — Git supercharged,Path Intellisense,Vetur,npm,Live Server,koroFileHeader,Terminal
  4. 插件(不那么重要)Bracket Pair Colorizer,Code Spell Checker,Comment Translate
  5. 其他语言
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// "javascript.suggest.autoImports": true,
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
"explorer.confirmDelete": false,
"fileheader.customMade": {
"Description": "描述",
"Author": "吴文周",
"Github": "https://github.com/fodelf",
"Date": "Do not edit", // 文件创建时间(不变)
"LastEditors": "吴文周", // 文件最后编辑者
"LastEditTime": "Do not edit" // 文件最后编辑时间
},
// 函数注释
"fileheader.cursorMode": {
"name": "默认名称",
"description": "默认描述",
"param {type}": "默认参数",
"return {type}": "默认类型",
},
// 将该选项设置为true即可开启
"fileheader.configObj": {
"autoAdd": true,
},
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "vue"
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// "npm-intellisense.scanDevDependencies": true,
// "npm-intellisense.importES6": true,
// "npm-intellisense.importQuotes": "'",
// "npm-intellisense.importLinebreak": ";\r\n",
// "npm-intellisense.importDeclarationType": "const",
}

{  // vscode默认启用了根据文件类型自动设置tabsize的选项  "editor.detectIndentation": false,  // 重新设定tabsize  "editor.tabSize": 2,  // #每次保存的时候自动格式化   "editor.formatOnSave": true,  // #每次保存的时候将代码按eslint格式进行修复  "eslint.autoFixOnSave": true,  // 添加 vue 支持  "eslint.validate": [    "javascript",    "javascriptreact",    {      "language": "vue",      "autoFix": true    }  ],  // "javascript.suggest.autoImports": true,  //  #让prettier使用eslint的代码格式进行校验   "prettier.eslintIntegration": true,  //  #去掉代码结尾的分号   "prettier.semi": false,  //  #使用带引号替代双引号   "prettier.singleQuote": true,  //  #让函数(名)和后面的括号之间加个空格  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,  // #这个按用户自身习惯选择   "vetur.format.defaultFormatter.html": "js-beautify-html",  // #让vue中的js按编辑器自带的ts格式进行格式化   "vetur.format.defaultFormatter.js": "vscode-typescript",  "vetur.format.defaultFormatterOptions": {    "js-beautify-html": {      "wrap_attributes": "force-aligned"      // #vue组件中html代码格式化样式    }  },  "explorer.confirmDelete": false,  "fileheader.customMade": {    "Description": "描述",    "Author": "吴文周",    "Github": "https://github.com/fodelf",    "Date": "Do not edit", // 文件创建时间(不变)    "LastEditors": "吴文周", // 文件最后编辑者    "LastEditTime": "Do not edit" // 文件最后编辑时间  },  // 函数注释   "fileheader.cursorMode": {    "name": "默认名称",    "description": "默认描述",    "param {type}": "默认参数",    "return {type}": "默认类型",  },  // 将该选项设置为true即可开启  "fileheader.configObj": {    "autoAdd": true,  },  "files.associations": {    "*.cjson": "jsonc",    "*.wxss": "css",    "*.wxs": "javascript",    "*.vue": "vue"  },  "editor.suggestSelection": "first",  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",  "[javascript]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  // "npm-intellisense.scanDevDependencies": true,  // "npm-intellisense.importES6": true,  // "npm-intellisense.importQuotes": "'",  // "npm-intellisense.importLinebreak": ";\r\n",  // "npm-intellisense.importDeclarationType": "const",}