ESlint代码规范

2023-12-17 13:43:18

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

文章来源:https://blog.csdn.net/weixin_49307011/article/details/135015829
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。