Eslint-plugin-vue: plugin not work in vscode,can not display any errors

[lichnow]

Tell us about your environment

• ESLint Version:
  ^4.19.1
• eslint-plugin-vue Version:
  ^4.5.0
• Node Version:
  v10.4.0
  Please show your full configuration:

// http://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  'rules': {
    // "indent": ["error", 4],
    'indent': 'off',
    'vue/script-indent': ['warn', 4, {
      'baseIndent': 1
    }],
    "one-var": ["error","consecutive"],
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

What did you do? Please include the actual source code causing the issue.

<template>
    <div class="modal fade" :id="id" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" v-if="title">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{ title }}</h4>
                </div>
                <div class="modal-body">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
      props: {
          id: {
              type: String,
              required: true
          },
          title: {
              type: String,
              default: null
          }
        }
    }
</script>

VSCode Setting

{
    "eslint.enable": true,
    // "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {"autoFix": true, "language": "vue"}
    ]
}

What did you expect to happen?
after set 'plugin:vue/essential' extend to config,vscode can not show any errors for me in .vue file.but only use 'standard' extend,vscode display error normal.

with 'plugin:vue/essential' ，,but can not display error,example: indent 2(config setted been 4)

'indent': 'off',
    'vue/script-indent': ['warn', 4, {
      'baseIndent': 1
    }],

the result

and without 'plugin:vue/essential' extend ,only 'standard',indent config

"indent": ["error", 4]

the result

[michalsnik]

Hey @lichnow I used it before with standard and have just installed it fresh and it works fine in vscode 🤔 This is my config:

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "standard",
      "plugin:vue/recommended"
    ],
    "rules": {
      "indent": "off",
      "vue/script-indent": ["warn", 2, {
        "baseIndent": 1
      }]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

vscode:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "vue", "autoFix": true },
  "vue-html"
],
"eslint.autoFixOnSave": true,
"vetur.validation.template": false,
"vetur.validation.script": false,

[liaoyinglong]

@michalsnik thank!

@lichnow I have the same problem

When I added "vetur.validation.script": false,it works.

so ? this problem is caused by vetur ?

[michalsnik]

Vetur uses different configuaration and version of this plugin. Please look at their docs and linting section to find out more and how to properly use both together :)