The plugin version 5 can't support the vue single file?

[kobe990]

Description

I use the version 4 of this plugin, all things are ok. But after I update this plugin to version 5 such as v5.0.3, the lint result is wrong. It can't handle the Vue single file correctly.

Setup configuration

our webpack configuration is like this:

  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        exclude: /node_modules/,
        options: {
          formatter: require('eslint-friendly-formatter'),
          fix: true
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          transformToRequire: {
            video: 'src',
            source: 'src',
            img: 'src',
            image: 'xlink:href',
          },
        }
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "vue-style-loader"
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader',
            options: {
              minimize: true,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]',
        }
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]',
            },
          },
          'image2svg-loader',
        ]
      }
    ]
  },

The error message is like this:

ERROR in ./src/components/free-amount-input.vue
Module Error (from ./node_modules/_eslint-loader@2.1.2@eslint-loader/index.js):

  ✘  http://eslint.org/docs/rules/  Parsing error: Unexpected token

  4 |       type="text"
  5 |       ref="input"
> 6 |       @focus="handleFocus"
    |       ^
  7 |       @blur="handleBlur"
  8 |       @input.prevent="handleInput($event.target.value, $event.target)"
  9 |       :value="factValue"  
  src/components/free-amount-input.vue:6:7
        @focus="handleFocus"
         ^

✘ 1 problem (1 error, 0 warnings)

Errors:
  1  http://eslint.org/docs/rules/null

• ESLint version: version 4 or version 5
• eslint-plugin-html version: version 5.0.3
• NodeJS version: 10.15.0
• Operating System name and version: mac os
• ESLint configuration (.eslintrc):

  
  // http://eslint.org/docs/user-guide/configuring

module.exports = { root: true, parser: "babel-eslint", parserOptions: {

},

env: { "browser": true, "commonjs": true, "mocha": true, "es6": true },

// required to lint *.vue files plugins: [ "babel", "html" ],

globals: { "__dirname": true, "process": true },

'rules': {

} }

[BenoitZugmeyer]

This is because since the version 5.0.0, eslint-plugin-html isn't applied on .vue files by default. Please add this in your .eslintrc:

  "settings": {
      "html/html-extensions": [".html", ".vue"],
  }

More importantly, you should use the eslint-plugin-vue to lint vue files.