1

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)

Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • I think Regex for htmlhint is wrong - you are escaping capturing group.Try to put this `/(\.vue|\.html)$/` or this `/(vue|html)$/` – Belmin Bedak Jan 14 '17 at 10:51
  • @BelminBedak I have tried these combinations, I have edited the question with the error I get. – Saurabh Jan 14 '17 at 11:03
  • 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 Jan 14 '17 at 11:38
  • It gives same error which I have added. – Saurabh Jan 14 '17 at 11:45
  • 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? – JJPandari Jan 16 '17 at 09:19
  • @PanJunjie潘俊杰 everything works fine without `htmlhint-loader`. – Saurabh Jan 16 '17 at 09:34

2 Answers2

1

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

wenkang lin
  • 119
  • 1
  • 1
  • 10
  • Can you link more details about how you get this working? What does your webpack config look like? thanks. – sthomps Mar 08 '17 at 19:46
0

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