如何在 Vue 组件的外部脚本文件上运行 es-lint 规则答案

【问题标题】：How to run es-lint rules on Vue component's external script files如何在 Vue 组件的外部脚本文件上运行 es-lint 规则
【发布时间】：2021-07-21 10:04:30
【问题描述】：

我在 Vue 组件上添加了 es-lint 检查，但组件的脚本不在同一个文件中，我将它作为项目中所有组件的单独文件保存。例如，我在.eslintrc.js 中添加了vue/order-in-components 规则，如果组件脚本的钩子顺序错误，则会引发错误。

正确格式：

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

格式错误：

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

组件文档中的顺序： https://eslint.vuejs.org/rules/order-in-components.html

因为我已经通过外部文件添加了组件的脚本。在我们运行 eslint --fix

时，这些检查不会发生

对此的任何解决方案将不胜感激，在此先感谢

【问题讨论】：

标签： javascript vue.js vuejs2 eslint eslintrc

【解决方案1】：

我对 vue 不熟悉，但您是否尝试过在运行 eslint 时使用 --ext，

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

【讨论】：

【解决方案2】：

如果您使用的是 webpack 模板，请添加

preLoaders: { js: 'eslint-loader' }

到你的 vue-loader.conf.js 文件。

【讨论】：