针对移动端的前端工作流(8)—ESLint

有这个需求

团队有规范，可是如何践行规范呢？

ESLint

在开启gulp命令的情况下，每当js文件进行保存时，我们会对js文件进行代码检查，如果有不符合规范的地方，会有消息提醒，在mac下长这个样子：

error

具体的不规范内容请查看终端：

error-detail

我们团队的JavaScript的编码规范是基于百度的JavaScript编码规范，ESLint配置并没有覆盖所有的规范，具体的配置文件在.eslintrc中

  2. {
  3.   "env": {
  4.     "browser": true,
  5.     "node": true
  6.   },
  7.   "rules": {
  8.     //使用了控制符分类不匹配任何字符串的正则表达式：var foo = /^abc[]/;
  9.     "no-empty-character-class": "error",
  10.     //函数参数不能够使用相同的参数名
  11.     "no-dupe-args": "error",
  12.     //在使用对象字面量申明对象的时候，不能够使用相同的键名
  13.     "no-dupe-keys": "error",
  14.     //在switch语句中，禁止使用相同的case值。
  15.     "no-duplicate-case": "error",
  16.     //为了消除代码中的空代码块，空代码块并不会导致技术性错误，但是在代码review时可能会代码疑惑。带空代码块中包含注释语句时，将不再视为错误。
  17.     "no-empty": "error",
  18.     //当错误发生并通过一个catch代码块去捕获错误时，有可能意外的重写了捕获的错误
  19.     "no-ex-assign": "error",
  20.     //尽管多余的分号不会导致代码错误，但是会使得代码难以理解
  21.     "no-extra-semi": "error",
  22.     //在通过函数声明书写函数时，函数被重写或者被重新赋值就会抛出错误。
  23.     "no-func-assign": 2,
  24.     //不要像函数一样调用Math和JSOM
  25.     "no-obj-calls": "error",
  26.     //在正则表达式中如果需要使用多个空格的时候，尽量使用量词，如{2}。而不是使用多个空格
  27.     "no-regex-spaces": 2,
  28.     //为了保证两行不相关的代码不会意外的被当做一行代码来解析了
  29.     "no-unexpected-multiline": 2,
  30.     //为了检测代码块、switch语句中不被使用到的代码
  31.     "no-unreachable": 2,
  32.     //不要和NaN做比较，而应该使用isNaN()
  33.     "use-isnan": 2,
  34.     //为了保证typeof 操作符返回的结果必须和 "undefined",  "object",  "boolean", "number", "string", 和  "function"作比较
  35.     "valid-typeof": 2,
  36.     "no-eval": "error",
  37.     "no-delete-var": "error",
  38.     //声明变量时不要覆盖JavaScript中的一些保留关键字
  39.     "no-shadow-restricted-names": "error",
  40.     //对象或者数组最后一个后面不加逗号
  41.     "comma-dangle": [2, "never"],
  42.     //定义数组字面量定义数组时，前后不加空格,var arr = ['foo', 'bar', 'baz'];
  43.     "array-bracket-spacing": [2, "never"],
  44.     //在单行代码块中，代码块前后需要留空白,if (foo) { bar = 0; }
  45.     // "block-spacing": 2,
  46.     //在这种写法中，if、else、try、catch都应该单独启一行
  47.     "brace-style": [2, "stroustrup", { "allowSingleLine": true }],
  48.     //代码块的开始和结尾是否应该留一个空行
  49.     // padded-blocks: ["error", "always"],
  50.     // 双峰驼命名格式
  51.     "camelcase": 2,
  52.     // 控制逗号前后的空格
  53.     "comma-spacing": [2, { "before": false, "after": true }],
  54.     //逗号应该放在行末
  55.     "comma-style": [2, "last"],
  56.     //在对象的动态属性（computed properties： ES6引入）中不添加空白
  57.     "computed-property-spacing": [2, "never"],
  58.     //冒号前面不留空白，后面有空格
  59.     "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
  60.     //单行注释前空行，后不空行，块注释前后都有空行
  61.     // "lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": true, "beforeLineComment": true, "afterLineComment": false }]
  62.     //函数名和括号之间不能有空格
  63.     "no-spaced-func": "error",
  64.     //字符串使用单引号
  65.     "quotes": ["error", "single"],
  66.     //规定分号前后不加空格，后加空格
  67.     "semi-spacing": ["error", {"before": false, "after": true}],
  68.     // if, else, for, while, do, switch, try, catch, finally, and with后加空格
  69.     "keyword-spacing": ["error", { "after": true }],
  70.     //代码块前是否需要加空格
  71.     "space-before-blocks": "error",
  72.     //function 关键字后面的小括号前加空格。
  73.     "space-before-function-paren": 2,
  74.     //规定圆括号内部的空格, foo('bar');
  75.     "space-in-parens": ["error", "never"],
  76.     //在操作符左右添加空格
  77.     "space-infix-ops": "error",
  78.     //在代码注释符号后面加一个空格
  79.     "spaced-comment": ["error", "always"],
  80.     //单行最大长度120
  81.     "max-len": ["error", 120],
  82.     //不得省略语句结束的分号
  83.     "semi": 2
  84.   }
  85. }

如果你也想根据团队的规范修改配置，可以查看eslint中文文档