Question

我正在尝试使用我的vuejs应用程序设置html linting，但我不确定如何使用我的webpack配置正确配置。我目前正在尝试htmlhint-loader。我使用这个命令安装它：

npm install htmlhint-loader --save

并在我的 webpack.base.config 中添加了以下代码：

module: {
  preLoaders: [
    {
      test: /\.vue$/,
      loader: 'eslint',    // I'm already using eslint which works as expected
      include: projectRoot,
      exclude: /node_modules/
    },
    {
      test: /\(vue|html)$/,
      loader: 'htmlhint',
      include: projectRoot,
      exclude: /node_modules/
    },
    ...
    ...

但这不起作用，让我知道是否还需要其他任何东西才能使它发挥作用。

当我使用这个正则表达式时：

test: /(vue|html)$/,

我收到以下错误：

错误在./~/html-webpack-plugin/lib/loader.js！。/ index.html 模块解析失败：＆gt; /Users/saurabh.mimani/work/codes/j/vue/node_modules/html-webpack-plugin/lib/loader.js！/Users/saurabh.mimani/work/codes/j/vue/ node_modules / htmlhint-loader / index.js！/Users/saurabh.mimani/work/codes/j/vue/index.html意外的令牌（1：0）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外的令牌（1：0）在Parser.pp $ 4.raise（/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15）在Parser.pp.unexpected（/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10）在Parser.pp $ 3.parseExprAtom（/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12）在Parser.pp $ 3.parseExprSubscripts（/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21）

Answer 1

htmlhint-loader无法检查vue -> template代码。但htmllint-loader可以很好地运作。

Answer 2

你需要webpack-combine-loaders 然后

  var combineLoaders = require('webpack-combine-loaders')
  ...
  preLoaders: {
    html: combineLoaders([
      {
        loader: 'htmlhint-loader',
        exclude: /node_modules/,
        options: {
          rulesDir: 'rules/',
          'my-new-rule': 'this is pass to the rule (option)'
        }
      }
    ])
  }
  ...

如何在vuejs中使用htmlhint-loader

2 个答案: