eslint-plugin-vue-pug

Extends eslint-plugin-vue to support pug templates.

Installation

npm install --save-dev eslint@8 eslint-plugin-vue eslint-plugin-vue-pug

Usage

Most eslint-plugin-vue rules work out of the box with just adding this plugin in your eslint config.

Eslint v9 Config

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:vue-pug/vue3-recommended'
  ]
}

Eslint v10 Flat Config

eslint-plugin-vue-pug config works the same as the eslint-plugin-vue config.

Example eslint.config.js:

import pluginVue from 'eslint-plugin-vue'
import pluginVuePug from 'eslint-plugin-vue-pug'
import globals from 'globals'

export default [
  // add more generic rulesets here
  ...pluginVue.configs['flat/recommended'],
  ...pluginVuePug.configs['flat/recommended']
  {
    rules: {
      // override/add rules settings here, such as:
      // 'vue/no-unused-vars': 'error'
    },
    languageOptions: {
      sourceType: 'module',
      globals: {
        ...globals.browser
      }
    }
  }
]

Limitations

• pug-lexer seems to convert windows-style CRLF line endings to LF line endings, which may break token position and will give you errors. Make sure to only use LF line endings.

Supported Syntax

This plugin only lints pug syntax that directly corresponds to html syntax. Pug syntax that is not supported includes mixins, js code, loops, if/else, case, include/extends. The linter will just skip those features, which means that tags inside mixins will not be linted. The rule no-pug-control-flow will help you to avoid unsupported pug syntax.

Open Questions

Comment Directive

Do we want own docs for that? Also, pug has no inline comments.

#id and .class shorthands

Shorthands get dropped from attributes list to not affect attribute order. We need to add separate linter rules for those.

• no-useless-template-attributes checks for class on template, we need to also check shorthands.
• no-restricted-class needs special handling

brace style

Existing rule fails at fixing and does not replace " quotes with `.

parsing commas in dynamic attribute names

pug splits up attribute names like :[[a,b,][1]]

spaces added by fix

first-attribute-linebreak adds a space between tag( and attr="" in certain scenarios.

attribute separators

Things like max-attributes-per-line would need to include the , in the attribute range for some fixes to work correctly, but this would break attribute-order.

HTML tokens

there are some rules relying on HTML* tokens, like no-multi-spaces.

Splitting low level mustache tokens

template attributes

having both lang and src attributes on template, what does that even do?

HTML rules

Rules for HTML don't apply to pug, but do not seem to interfere with pug templates since they check HTML* tokens, which we don't emit. Should we still disable those rules or leave them on?