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
    }
  }
}