前端规范

大前端JS书写规范——airbnb规范

    之前是使用jshint做的代码检测，只是在sublime中加上了提示，后来开始做vue的时候，尝试了一下eslint，觉得限制太多，无法写代码了。
    最近由看小组其余成员写的代码，有的惨不忍睹，有的千奇百怪……认识到，还是使用eslint的好。

    今天使用vue-cli新建vue项目的时候，选择使用eslint的时候，发现多了一个步骤，就是可以选择代码风格的标准。
    第一种是标准的，第二种是Airbnb的，第三种是完全自己添加的。
    Airbnb的之前没用过，于是搜索之，别说，规范还真挺全，中文版也有。

    详细版地址：
    https://github.com/airbnb/javascript
    中文翻译版

    现将主要的与Standard不同的地方说一下；

  • 1、默认必须要分号，而eslint默认不添加分号
  • 2、默认不允许使用var创建变量，而是使用let 或 const代替
  • 3、接上一条，如果使用了let创建了变量，在后面没有对此变量改变，应当使用const代替
  • 4、最变态的一点，不能使用for循环
    就算是设置了可以使用for循环，不能for(let i = 0;)，会提示要使用const代替
  • 5、对箭头函数的使用
    能使用监听函数的，需要使用监听函数
    对箭头函数使用的限制，有很多。

  • 6、空格的不同
    定义属性时，如 a : 1，在eslint的标准版，冒号前后需要都加空格，而在airbnb中，冒号前面不能加空格。

  • 7、还有一些更严格的语法，待观察

    刚好我们现在要开始一个新的vue webapp开发，刚好，从这个系统开始，强推一下JS规范，顺便把ES6的语法强化一下，虽然开始的时候肯定会阵痛，但我相信是值得的

修改了之前的一个中小型项目，由于业务的需求，先达到一个妥协的版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'rules': {
  'no-unused-vars': 0, // 定义了变量，未使用。可能有全局变量，别人使用的
  'global-require': 0, // 不能使用require
  'comma-dangle': 0, // 结尾逗号
  'no-console': 0, // 不能有console，警告
  'no-param-reassign': 0, // 不允许函数参数重新赋值
  'no-unused-expressions': 0, // 不允许  this.toast.finally && this.toast.finally();形式
  'func-names': 0, // 不允许使用 const getList = function() {...}，是个警告
  'no-prototype-builtins': 0, // 不能使用prototype操作
  'no-restricted-syntax': 0, // 禁止使用for in
  'prefer-const': 0, // 如果没改变的话，必须是const
  'no-undef': 0, // 使用了未定义的变量
  'arrow-parens': 0, // 箭头函数用小括号括起来
  'object-shorthand': 0, //强制对象字面量缩写语法、
  'guard-for-in': 0, // for in循环要用if语句过滤
  'import/no-dynamic-require': 0 // 不能使用动态require

分享