ESlint代码规范

1,按照指引;

1.1 安装依赖
npm install typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

1.2 创建ESLint配置文件

touch .eslintrc
// 写入配置
{"root": true,"parser": "@typescript-eslint/parser","plugins": ["@typescript-eslint"
  ],"extends": ["eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended"
  ]
}

1.3 创建ESLint忽略文件配置

touch .eslintignore
//  写入
node_modules
dist

1.4  在package.json中添加lint命令

{   "scripts": {  "lint": "eslint . --ext .ts",   }}

2,ESlint规则详解;

"off"可以替换成0,代表关闭该规则
"warn"可以替换成1,代表打开规则,提示警告,但不会报错
"error"可以替换成2,代表打开规则,直接报错

    "rules": {  // 新增校验规则"no-console": 0 ,// 如果有console,会抛出错误"prefer-const": 0 , // 不需要只能const声明变量"no-var": 2 , // 不能使用var声明变量"no-case-declarations": 0 , // 代码作用域的问题"no-useless-escape": 0 , // 转义字符串,模板文字和正则表达式中的非特殊字符不会产生任何影响"no-unused-vars":  0 , // 该规则旨在消除未使用的变量,函数和函数的参数"@typescript-eslint/ban-types": [  // 强制不使用类型
          "error",{"extendDefaults": true,
            "types": {"{}": false,"Function": false}}
        ],"prefer-rest-params": 0 , // 该规则旨在标记arguments变量的使用"no-prototype-builtins": 0, // 这个规则不允许直接在Object.prototype对象实例上调用某些方法"@typescript-eslint/no-explicit-any": 0  // 新增这句话,关闭any报错} 

3,ESLint自动修复

从上面的错误可以看到,它告诉我们共有7个问题,有5个问题可以通过–fix自动修复。

✖ 7 problems (7 errors, 0 warnings)
5 errors and 0 warnings potentially fixable with the --fix 

{   "scripts": {    "lint": "eslint . --ext .ts",     "lint:fix": "eslint . --ext .ts --fix"   },}

然后运行 npm run lint:fix

4, FAQ;

如果您的团队对代码要求宽松,不想花费时间去每条的去看ESLint规则,可以使用eslint:recommended,ESLint推荐的配置。

如果团队对代码要求严格,也不想花费时间去每条的去看ESLint规则,可以使用大公司开源的ESLint规则,比如Airbnb、Facebook的规则,拿过来进行简单的修改即可。我团队目前在用的就是Airbnb的规则。

如果团队对代码要求严格,并且有时间,可以自己按照ESLint规则一条一条的制定属于自己团队的规则。

在现实项目中,我们一般会使用Husky和ESLint来搭配使用,在团队成员用Git提交代码的时候,进行lint检查,防止错误的代码被提交到版本库。

ESlint规则手册:  http://www.verydoc.net/eslint/00003544.html

你的组件中应该按照以下顺序来声明属性:

"components":声明引入的子组件
"props":声明组件的输入属性
"data":声明组件的数据
"computed":声明计算属性
"watch":声明观察者
"methods":声明组件的方法
生命周期钩子:按照它们被调用的顺序声明,如 "beforeCreate""created""beforeMount" 等等。