记录eslint报错的情况

这几天在调试vue的eslint，害，我领导说eslint要打开规范代码，顺带看了一下eslint的规则，并且研究一下报错。

切记每次修改了.eslintrc配置文件，需要重启项目再查看控制台，否则之前的报错会一直存在。

1. 第一个情况控制台报错：
   Parsing error :unexpected token < at 文件 <template>

所以这句话的意思是，不识别这个标签，然后查看了一下.eslintrc配置文件，发现在代码中没有添加对vue文件的支持。
解决方案：配置正确的解析器，要插入 “parser”: “vue-eslint-parser”,

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint"
    }
}

注意：这里要检查一下是否安装了eslint-plugin-vue插件

2. 如何查看规则的含义

一般情况下，eslint里面会有很多很多的配置项，大家都不知道是什么意思，这里放置一个官方地址，可以在官方文档中查看对应的规则含义。

点击eslint官网
点击eslint-plugin-vue官网

3.下面是我的项目里出现的一种报错情况：

这里的意思是，使用了这个规则效验项目，但是项目中没有找到这个规则。
首先去项目里检查是否安装了eslint-plugin-vue插件，在package.json中查看：

期次，确认安装后，在.eslintrc.js文件中配置使用此插件：

这里通常有两种写法：

//  默认写法：
module.exports = {
  extends: ['plugin:vue/essential', 'eslint:recommended']
}

//  最严格写法：
module.exports = {
  extends: ['plugin:vue/recommended', 'eslint:recommended']
}

最后，注意修改完配置文件后，需要重新启动项目！！！这时候新配置的规则才会生效！！！

当运行项目后会根据eslint效验项目，控制台会报一些错误，根据对应的规则改掉就好。

4.我当前项目中有一个配置项总是提示错误，修改成一个更通用的方法：
报错截图：

这里的意思是不满足vue/max-attributes-per-line的规则：
这里我也是参考了其他网友的配置，直接展示如何修改：

// 每行可以接受的最大属性数
'vue/max-attributes-per-line': [2, {
  // 单行时可以接收最大数量
  singleline: 10,
  // 多行时可以接收最大数量
  multiline: {
    max: 10,
    // 允许属性和标记名在同一行
    allowFirstLine: false
  }
}],

这里的数值写的大一些，格式化代码的时候不容易出错，当然如果不想使用这个的话，直接写成off
关闭即可：

'vue/max-attributes-per-line': 'off'

至此就差不多了，后续有时间会把自己的配置文件搞出来，下次遇见的时候再记录吧。