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"?等等。