Vue lint rules not being applied beyond entry point (not traversing subdirectories).

[jh-thank-you]

To help out others… I spent more hours on this than I care to count… for those trying to setup auto ESlinting with webpack 3.x eslint-plugin-vue v3.x, eslint-friendly-formatter v3.x and eslint-html-plugin v3.x, read on (note I’m using Sublime Text 3):

If I comment out .vue from eslint-plugin-html settings everything seems to work:

to help others, in the .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  plugins: [
        'html',
  ],
  settings: {
        // if you have .vue active for eslint-html-plugin settings
        // linting will not progress through all subdirectories
        // it conflicts with eslint-plugin-vue (latest v3.5.0)
        // it will stop at the main entry point.
        "html/html-extensions": [".html", /* ".vue" */],  // consider .html files as XML
        "html/report-bad-indent": "error",
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended' // or 'plugin:vue/base'
  ],
  parserOptions: {
    sourceType: 'module',
  },
  rules: {
    'comma-dangle': ['error', 'always-multiline'],
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'no-unused-vars': ['warn'],
    'no-console': 0,
    'vue/order-in-components': [2, {
      order: [
        ['name', 'delimiters', 'functional', 'model'],
        ['components', 'directives', 'filters'],
        ['parent', 'mixins', 'extends', 'provide', 'inject'],
        'el',
        'template',
        'props',
        'propsData',
        'data',
        'computed',
        'watch',
        'lifecycle_hooks',
        'methods',
        'render',
        'renderError'
      ]
    }] // END order
  },
};

in the ignore file:

# ESlint #
##########
/tmp/**
test.js
webpack.config.js
/webpack.config.js
**/webpack.config.js
in the webpack config:

in the webpack config

// within rules

{
      enforce: 'pre', // with this eslint will not process files done by babel-loader
      test: /\.(vue|js)$/, // /\.js$/,
      loader: 'eslint-loader',
      exclude: /node_modules/,
      options: {
        emitWarning: true,
        // community formatter
        formatter: require('eslint-friendly-formatter'),
        // cache: DEVELOPMENT,        
        fix: true, // Set to true for eslint autofixing
        // quite: true, // Process report errors only and ignore warnings
      },
    }, {
        test: /\.vue$/,
        loader: 'vue-loader', // Used for Vue Templates. Also Hot Module Replacement only works with .vue files
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },

[BenoitZugmeyer]

Thanks for the report.

eslint-plugin-html is not needed anymore with eslint-plugin-vue 3+. Juste remove eslint-plugin-html from your dependencies. Cheers!

Please note that eslint-plugin-vue 3 is still in beta. Please report issues there if any.

[jh-thank-you]

BenoitZugmeyer,

Thanks, I wish there was something in the documentation to address this... I only came across a discussion about eslint-plugin-vue moving away from eslint-plugin-html... wish I would have bookmarked it so I could link to it here.

I did cross-post with eslint-plugin-vue: https://github.com/vuejs/eslint-plugin-vue/issues/64

Thanks for answering so quickly.

All the best,