参考网址一

EB命名规范

  • 文件名采用短横线连接的方式
  • 公共组件采取大驼峰的命名方式
  • 原则上不推荐采用中文拼音命名，想用中文拼音的必须全拼且加上注释
  • CSS中class命名采取短横线连接的方式
  • 变量声明时，能用 const 就不用 let。全局常量需使用大写，如 USER_ID

JavaScript编码规范

  • 字符串使用单引号
  • 语句结束省略分号
  • 使用 === 进行等于判断
  • 代码缩进采取两空格

CSS编码规范

  • 不推荐行内样式
  • 推荐使用less

vue相关规范

父子组件props规范

设置引用类型的默认值应该要是一个函数，返回一个对象

  1. // good
  2. props: {
  3.   objectExample: {
  4.       type: Object,
  5.     default: () => {
  6.         return {}
  7.     }
  8.   }
  9. }
  11. // good
  12. props: {
  13.   objectExample: {
  14.       type: Object,
  15.     default() {
  16.         return {}
  17.     }
  18.   },
  19. }
  21. // bad
  22. props: ['objectExample']
  24. // bad
  25. props: {
  26.     objectExample: {
  27.     type: Object,
  28.     default: {}
  29.   }
  30. }

注释规范

  • 关键判断注释
  • 关键变量注释
  • 头部注释及函数注释，如下:

注释采用VScode编辑器的插件koroFileHeader生成
生成文件头部注释ctrl+alt+i
例如：

  1. <!--
  2.  * @Author: litaolin
  3.  * @Date: 2020-08-12 11:32:44
  4.  * @LastEditTime: 2020-08-26 10:51:36
  5.  * @LastEditors: litaolin
  6.  * @Description: live
  7. -->

在光标处生成函数注释ctrl+alt+t
例如：

  1. /**
  2. * @description: live
  3. * @param name {string}
  4. * @param id {number}
  5. * @return {boolean} 
  6. */

VScode setting.json配置

  1. {
  2.   "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  3.   "git.autofetch": true,
  4.   "editor.tabSize": 2,
  5.   "eslint.codeActionsOnSave ": true, // 每次保存的时候将代码按eslint格式进行修复
  6.   "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  7.   "prettier.semi": false, //去掉代码结尾的分号
  8.   "prettier.singleQuote": true, //使用单引号替代双引号
  9.   "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  10.   "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  11.   "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  12.   "vetur.format.defaultFormatterOptions": {
  13.     "js-beautify-html": {
  14.       "wrap_attributes": "force-aligned" //属性强制折行对齐
  15.     }
  16.   },
  17.   "eslint.validate": [
  18.     "javascript",
  19.     "javascriptreact",
  20.     {
  21.       "language": "html",
  22.       "autoFix": true
  23.     },
  24.     {
  25.       "language": "vue",
  26.       "autoFix": true
  27.     }
  28.   ],
  29.   // 头部注释
  30.   "fileheader.customMade": {
  31.     // 头部注释默认字段
  32.     "Author": "李滔林",
  33.     "Date": "Do not edit", // 设置后默认设置文件生成时间
  34.     "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
  35.     "LastEditors": "李滔林", // 设置后，保存文件更改默认更新最后编辑人
  36.     "Description": ""
  37.   },
  38.   "editor.detectIndentation": false,
  39.   "editor.quickSuggestions": {
  40.     "strings": true
  41.   },
  42.   "fileheader.configObj": {
  43.     "createHeader": true,
  44.     "autoAdd": false,
  45.     "prohibitAutoAdd": ["json", "md"] // 禁止.json .md文件，自动添加头部注释
  46.   },
  47.   "[javascript]": {
  48.     "editor.defaultFormatter": "HookyQR.beautify"
  49.   },
  50.   "window.zoomLevel": 0,
  51.   "[vue]": {
  52.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  53.   },
  54.   "editor.codeActionsOnSave": {
  55.     "source.fixAll.eslint": true
  56.   },
  57.   "git.enableSmartCommit": true,
  58.   "git.confirmSync": false
  59. }

