CODEWITHSUNDEEP
javascriptvue.jsvuejs2eslinteslintrc
Subramanian
Subramanian

Reputation: 178

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

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

Upvotes: 0

Views: 380

Answers (2)

Quyết
Quyết

Reputation: 602

If you're using webpack template, add

preLoaders: { js: 'eslint-loader' }

to your vue-loader.conf.js file.

Upvotes: 0

Prithvi Singh
Prithvi Singh

Reputation: 50

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

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

Upvotes: 1

Related Questions