Eslint-plugin-vue: 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
        }
      },

[mysticatea]

Thank you for this issue.

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

I think that this plugin cannot work together with eslint-plugin-html. Because eslint-plugin-html has preprocessor, it remove <template> before parsing but the rules of this plugin needs <template>.

[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 ?

[mysticatea]

@michalsnik Yes!

[jh-thank-you]

Vue team/Community,

Thanks for the replies. Good to know you will be adding more rules etc.

All the best,

[armano2]

there is already proposal in #46