vuejsでhtmlhint-loaderを使用する方法

Question

私は自分のvuejsアプリケーションでhtml lintingをセットアップしようとしていますが、webpack configでこれを正しく設定する方法がわかりません。私は現在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)$/, 

を私は次のエラーを取得する：

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)

Answer 1

htmlhint-loaderはvue -> templateコードをチェックすることはできません。 htmllint-loaderはうまくいくでしょう。

Answer 2

あなたは私がhtmlhintための正規表現が間違っていると思う

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