Vue Loader

# 代码风格检查

# ESLint

官方的 eslint-plugin-vue 支持对 Vue 单文件组件的模板和脚本部分进行代码风格检查。

确保在你的 ESLint 配置中使用插件的内置配置

// .eslintrc.js
module.exports = {
  extends: [
    "plugin:vue/essential"
  ]
}

然后从命令行

eslint --ext js,vue MyComponent.vue

另一个选择是使用 eslint-loader，这样你的 *.vue 文件在开发过程中保存时会自动进行代码风格检查

npm install -D eslint eslint-loader

确保它被用作预加载器

// webpack.config.js
module.exports = {
  // ... other options
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
}

# stylelint

stylelint 支持对 Vue 单文件组件的样式部分进行代码风格检查。

确保你的 stylelint 配置正确。

然后从命令行

stylelint MyComponent.vue

另一个选择是使用 stylelint-webpack-plugin

npm install -D stylelint-webpack-plugin

确保它被用作插件

// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
  // ... other options
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
    })
  ]
}

← 测试 →