如何在 Vue 中配置 eslint？

Question

I have started a new Vue project, but all the configuration files (webpack, ...) are not there anymore. Now everything is hidden within Vue and I don't know how to configure it.

My issue is that all notices and warnings are treated as errors by 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

This should be a notice not a critical error.

I would like to change that, but the default configuation in my package.json is:

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

Is there and development mode or something similar?

Answer 1

For example you can disable not defined and not used warning:

in package.json:

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

Answer 2

There's currently no configuration out of the box that configures all rules to be warnings, but you could accomplish that with an ESLint plugin: eslint-plugin-only-warn . After installing that module, edit your package.json 's eslintConfig to contain:

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

Or you could configure those rules individually to be warnings instead of errors:

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