VScode 相关插件（欢迎补充）

必选
  • eslint // 配置见setting.json
  • koroFileHeader // 文件注释和函数注释插件，约定配置项已在setting.json中配置
  • vetur // 支持vue插件

推荐选择
  • ant design vue helper // ant design vue的html提示插件
  • auto close tag // html标签闭合插件
  • auto rename tag //html标签重命名同步插件
  • bracket pair colorizer // 花括号颜色插件
  • open in browser // 浏览器打开插件

ESlint规则

规则对照地址
eslint错误级别：

  • “off” or 0 - 关闭规则
  • “warn” or 1 - 将规则视为一个警告（不会影响退出码）
  • “error” or 2 - 将规则视为一个错误 (退出码为1)
    1. module.exports = {
    2.   root: true,
    3. env: { // 运行环境
    4.   browser: true,
    5.   node: true
    6. },
    7. parserOptions: { // ES6解析相关配置
    8.   parser: 'babel-eslint'
    9. },
    10. extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/standard'], // 基础配置中的已启用的规则继承
    11. // 启用eslint的推荐规则
    12. rules: { // 验证规则
    13.     "vue/max-attributes-per-line": [2, { // 多个特性是否换行
    14.     "singleline": 10,
    15.     "multiline": {
    16.       "max": 1,
    17.       "allowFirstLine": false
    18.     }
    19.   }],
    20.   "vue/singleline-html-element-content-newline": "off", // html标签及内容是否换行
    21.   "vue/multiline-html-element-content-newline":"off",
    22.   "vue/name-property-casing": ["error", "PascalCase"],
    23.   "vue/no-v-html": "off",
    24.   'accessor-pairs': 2, // 在对象中使用getter/setter
    25.   'arrow-spacing': [2, { // =>函数的=>前后都至少需要一个空格
    26.     'before': true,
    27.     'after': true
    28.   }],
    29.   'block-spacing': [2, 'always'], // 强制在代码块中开括号({)前和闭括号(})后有空格
    30.   'brace-style': [2, '1tbs', {         // 强制在代码块中使用一致的大括号风格 
    31.     'allowSingleLine': true             // 左大括号与控制语句在同一行上
    32.   }],                                                            // 右大括号应与左大括号位于同一行，或位于前一个块之后的行上
    33.   'camelcase': [0, {              // 关闭强制属性使用骆驼拼写法命名约定
    34.     'properties': 'always'
    35.   }],
    36.   'comma-dangle': [2, 'never'],   // 禁止末尾逗号
    37.   'comma-spacing': [2, {          // 强制在逗号前后使用一致的空格
    38.     'before': false,                            // (默认)禁止在逗号前使用空格
    39.     'after': true                                    // (默认)要求在逗号后使用一个或多个空格
    40.   }],
    41.   'comma-style': [2, 'last'],     // 强制使用一致的逗号风格  (默认) 要求逗号放在数组元素、对象属性或变量声明之后，且在同一行
    42.   'constructor-super': 2,         // 要求在构造函数中有 super() 的调用
    43.   'curly': [2, 'all'],                     // 可以不写 (默认)强制所有控制语句使用一致的括号风格且必须使用括号
    44.   'dot-location': [2, 'property'], // 强制点号操作符应该和属性在同一行
    45.   'eol-last': 2,                  // 要求文件末尾存在一行空行
    46.   'eqeqeq': ["error", "always", {"null": "ignore"}], // 要求使用 === 和 !==
    47.   'generator-star-spacing': [2, { // 强制 generator 函数中 * 号周围使用一致的空格
    48.     'before': true,               // *前后都需要空格
    49.     'after': true
    50.   }],
    51.   'handle-callback-err': [2, '^(err|error)$'],  // 可以不写 要求nodejs和commonjs回调函数中有容错处理nodejs
    52.   'indent': [2, 2, {              // 强制 switch 语句中的 case 子句的缩进2个空格 
    53.     'SwitchCase': 1
    54.   }],
    55.   'jsx-quotes': [2, 'prefer-single'], // 强制所有不包含单引号的 JSX 属性值使用单引号
    56.   'key-spacing': [2, {                                 // 对象字面量的键和值之间使用一致的空格
    57.     'beforeColon': false,                         // 禁止在对象字面量的键和冒号之间存在空格
    58.     'afterColon': true                                // 要求在对象字面量的冒号和值之间存在至少有一个空格
    59.   }],
    60.   'keyword-spacing': [2, {        // 强制在关键字前后使用一致的空格
    61.     'before': true,                                // 要求在关键字之前至少有一个空格
    62.     'after': true                                    // 要求在关键字之后至少有一个空格
    63.   }],
    64.   'new-cap': [2, {                // 要求构造函数首字母大写
    65.     'newIsCap': true,             // 要求调用 new 操作符时有首字母大小的函数
    66.     'capIsNew': false                            // 允许调用首字母大写的函数时没有 new 操作符
    67.   }],
    68.   'new-parens': 2,                // 当使用 new 关键字调用没有参数的构造函数时，强制括号
    69.   'no-array-constructor': 2,      // 禁用 Array 构造函数
    70.   'no-caller': 2,                 // 禁用 arguments.caller 或 arguments.callee
    71.   'no-console': 'off',            // 允许使用console
    72.   'no-class-assign': 2,           // 禁止修改类声明的变量
    73.   'no-cond-assign': 2,            // 禁止在条件语句中出现赋值操作符 eslint:recommended
    74.   'no-const-assign': 2,           // 禁止修改 const 声明的变量 eslint:recommended
    75.   'no-control-regex': 0,          // 禁止在正则表达式中使用控制字符 eslint:recommended
    76.   'no-delete-var': 2,             // 禁止删除变量 eslint:recommended
    77.   'no-dupe-args': 2,              // 禁止 function 定义中出现重名参数 eslint:recommended
    78.   'no-dupe-class-members': 2,     // 禁止类成员中出现重复的名称 eslint:recommended
    79.   'no-dupe-keys': 2,              // 禁止对象字面量中出现重复的 key eslint:recommended
    80.   'no-duplicate-case': 2,         // 禁止出现重复的 case 标签  eslint:recommended
    81.   'no-empty-character-class': 2,  // 禁止在正则表达式中使用空字符集 eslint:recommended
    82.   'no-empty-pattern': 2,          // 禁止使用空解构模式 eslint:recommended
    83.   'no-eval': 2,                   // 禁用 eval()
    84.   'no-ex-assign': 2,              // 禁止对 catch 子句的参数重新赋值 eslint:recommended
    85.   'no-extend-native': 2,          // 禁止扩展原生类型
    86.   'no-extra-bind': 2,             // 禁止不必要的 .bind() 调用
    87.   'no-extra-boolean-cast': 2,     // 禁止不必要的布尔转换 eslint:recommended
    88.   'no-extra-parens': [2, 'functions'],
    89.   'no-fallthrough': 2,
    90.   'no-floating-decimal': 2,
    91.   'no-func-assign': 2,
    92.   'no-implied-eval': 2,
    93.   'no-inner-declarations': [2, 'functions'],
    94.   'no-invalid-regexp': 2,
    95.   'no-irregular-whitespace': 2,
    96.   'no-iterator': 2,
    97.   'no-label-var': 2,
    98.   'no-labels': [2, {
    99.     'allowLoop': false,
    100.     'allowSwitch': false
    101.   }],
    102.   'no-lone-blocks': 2,
    103.   'no-mixed-spaces-and-tabs': 2,
    104.   'no-multi-spaces': 2,
    105.   'no-multi-str': 2,
    106.   'no-multiple-empty-lines': [2, {
    107.     'max': 1
    108.   }],
    109.   'no-native-reassign': 2,
    110.   'no-negated-in-lhs': 2,
    111.   'no-new-object': 2,
    112.   'no-new-require': 2,
    113.   'no-new-symbol': 2,
    114.   'no-new-wrappers': 2,
    115.   'no-obj-calls': 2,
    116.   'no-octal': 2,
    117.   'no-octal-escape': 2,
    118.   'no-path-concat': 2,
    119.   'no-proto': 2,
    120.   'no-redeclare': 2,
    121.   'no-regex-spaces': 2,
    122.   'no-return-assign': [2, 'except-parens'],
    123.   'no-self-assign': 2,
    124.   'no-self-compare': 2,
    125.   'no-sequences': 2,
    126.   'no-shadow-restricted-names': 2,
    127.   'no-spaced-func': 2,
    128.   'no-sparse-arrays': 2,
    129.   'no-this-before-super': 2,
    130.   'no-throw-literal': 2,
    131.   'no-trailing-spaces': 2,
    132.   'no-undef': 2,
    133.   'no-undef-init': 2,
    134.   'no-unexpected-multiline': 2,
    135.   'no-unmodified-loop-condition': 2,
    136.   'no-unneeded-ternary': [2, {
    137.     'defaultAssignment': false
    138.   }],
    139.   'no-unreachable': 2,
    140.   'no-unsafe-finally': 2,
    141.   'no-unused-vars': [2, {
    142.     'vars': 'all',
    143.     'args': 'none'
    144.   }],
    145.   'no-useless-call': 2,
    146.   'no-useless-computed-key': 2,
    147.   'no-useless-constructor': 2,
    148.   'no-useless-escape': 0,
    149.   'no-whitespace-before-property': 2,
    150.   'no-with': 2,
    151.   'one-var': [2, {
    152.     'initialized': 'never'
    153.   }],
    154.   'operator-linebreak': [2, 'after', {
    155.     'overrides': {
    156.       '?': 'before',
    157.       ':': 'before'
    158.     }
    159.   }],
    160.   'padded-blocks': [2, 'never'],
    161.   'quotes': [2, 'single', {
    162.     'avoidEscape': true,
    163.     'allowTemplateLiterals': true
    164.   }],
    165.   'semi': [2, 'never'],
    166.   'semi-spacing': [2, {
    167.     'before': false,
    168.     'after': true
    169.   }],
    170.   'space-before-blocks': [2, 'always'],
    171.   'space-before-function-paren': [2, 'never'],
    172.   'space-in-parens': [2, 'never'],
    173.   'space-infix-ops': 2,
    174.   'space-unary-ops': [2, {
    175.     'words': true,
    176.     'nonwords': false
    177.   }],
    178.   'spaced-comment': [2, 'always', {
    179.     'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    180.   }],
    181.   'template-curly-spacing': [2, 'never'],
    182.   'use-isnan': 2,
    183.   'valid-typeof': 2,
    184.   'wrap-iife': [2, 'any'],
    185.   'yield-star-spacing': [2, 'both'],
    186.   'yoda': [2, 'never'],
    187.   'prefer-const': 2,
    188.   'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    189.   'object-curly-spacing': [2, 'always', {
    190.     objectsInObjects: false
    191.   }],
    192.   'array-bracket-spacing': [2, 'never']
    193. }
    194. }

ESlint规则详解

no-cond-assign 禁止条件表达式中出现赋值操作符
  1. // bad
  2. if (x = 0) {
  3.     ...
  4. }
  6. // good
  7. if (x === 0) {
  8.     ...
  9. }

no-dupe-args 禁止 function 定义中出现重名参数
  1. // bad
  2. function foo(a, b, a) {
  3. }
  5. // good
  6. function foo(a, b, c) {
  7. }

no-extra-bind 禁止不必要的 .bind() 调用
  1. // bad
  2. var boundGetName = (function getName() {
  3.     return "ESLint";
  4. }).bind({ name: "ESLint" });
  5. console.log(boundGetName());  
  7. // good
  8. var boundGetName = (function getName() {
  9.     return this.name;
  10. }).bind({ name: "ESLint" });
  11. console.log(boundGetName());

no-extra-boolean-cast 禁止不必要的布尔转换
  1. // bad
  2. if (!!foo) {
  3.     // ...
  4. }
  6. // good
  7. if (foo) {
  8.     // ...
  9. }