首页 文章

如何在vuejs中使用htmlhint-loader

提问于
浏览 次
1

我正在尝试使用我的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中的错误模块解析失败：> /Users/saurabh.mimani/work/codes/j/vue/node_modules/html-webpack-插件/ 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：Parser.pp $ 4.raise中的意外标记（1：0）（/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15）在Parser.pp $ 3.parseExprAtom（/ Users）的Parser.pp.unexpected（/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10） /saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12）at Parser.pp $ 3.parseExprSubscripts（/Users/saurabh.mimani/work/codes/焦耳/ VUE / node_modules /的WebPack / node_modules /橡子/ DIST / acorn.js：1715：21）

webpack vue.js lint vuejs2 htmllint

2 回答

  • 0

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

    回复于
  • 1

    你需要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)'
        }
      }
    ])
  }
  ...
    回复于

相关问题