在VSCode中踩过ESLint警告的坑

一、默认情况下，ESLint和vscode格式化工具有冲突，需要添加配置文件解决冲突。

打开脚手架面板，查看警告信息。
在项目根目录下添加 .prettierrc 文件

{
    "semi":false,
    "singleQuote":true
}

打开.eslintrc.js文件，禁用对 space-before-function-paren 的检查:

  rules: {
    "no-console": "off",
    "no-debugger": "off",
    "space-before-function-paren": 0
  },

二、error Unnecessarily quoted property '888' found quote-props

表示key没必要加引号

三、Object properties must go on a new line if they aren't all on the same line

提示语法错误, 如果对象属性并非都位于同一行上，则它们必须位于新行上

四、error Trailing spaces not allowed no-trailing-spaces

这是空格多了，删除多余的空格就可以了 检查报错行结尾是否有多余的空格

五、Invalid prop: type check failed for prop "uniqueOpened". Expected Boolean, got String with value "true"

期望布尔值，却得到字符串。
把出错的属性改为简写或v-bind为属性绑定布尔值。

出错代码如下
<el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409EFF"
      unique-opened="true"
   >
   
 更改后
 方法一：简写
 <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409EFF"
      unique-opened
   >
   
方法二：v-bind为属性绑定布尔值
<el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409EFF"
      :unique-opened="true"
   >

六、error Newline required at end of file but not found eol-last

在文件末尾需要换行符

七、Error: Avoided redundant navigation to current location: "/users".

此报错并不会影响项目运行，但是我有强迫症，不允许代码标红，解决方法如下：

• 方法1：在项目目录下运行 npm i vue-router@3.0 -S
  将vue-router改为3.0版本即可；
• 方法2：若不想更换版本解决方法: 在router.js中加入以下代码就可以

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 解决vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

// 如果你的改了push还是没有生效，可以考虑改replace方法 
// 修改路由replace方法,阻止重复点击报错
const originalReplace = Router.prototype.replace
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err)
};

七、error Unnecessary return statement no-useless-return

不必要的返回语句

因为ESlint 插件导致return有误

//原代码
addUser () {
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return 
      })

//修改后的代码
addUser () {
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return false
      })

八、 Errors compiling template:Invalid v-for expression: (item1)in scope.row.children

错误编译模板：无效的v-for表达式

原因：v-for中()与in之间缺少空格

  //原代码
  <template slot-scope="scope">
          <el-row v-for="(item1)in scope.row.children" :key="item1.id">
              ......
          </el-row>
  </template>
  
  //修改后的代码
  <template slot-scope="scope">
          <el-row v-for="(item1) in scope.row.children" :key="item1.id">
              ......
          </el-row>
  </template>
  

九、error Identifier 'attr_id' is not in camel case camelcase

标识符'attr_id'是不是在驼峰

把别名attr_id改为attrid或attrId

十、error Missing space before function parentheses space-before-function-paren

原因：函数括号前缺少空格

由于使用eslint时，严格模式下，会报错Missing space before function parentheses的问题，意思是在方法名和刮号之间需要有一格空格

解决方法如下

//1、在根目录中，打开 .eslintrc.js 文件，并在 rules 写入以下代码即可
"space-before-function-paren": 0

//2、重启项目
npm run dev