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

Question

我在 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时，这些检查不会发生

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

Answer 1

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

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

Answer 2

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

preLoaders: { js: 'eslint-loader' }

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