ESlint 中常见报错的类型和解决方案

这是我在使用 eslint 过程中遇到的一些问题，和自己总结的一些，希望对大家有帮助。

• vue 中 quotes 报错 ：不能使用双引号 “ ”，只能使用单引号 ‘ ’；

• vue 中 indent 报错：报错代码的这行缩进有问题，直接格式化一下，或者设置一下缩进；

• vue 中 eol-last 报错：代码的末尾没有 enter 回车，或者在 eslint.js 中 rules 中 加上

  'eol-last': 0 
  

  ；表示不需要在末尾 enter;

• vue 中 standard/no-callback-literal 报错：这是回调函数的个税错误，需要在 eslint.js 中 添加：

  "no-callback-literal": 0
  

  我的代买是这样的：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1H8qPR57-1576466655867)(http://i.caigoubao.cc/627328/1575597377(1)].png)

  上面这种方式一般可行性不高，所以还是采用以下的方式就不会报错了：

  

• vue 中 curly 报错：例如下面这样写就是错误的

  if (res.meta.status !== 200) 
      return this.$message.error('获取用户列表失败！')
        this.userlist = res.data.users
        this.total = res.data.total
  

  需要这样写：

  if (res.meta.status !== 200) return this.$message.error('获取用户列表失败！')
        this.userlist = res.data.users
        this.total = res.data.total
  

  或者是这样写：

  if (res.meta.status !== 200) {
      return this.$message.error('获取用户列表失败！')
  } else {
        this.userlist = res.data.users
        this.total = res.data.total
  }
  

  就是说 if 条件语句后面执行的代码需要放在 { } 中，如果不写 { } ，则需要并排放在一行。

• vue 中 no-multiple-empty-lines 报错：代码行之间不允许出现多个空行，你检查代码是否有多个空行吧，有的话去掉空行，行与行之间最多可保留一个空行，或者你在初始化项目的时候在Use ESLint to lint your code 时候选择no;

• vue 中 no-template-curly-in-string 报错：是因为没有用反斜引号 ``；

  const { data: res } = await this.$http.post(
            'categories/${this.catdId}/attributes',
            {
              params: {
                attr_name: this.addForm.attr_name,
                attr_sel: this.activeName
              }
            }
          )
  

  const { data: res } = await this.$http.post(
            `categories/${this.catdId}/attributes`,
            {
              params: {
                attr_name: this.addForm.attr_name,
                attr_sel: this.activeName
              }
            }
          )
  

• "no-console": "error", 　　　　　　　　　　　　　　　　 // 禁止console
  "no-alert": "error", 　　　　　　　　　　　　　　　　　 // 禁止alert,conirm等
  "no-debugger": "error", 　　　　　　　　　　　　　　　 // 禁止debugger
  "semi": ["error", "never"],　　　　　　　　　　　　   // 禁止分号
  "no-tabs": "error", 　　　　　　　　　　　　　　　　　　// 禁止使用tab
  "no-unreachable": "error", 　　　　　　　　　　　　　　// 当有不能执行到的代码时
  "eol-last": "error", 　　　　　　　　　　　　　　　　　　// 文件末尾强制换行
  "no-new": "error",　　　　　　　　　　　　　　　　　　　 // 禁止在使用new构造一个实例后不赋值
  "quotes": ["error", "backtick"], 　　　　　　　　　　 // 引号类型 `` "" ''
  "no-unused-vars": ["error", { "vars": "all", "args": "after-used" }], 　　// 不能有声明后未被使用的变量
  "no-trailing-spaces": "error", 　　　　　　　　　　　　// 一行结束后面不要有空格
  "space-before-function-paren": ["error", "never"], // 函数定义时括号前面要不要有空格
  "no-undef": "error", 　　　　　　　　　　　　　　　　　　// 不能有未定义的变量,定义之前必须有var或者let
  "curly": ["error", "all"], 　　　　　　　　　　　　　　 // 必须使用 if(){} 中的{}
  'arrow-parens': "error", 　　　　　　　　　　　　　　　　// 箭头函数的参数要有()包裹
  'generator-star-spacing': "error", 　　　　　　　　　　// allow async-await
  "space-before-function-paren": ["error", "never"],  // 禁止函数名前有空格，如function Test (aaa,bbb)
  "space-in-parens": ["error", "never"], 　　　　　　　　// 禁止圆括号有空格，如Test( 2, 3 )
  "space-infix-ops": "error", 　　　　　　　　　　　　　　//在操作符旁边必须有空格， 如 a + b而不是a+b
  "space-before-blocks": ["error", "always"], 　　　　　// 语句块之前必须有空格 如 ) {}
  "spaced-comment":["error", "always"], 　　　　　　　　// 注释前必须有空格
  "arrow-body-style": ["error", "always"], 　　　　　　// 要求箭头函数必须有大括号 如 a => {}
  "arrow-parens": ["error", "always"], 　　　　　　　　//要求箭头函数的参数必有用括弧包住，如(a) =>{}
  "arrow-spacing": ["error", { "before": true, "after": true }], // 定义箭头函数的箭头前后都必须有空格
  "no-const-assign": "error",  　　　　　　　　　　　　  // 禁止修改const变量
  "template-curly-spacing": ["error", "never"], 　　// 禁止末班字符串中的{}中的变量出现空格，如以下错误`${ a }`
  "no-multi-spaces": "error", 　　　　　　　　　　　　// 禁止多个空格，只有一个空格的地方必须只有一个
  "no-whitespace-before-property": "error", 　　　　// 禁止属性前有空格，如obj. a
  "keyword-spacing":["error",{"before": true, "after": true}]　　 //关键字前后必须有空格 如 } else {
  

• vue 中 Identifier is not a camel case (camelcase) 报错：这是驼峰命名出现问题，搞了我好长时间，一直不明白什么意思，后来直接在规则中可以不适用用驼峰命名

  ["error", { "properties": "never" }]
  

• 属性名	属性值	描述
  array-callback-return	“error”	Array执行回调函数返回语句
  indent	[“error”, 4, {“SwitchCase”: 1}]	缩写格式的一致性
  block-spacing	“error”	禁止执行空间内出现’-’
  brace-style	[“error”,“1tbs”]	代码书写格式验证
  camelcase	[“error”, { “properties”: “never” }]	属性命名规则可以不使用驼峰命名法
  callback-return	[“error”, [“cb”, “callback”, “next”]]	回调函数需要return进行返回
  comma-spacing	“error”	不允许在逗号前面出现空格
  comma-style	[“error”, “last”]	方数组元素、变量声明等直接需要逗号隔开
  consistent-return	“error”	保持return返回的一致性
  curly	[“error”, “all”]	函数或者条件判断时需要统一使用大括号
  default-case	“error”	switch语句中必须有default条件
  dot-notation	[“error”, { “allowKeywords”: false }]	不允许关键字出现在变量中
  eol-last	“error”	代码间间隔出现一行
  eqeqeq	“error”	消除不安全类型的全等操作
  guard-for-in	“error”	for循环中过滤掉一下不被需要的行为
  key-spacing	[“error”, { “beforeColon”: false, “afterColon”: true }]	键和值前保留一个空格
  keyword-spacing	“error”	确保字符前后空格的一致性
  lines-around-comment	[“error”, { “beforeBlockComment”: true, “afterBlockComment”: false, “beforeLineComment”: true, “afterLineComment”: false }]	注释前需要空行，注释后不需要空行
  new-cap	“error”	构造函数首字母需要大写
  newline-after-var	[“error”, “never”]	var定义后不空行
  new-parens	“error”	没有参数时，构造函数也需要添加括号
  no-invalid-this	“error”	不允许关键字this在函数或者类的外面
  no-multi-spaces	“error”	不允许键和值之间存在多个空格
  no-redeclare	“error”	不允许重复声明
  no-return-assign	“error”	不允许在return语句中任务
  no-spaced-func	“error”	调用函数时，函数名和括号之间不能有空格。
  no-trailing-spaces	“error”	不允许在语句后存在多余的空格
  semi	“error”	语句以分号结尾
  semi-spacing	“error”	分号前后不能有空格
  quotes	[“error”,“double”]	使用双引号
  [space-before-function-paren](http://eslint.org/docs/rules/space-before-function-paren）	“space-before-function-paren”: [“error”, “never”]	不允许函数括号之间存在空格
  space-in-parens	“error”	不允许在括号里面存在空格
  space-infix-ops	“error”	插入符合变量之间需要添加一个空格
  space-unary-ops	[“error”, {“words”: true, “nonwords”: false}]	允许一元运算符操作
  spaced-comment	“error”	注释前需要一个空格
  yoda	[“error”, “never”]	条件语句中，变量在赋值语句的前面
  no-mixed-requires	“error”	不允许混合requires文件
  no-new-require	“error”	不允许new require出现
  no-path-concat	“error”	不允许路径以_链接
  handle-callback-err	[“error”, “err”]	处理错误的回调函数

  |