如何在 Vue 中配置 eslint？

Question

我已經開始了一個新的 Vue 項目，但是所有的配置文件（webpack，...）都不在了。 現在一切都隱藏在 Vue 中，我不知道如何配置它。

我的問題是所有通知和警告都被 eslint 視為錯誤：

error: 'Segment' is defined but never used (no-unused-vars) at src/App.vue:10:8:
   8 | <script>
   9 | import HelloWorld from './components/HelloWorld.vue'
> 10 | import Segment

這應該是通知而不是嚴重錯誤。

我想改變它，但我的package.json的默認配置是：

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

有沒有和development模式或類似的東西？

Answer 1

例如，您可以禁用not defined和not used警告：

在 package.json 中：

"eslintConfig": {
    "rules": {
      "no-unused-vars": "off",
      "no-undef": "off"
    },
  },

Answer 2

目前沒有開箱即用的配置將所有規則配置為警告，但您可以使用 ESLint 插件來實現： eslint-plugin-only-warn 。 安裝該模塊后，編輯package.json的eslintConfig以包含：

{
  "eslintConfig": {
    "plugins": [
      "only-warn"
    ]
  }
}

或者您可以將這些規則單獨配置為警告而不是錯誤：

{
  "eslintConfig": {
    "rules": {
       "no-unused-vars": "warn",
       "no-undef": "warn"
    }
  }
}