How to run es-lint rules on Vue component's external script files

Question

I've added es-lint checks on Vue components but the script for the component not in the same file, I kept it as a separate file for all the components in the project. For Example, I've added vue/order-in-components rule in .eslintrc.js which will throw an error if the component's script has the wrong order of hooks.

Correct Format:

export default {
  name: 'Address',
  props: {
    isNewRegistration: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      test: ''
    }
  }
}

Wrong Format:

export default {
  name: 'Address',
  // data should come after props
  data() {
    return {
      test: ''
    }
  }
  props: {
    isNewRegistration: {
      type: Boolean,
      required: true
    }
  }
}

Order in components documentation: https://eslint.vuejs.org/rules/order-in-components.html

As I've added the component's script through the external file. These checks are not happening while we run eslint --fix

Any solutions for this would be appreciated, Thanks in advance

Answer 1

I am not familiar with vue but have you tried using --ext while running eslint like,

eslint --ext .vue --ext .js src/

Answer 2

If you're using webpack template, add

preLoaders: { js: 'eslint-loader' }

to your vue-loader.conf.js file.