Vue ESLint Parser Pug Template Tokenizer

Common errors

• ESLint: Cannot find module 'vue-eslint-parser-template-tokenizer-pug'

  cause The package is not installed or the path in `parserOptions.templateTokenizer` is incorrect.
  fix Ensure `vue-eslint-parser-template-tokenizer-pug` is listed in your project's `devDependencies` and installed (`npm install` or `yarn install`). Verify the import path is correct if used directly, or that `eslint-plugin-vue-pug` is correctly configured.

• Error: Cannot read properties of undefined (reading 'templateBody')

  cause Attempting to lint a `.vue` file without `vue-eslint-parser` configured as the main parser, or providing an invalid `templateTokenizer` object.
  fix Ensure `vue-eslint-parser` is correctly set as the `parser` in your ESLint configuration and that `parserOptions.templateTokenizer.pug` points to this package (usually handled by `eslint-plugin-vue-pug`).

Warnings

• gotcha This is an internal library and is not intended for direct use by end-user applications. For linting Pug templates in Vue components, use `eslint-plugin-vue-pug` instead.
  Fix: Install `eslint-plugin-vue-pug` and configure it in your ESLint setup. Do not directly import or use `vue-eslint-parser-template-tokenizer-pug` unless developing an ESLint plugin that requires custom tokenizer integration.
• gotcha The README mentions that adding errors to `templateBody.errors` might not affect linting, suggesting potential limitations in how parsing errors from the tokenizer are surfaced by `eslint-plugin-vue`'s `no-parsing-error` rule.
  Fix: Be aware that not all Pug parsing issues might be immediately reported as ESLint errors. Rely on `eslint-plugin-vue-pug`'s integrated rules for comprehensive validation. Report specific un-reported parsing issues to `eslint-plugin-vue-pug` or `vue-eslint-parser`.
• breaking `vue-eslint-parser`'s `parserOptions.templateTokenizer` is an experimental feature and may change or be removed in minor versions of `vue-eslint-parser` without notice. This could impact how this tokenizer is configured and used.
  Fix: Refer to the `vue-eslint-parser` and `eslint-plugin-vue-pug` documentation for the latest configuration requirements and updates regarding custom template tokenizers.

Install

• npm install vue-eslint-parser-template-tokenizer-pug npm
• yarn add vue-eslint-parser-template-tokenizer-pug yarn
• pnpm add vue-eslint-parser-template-tokenizer-pug pnpm

Imports

• parseTemplate
  wrong:

  const { parseTemplate } = require('vue-eslint-parser-template-tokenizer-pug');

  correct:

  import { parseTemplate } from 'vue-eslint-parser-template-tokenizer-pug';

  The primary export is a function or an object containing `parseTemplate`, which is then passed to `vue-eslint-parser`'s `parserOptions.templateTokenizer`. While CommonJS `require` might work in some contexts, ESM `import` is the preferred and modern approach for library consumption.
• TemplateTokenizerFactory

  import type { TemplateTokenizerFactory } from 'vue-eslint-parser-template-tokenizer-pug';

  Type import for advanced users or plugin developers defining their own tokenizers. The actual factory is usually configured via string reference in `vue-eslint-parser` options.

Quickstart

Demonstrates how `vue-eslint-parser-template-tokenizer-pug` is configured with `vue-eslint-parser` to lint a Vue SFC with Pug templates, emphasizing its internal role rather than direct end-user API usage.

import { ESLint } from 'eslint';
import vueParser from 'vue-eslint-parser';
import pugTokenizer from 'vue-eslint-parser-template-tokenizer-pug';

const cli = new ESLint({
  useEslintrc: false,
  overrideConfig: {
    parser: vueParser,
    parserOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      templateTokenizer: {
        pug: pugTokenizer
      }
    },
    rules: {
      'vue/no-unused-vars': 'error'
    }
  }
});

async function lintPugVue() {
  const code = `<template lang="pug">\n  div.my-component\n    p Hello, Pug in Vue!\n    span {{ someVar }}\n</template>\n<script>\nexport default { data: () => ({ someVar: 'test' }) }\n</script>`;
  const results = await cli.lintText(code, { filePath: 'test.vue' });

  console.log('Linting Results:');
  results.forEach(result => {
    console.log(`File: ${result.filePath}`);
    result.messages.forEach(message => {
      console.log(`  Line ${message.line}, Col ${message.column}: ${message.message} (${message.ruleId})`);
    });
    if (result.errorCount > 0) {
      console.error(`  Errors: ${result.errorCount}`);
    }
  });
}

lintPugVue().catch(console.error);