质量控制（Linting）

*.vue 文件内并不是纯 JavaScript 代码，那怎样 lint *.vue 文件中代码呢。官方推荐用 ESLint 。

也需要插件 eslint-html-plugin 支持扩展和 lint *.vue 文件中的JavaScript。

确保在 ESLint 的配置中包含这个插件：

"plugins": [
  "html"
]

命令行是：

eslint --ext js,vue MyComponent.vue

另外是用 eslint-loader ，这样在开发阶段，会自动 lint 你的 *.vue 文件。

npm install eslint eslint-loader --save-dev

// webpack.config.js
module.exports = {
  // ... other options
  module: {
    loaders: [
      {
        test: /.vue$/,
        loader: 'vue!eslint'
      }
    ]
  }
}

注意 Webpack 是的先调用右边的加载器，所以要保证 eslint 在 vue 的右边，这样在编译代码前才会 lint 代码。

有种情况，我们把第三方的 *.vue 组件引入 NPM 包内，我们只是想用 vue-loader 加载第三方组件，而不想 lint 它。这时候，我们可以把 linting 拆分进多个 Webpack 的 预加载器中 preLoaders:

// webpack.config.js
module.exports = {
  // ... 其它选项
  module: {
    // 只 lint 本地的 *.vue 文件
    preLoaders: [
      {
        test: /.vue$/,
        loader: 'eslint',
        exclude: /node_modules/
      }
    ],
    // 使用 vue-loader 加载所有的 *.vue 文件
    loaders: [
      {
        test: /.vue$/,
        loader: 'vue'
      }
    ]
  }
}

For Webpack 2.x:

// webpack.config.js
module.exports = {
  // ... 其它选项
  module: {
    rules: [
      // 只 lint 本地 *.vue 文件
      {
        enforce: 'pre',
        test: /.vue$/,
        loader: 'eslint',
        exclude: /node_modules/
      },
      // 用 vue-loader 加载所有的 *.vue 文件
      {
        test: /.vue$/,
        loader: 'vue'
      }
    ]
  }
}