How to use htmlhint-loader with vuejs

1
votes

I am trying to setup html linting with my vuejs app, but I am not sure how to configure this correctly with my webpack config. I am currently trying with htmlhint-loader. I installed it using this command:

npm install htmlhint-loader --save

And added following code in my 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/
    },
    ...
    ...

But this does not work, Let me know if anything else is also needed to make it work.

When I use this regex:

test: /(vue|html)$/,

I get following error:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./index.html Module parse failed: >/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 Unexpected token (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (1:0) at Parser.pp$4.raise (/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp.unexpected (/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10) at Parser.pp$3.parseExprAtom (/Users/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/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)

2
webpackvue.jslintvuejs2htmllint
I think Regex for htmlhint is wrong - you are escaping capturing group.Try to put this /(\.vue|\.html)$/ or this /(vue|html)$/ – Belmin Bedak
@BelminBedak I have tried these combinations, I have edited the question with the error I get. – Saurabh
I'm not sure does htmlhint loader can watch single file vue components.Your can test it by setting just this test: /\.html$/ and see would it throw any error. – Belmin Bedak
It gives same error which I have added. – Saurabh
The comments are talking about htmlhint-loader, but the error says the html-webpack-plugin(which injects compiled js files to index.html) is failing to handle the html? Maybe check whether index.html has anything unusual? – PanJunjie潘俊杰

2 Answers

1
votes

the htmlhint-loader can't check vue -> template code. but the htmllint-loader can work well.

0
votes

you need webpack-combine-loaders then

  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)'
        }
      }
    ])
  }
  ...