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

https://stackoverflow.com/questions/67293620/how-to-run-es-lint-rules-on-vue-components-external-script-files April 28, 2021 at 12:05PM