vue2.x错误之Use // eslint-disable-next-line to ignore the next line.

前言

日常积累,欢迎指正

错误 eslint 语法检测报错

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

错误原因

vue 中组件代码有换行，如下：

       <section>
          <h2>待办项</h2>
          <ul>
              <todo
              v-for = "item in todolist" 
              v-if ="item.state === 'todo'" 
              :key = "item.id" 
              :id = "item.id" 
              :text = "item.text" 
              @checked="checked"
              @deleteById = "deleteById"/>
          </ul>
        </section>

最简单的办法就是去掉换行，但是类似演示情况的代码去掉换行反而不方便阅读，最好的办法就是让 eslint 不报这个错误

解决办法

网上搜到的常见解决办法是将 webpack.base.conf.js 中的 (config.dev.useEslint ? [createLintingRule()] : []),注释掉，这种办法解决问题的根本原因是直接去掉了 eslint 的语法检查，这显然是不合适的，我们正确的操作应该是让 eslint 认为标签换行不是一个语法错误。
修改方法是在 package.json 文件中的 eslintConfig 下的 rules 中添加 “eslint-disable-next-line”:false

{
  "name": "vueLearning",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  
  "eslintConfig": {
    "rules": {
      "eslint-disable-next-line":false
    }
  }
}