web 开发规范

代码格式化

背景

为了提示代码美观性，易读性，团队开发的人员越来越多，有时候格式化代码不同，会导致git提交有冲突。 统一代码格式化通过prettier来格式化代码，现在项目中已经有.prettierrc配置项，大家只需要打开保存时自动格式化就行了。

vscode 配置

在 VS Code 中安装 Prettier 插件（或其他编辑器中安装对应的插件）。

修改 VS Code 用户设置文件（setting.json），添加以下配置项：

{
  "editor.formatOnSave": true
}

其中， "editor.formatOnSave": true 表示在保存文件时自动进行格式化。

webstrom 配置

安装 Prettier 插件：在 WebStorm 中打开 Settings（或 Preferences） 窗口，选择 Plugins，搜索安装 Prettier。

配置 Prettier：在 Settings 窗口中选择 Languages & Frameworks -> JavaScript -> Prettier。

eslint 校验规则

背景

为了代码格式统一，阅读代码方便，提升团队协作效率，启用 eslint 规则校验 本规则，去除了大部分烦人的规则，仅留一些有用的，如有不对的地方，或者难用的规则，欢迎大家指正

//规则
rules = {
    "curly": [2, "all"], // 必须使用 if(){} 中的{}
    "no-alert": 2, // 禁止使用 alert confirm prompt
    "no-const-assign": 2, // 禁止修改const声明的变量
    "no-constant-condition": 2, // 禁止在条件中使用常量表达式 if(true) if(2)
    "no-debugger": 2, // 禁止使用debugger
    "no-delete-var": 2, // 不能对var声明的变量使用delete操作符
    "no-div-regex": 2, // 不能使用看起来像除法的正则表达式 /=foo/
    "no-dupe-keys": 2, // 在创建对象字面量时不允许键重复 {a:2,a:2}
    "no-dupe-args": 2, // 函数参数不能重复
    "no-duplicate-case": 2, // switch中的case标签不能重复
    "no-extend-native": 2, // 禁止扩展native对象
    "no-extra-bind": 2, // 禁止不必要的函数绑定
    "no-fallthrough": 2, // 禁止switch穿透(缺少break关键字)
    "no-func-assign": 2, // 禁止重复的函数声明
    "no-invalid-regexp": 2, // 禁止无效的正则表达式
    "no-invalid-this": 2, // 禁止无效的this，只能用在构造器，类，对象字面量
    "no-label-var": 2, // label名不能与var声明的变量名相同 (说明：同时出现 no-labels 错误)
    "no-negated-in-lhs": 2, // in操作符的左边不能有! (即 no-unsafe-negation)
    "no-new-wrappers": 2, // 禁止使用new创建包装实例，new String;new Boolean; new Number
    "no-obj-calls": 2, // 不能调用内置的全局对象，比如Math()JSON() (说明: 同时出现 new-cap 错误)
    // "no-param-reassign": 2, // 禁止给参数重新赋值
    "no-redeclare": 2, // 禁止重复声明变量 (同noDupeArgs.js 禁止参数重复,已添加示例)
    "no-self-compare": 2, // 不能比较自身
    "no-sequences": 2, // 禁止使用逗号运算符
    // "no-shadow": 2, // 外部作用域中的变量不能与它所包含的作用域中的变量或参数同名 (示例同noCatchShadow.js)
    // "no-shadow-restricted-names": 2, // 严格模式中规定的限制标识符不能作为声明时的变量名使用 (说明： 同时报no-undefined错误)
    "no-spaced-func": 2, // 函数调用时函数名与()之间不能有空格
    "no-sparse-arrays": 2, // 禁止稀疏数组，[2, , 2]
    "no-undef": 2, // 不能有未定义的变量
    "no-undef-init": 2, // 变量初始化时不能直接给它赋值为undefined (说明：同时报no-undefined 错误)
    "no-unneeded-ternary": 2, // 禁止不必要的嵌套var isYes = answer === 2 ? true: false; (说明： 示例同时有 no-ternary 错误)
    "no-unreachable": 2, // 不能有无法执行的代码
    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], // 不能有声明后未被使用的变量或参数
    "no-use-before-define": 2, // 未定义前不能使用
    "no-useless-call": 2, // 禁止不必要的call和apply （说明：同时报 prefer-reflect 错误）
    "computed-property-spacing": [2, "never"], // 是否允许计算后的键名什么的 (说明: 示例未实现)
    // "dot-notation": [2, {"allowKeywords": true}], // 避免不必要的方括号
    "generator-star-spacing": 2, // 生成器函数*的前后空格
    "handle-callback-err": 2, // nodejs处理错误
    // "indent": [2, 2], // 缩进风格
    "new-parens": 2, // new时必须加小括号
    // "semi": [2, "always"], // 语句强制分号结尾
    "use-isnan": 2, // 禁止比较时使用NaN，只能用isNaN() (说明：同时报id-match错误)
    "valid-typeof": 2, // 必须使用合法的typeof的值
    "vue/order-in-components":0, //component排序
    //html
    "vue/max-attributes-per-line": ["error", { //html属性一行不能超过三个
        "singleline": 5,
        "multiline": 3
    }],
    "vue/attributes-order":0, // 属性排序
    "vue/html-self-closing":0,
    "vue/html-quotes":0, //强制双引号
    "vue/multiline-html-element-content-newline":0,
    "vue/singleline-html-element-content-newline":0,
    "vue/html-closing-bracket-newline":0,
    "vue/mustache-interpolation-spacing":0,
    "vue/name-property-casing":0,
    "vue/no-v-html":0,
    "vue/attribute-hyphenation":0,
    "vue/require-default-prop":0,
    "vue/prop-name-casing":0,
    "no-prototype-builtins":0,
    "vue/require-prop-types":0,
    "no-invalid-this":0,
}

注意

需要注意的几点

• if 语句必须有大括号

// 错误示例
if (a > 0) return
// 正确示例
if (a > 0) {
  return
}

• 不能有未定义的变量
• html 属性一行不得超过 5 个，保证代码清晰可读

// 错误示例
<el-dialog title="标题" width="100px" before-close="close" append-to-body center close-delay></el-dialog>
// 正确示例
<el-dialog title="标题" width="100px" before-close="close" append-to-body center close-delay> </el-dialog>

以上是最容易出现的三个。

开发规范

• 前端尽量去完整的完成表单校验，不应该只去校验必填非必填。
• 前后端交互的地方，要防止重复请求后台
• 每个文件代码不应超过 500 行（暂定），要把页面模块化，后期阅读代码也会更方便。
• 每个方法不能涉及太多嵌套。

// 错误示例
function name() {
  if (a < 0) {
    if (b > 0) {
      if (c < 0) {
      } else {
      }
    } else {
      if (c < 0) {
      } else {
      }
    }
  } else {
    if (b > 0) {
      if (c < 0) {
      } else {
      }
    } else {
      if (c < 0) {
      } else {
      }
    }
  }
}