Saturday, 8 May 2021

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



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

No comments:

Post a Comment