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

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
        }
      },

[armano2]

there is already proposal in #46

[michalsnik]

I think we can safely assume, that we’ll not going to fix this. But instead we’re going to add more rules for indentation and so on. So that this will be the only eslint plugin you’ll ever need for any vue app (in terms of templating), on JS side you should be able to easily use other plugins too. Do you agree with me @mysticatea ?