Как использовать htmlhint-loader с vuejs

Question

Я пытаюсь настроить html linting с моим приложением vuejs, но я не уверен, как правильно настроить это с помощью моего конфига 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) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов. Ошибка синтаксиса: неожиданный токен (1:0) в Parser.pp$4.Rise (/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 / вю / node_modules / WebPack / node_modules / жолудя / расстояние /acorn.js:1715:21)

Answer 1

htmlhint-loader не могу проверить vue -> template код. но загрузчик htmllint может работать хорошо.

Answer 2

Тогда вам нужны webpack-объединения-загрузчики

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