如何在 vuejs 中使用 htmlhint-loader

Question

我正在嘗試使用我的 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-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: 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)在 Parser.pp.unexpected (/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10) 在 Parser.pp$3.parseExprAtom (/Users /saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12) 在 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

那么你需要 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)' } } ]) } ...