代码风格

你可能已经想知道如何将你放在*.vue文件中的代码检查风格了，尽管它们不是JavaScript。我们将假设你正在使用ESLint（如果你还没用，那你应该用了！）。

你还需要[eslint-plugin-html]（https://github.com/BenoitZugmeyer/eslint-plugin-html），它支持在 *.vue 文件中提取和删除JavaScript。

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

  1. "plugins": [
  2.   "html"
  3. ]

然后在命令行中：

  1. eslint --ext js,vue MyComponent.vue

另一个选项是使用eslint-loader，以便您的* .vue文件在开发过程中自动保存：

  1. npm install eslint eslint-loader --save-dev
  1. // webpack.config.js
  2. module.exports = {
  3.   // ... 其余选项
  4.   module: {
  5.     loaders: [
  6.       {
  7.         test: /.vue$/,
  8.         loader: 'vue!eslint'
  9.       }
  10.     ]
  11.   }
  12. }

注意，Webpack加载器链应用于 first-first。 确保在vue之前应用eslint，所以我们正在编译预编译源代码。

我们需要考虑的一件事是使用NPM包中提供的第三方*.vue组件。 在这种情况下，我们要使用vue-loader来处理第三方组件，但不想去掉它。 我们可以分离到Webpack的preLoaders：

  1. // webpack.config.js
  2. module.exports = {
  3.   // ... 其余选项
  4.   module: {
  5.     // 只检测本地`*.vue`文件
  6.     preLoaders: [
  7.       {
  8.         test: /.vue$/,
  9.         loader: 'eslint',
  10.         exclude: /node_modules/
  11.       }
  12.     ],
  13.     // 针对所有的`*.vue`文件使用vue-loader
  14.     loaders: [
  15.       {
  16.         test: /.vue$/,
  17.         loader: 'vue'
  18.       }
  19.     ]
  20.   }
  21. }

For Webpack 2.x:

  1. // webpack.config.js
  2. module.exports = {
  3.   // ... 其余选项
  4.   module: {
  5.     rules: [
  6.       // 只检测本地`*.vue`文件
  7.       {
  8.         enforce: 'pre',
  9.         test: /.vue$/,
  10.         loader: 'eslint-loader',
  11.         exclude: /node_modules/
  12.       },
  13.       // 针对所有的`*.vue`文件使用vue-loader
  14.       {
  15.         test: /.vue$/,
  16.         loader: 'vue-loader'
  17.       }
  18.     ]
  19.   }
  20. }