{"id":10839,"library":"eslint-plugin-vue-pug","title":"Vue Pug ESLint Plugin","description":"eslint-plugin-vue-pug is an ESLint plugin designed to extend the linting capabilities of `eslint-plugin-vue` to support Pug templates within Vue Single File Components (SFCs). It enables developers to enforce coding standards and identify potential issues directly within their `<template lang=\"pug\">` blocks. The current stable version is `0.6.2`, released in late 2022. Due to the lack of recent commits and releases since then, the package appears to be in a maintenance mode, with infrequent updates or new feature development. Its key differentiator is providing specific linting rules for Pug syntax within the Vue ecosystem, bridging a gap not covered by standard `eslint-plugin-vue` configurations alone. It relies heavily on `eslint-plugin-vue` for its core Vue-specific linting foundation.","status":"maintenance","version":"0.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/rashfael/eslint-plugin-vue-pug","tags":["javascript"],"install":[{"cmd":"npm install eslint-plugin-vue-pug","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-vue-pug","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-vue-pug","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides core Vue.js linting functionality and the parser (`@vue/eslint-parser`) which handles Pug templates. This plugin extends its capabilities.","package":"eslint-plugin-vue","optional":false}],"imports":[{"note":"ESLint plugins are registered in the `plugins` array of your `.eslintrc` configuration file, making their rules and recommended configs available.","wrong":"const vuePugPlugin = require('eslint-plugin-vue-pug'); // This is how ESLint internally loads the plugin, not for user configuration.","symbol":"Plugin registration","correct":"{\n  \"plugins\": [\n    \"vue-pug\"\n  ]\n}"},{"note":"To leverage the recommended rules provided by `eslint-plugin-vue-pug`, extend its configuration after the base `eslint-plugin-vue` recommended config.","wrong":"{\n  \"extends\": [\n    \"plugin:vue-pug\"\n  ]\n} // Missing '/recommended' suffix, will not load predefined rules.","symbol":"Recommended configuration","correct":"{\n  \"extends\": [\n    \"plugin:vue/vue3-recommended\",\n    \"plugin:vue-pug/recommended\"\n  ]\n}"},{"note":"When configuring individual rules, you must prefix them with `vue-pug/` to indicate they belong to this plugin.","wrong":"{\n  \"rules\": {\n    \"no-bare-template-tag\": \"error\" // Rules must be prefixed with the plugin name.\n  }\n}","symbol":"Individual rule","correct":"{\n  \"rules\": {\n    \"vue-pug/no-bare-template-tag\": \"error\"\n  }\n}"}],"quickstart":{"code":"module.exports = {\n  root: true,\n  env: {\n    node: true,\n    browser: true\n  },\n  extends: [\n    'eslint:recommended',\n    'plugin:vue/vue3-recommended', // Or vue2-recommended, essential, etc.\n    'plugin:vue-pug/recommended'  // Integrates Pug-specific linting\n  ],\n  parserOptions: {\n    ecmaVersion: 2020,\n    sourceType: 'module',\n    // The parser for <script> blocks in Vue SFCs\n    parser: '@babel/eslint-parser', // Or '@typescript-eslint/parser' if using TypeScript\n    requireConfigFile: false\n  },\n  rules: {\n    // Example of a specific vue-pug rule\n    'vue-pug/no-bare-template-tag': 'error',\n    'vue-pug/no-dupe-attributes': 'error',\n    'vue-pug/attribute-hyphenation': ['error', 'always'],\n\n    // General ESLint rules\n    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'\n  }\n};\n","lang":"javascript","description":"Demonstrates how to install and configure `eslint-plugin-vue-pug` in an ESLint configuration file (`.eslintrc.cjs`) for a Vue 3 project using Pug templates. This setup enables basic linting rules for Pug within Vue Single File Components, integrating with the recommended configurations of both `eslint` and `eslint-plugin-vue`."},"warnings":[{"fix":"Update your `.eslintrc` configuration to use `plugin:vue/vue3-recommended` (or another appropriate `eslint-plugin-vue` recommended config) and ensure `plugin:vue-pug/recommended` is also listed.","message":"Version `0.6.0` removed the `vca-style` configuration option and instead aligned with `vue3-recommended`. Users migrating from older versions that relied on `vca-style` for Vue Composition API linting will need to update their extends configuration.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Ensure that your installed version of `eslint-plugin-vue` satisfies the peer dependency range specified by `eslint-plugin-vue-pug`. Typically, running `npm install` or `yarn install` will alert you to peer dependency issues, or explicitly install compatible versions.","message":"This plugin has a peer dependency on `eslint-plugin-vue`. Mismatched versions between the two plugins can lead to unexpected parsing errors, unapplied rules, or complete failure of the linting process.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure your `.eslintrc` includes an appropriate `parser` in `parserOptions` (e.g., `@babel/eslint-parser` for JavaScript or `@typescript-eslint/parser` for TypeScript) to handle the `<script>` sections of your Vue files, as `@vue/eslint-parser` handles the overall SFC structure and template.","message":"While `eslint-plugin-vue-pug` adds rules for Pug, it relies on `@vue/eslint-parser` (which is typically part of `eslint-plugin-vue`'s setup) to actually parse the Pug template syntax. Incorrect `parserOptions.parser` configuration for the `<script>` blocks (e.g., missing Babel or TypeScript parser) can prevent ESLint from properly processing Vue SFCs, even if Pug linting rules are defined.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `eslint-plugin-vue-pug` is installed: `npm install eslint-plugin-vue-pug eslint-plugin-vue --save-dev` or `yarn add -D eslint-plugin-vue-pug eslint-plugin-vue`. Verify the plugin name 'vue-pug' is correctly spelled in your `.eslintrc` plugins array.","cause":"The `eslint-plugin-vue-pug` package is not installed or incorrectly referenced in the ESLint configuration.","error":"Error: Failed to load plugin 'vue-pug' declared in '...', It was not found."},{"fix":"Ensure `eslint-plugin-vue` is correctly configured and its recommended configuration is extended, as it brings in `@vue/eslint-parser`. Also, verify that the Pug templates themselves are well-formed and valid Pug syntax.","cause":"This error typically indicates that `@vue/eslint-parser` or another template-aware parser is not correctly configured for your `.vue` files, or that it cannot correctly interpret the Pug syntax.","error":"Error: Parsing error: The template requires a parser to be specified."},{"fix":"Double-check the rule name for typos. Refer to the `eslint-plugin-vue-pug` documentation or its `lib/rules` directory on GitHub to confirm available rule names and their options.","cause":"The specified rule does not exist, is misspelled, or is not available in the currently loaded version of the plugin.","error":"Error: Invalid configuration for rule 'vue-pug/some-rule-name'"}],"ecosystem":"npm"}