如何在 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 文件。