Webpack 如何将htmlhint loader与vuejs一起使用

我正在尝试用我的vuejs应用程序设置html linting，但我不确定如何用我的网页配置正确配置它。我目前正在尝试使用。我使用以下命令安装了它：

npm install htmlhint-loader --save

并在mywebpack.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网页包插件/lib/loader.js！中出错/index.html 模块解析失败：>/Users/saurabh.mimani/work/code/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.parsexpratom（/Users/saurabh.mimani/work/code/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12） 在Parser.pp$3.parsexprsubscripts（/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21）

---

htmlhint加载程序

无法检查

vue->template

code。但是，这种方法可以很好地工作。

您需要webpack联合收割机 然后

var combineLoaders=require（'webpack-combine-loaders'）
...
预紧器：{
html:combineLoaders([
{
加载器：“htmlhint加载器”，
排除：/node_模块/，
选项：{
rulesDir:“规则/”，
'我的新规则'：'这是传递给规则（选项）'
}
}
])
}
…

我认为htmlhint的正则表达式是错误的-您正在逃离捕获组。请尝试将此

/（\.vue |\.html）$/

或此

/（vue | html）$/

@BelminBedak我尝试过这些组合，我编辑了这个问题，发现了错误。我不确定htmlhint loader是否可以查看单文件vue组件。您可以通过设置此

test:/\.html$/

来测试它，并查看它是否会抛出任何错误。它给出了与我添加的错误相同的错误。注释是关于

htmlhint loader

，但是错误表明

HTMLWebpack插件

（将编译的js文件注入index.html）无法处理html？也许可以检查

index.html

是否有任何异常情况？您可以链接更多有关如何实现此功能的详细信息吗？你的网页配置是什么样子的？谢谢