Vite Plugin Vue Pug Lint

1.1.0 verified Fri May 01 auth: no javascript

vite-plugin-vue-pug-lint is a Vite plugin that integrates pug-lint into Vue single file components (SFCs), providing linting for Pug templates during development and build. The current version 1.1.0 is stable and supports Vite 2.x and pug-lint 2.6.0 as peer dependencies. It is a direct replacement for the Webpack-based vue-pug-lint-loader, offering similar functionality with a simple plugin API. The plugin allows custom configuration via configFile option and filter patterns for include/exclude. It ships TypeScript types and is actively maintained.

Common errors

error Cannot find module 'pug-lint' ↓

cause pug-lint not installed as devDependency

fix

npm install pug-lint --save-dev

error TypeError: pugLint is not a function ↓

cause Importing the plugin incorrectly, using named export as default

fix

Use default import: import pugLint from 'vite-plugin-vue-pug-lint'

error Error: The configuration file was not found at path/to/.pug-lintrc ↓

cause Specified configFile path does not exist

fix

Check the path or remove configFile option to use default lookup

Warnings

breaking Requires Vite 2.x; not compatible with Vite 3+ ↓

fix Upgrade to a newer version if available, or stay on Vite 2

deprecated pug-lint itself is no longer actively maintained; consider using pug-lexer and custom scripts ↓

fix Evaluate alternatives like eslint-plugin-vue-pug

gotcha The plugin only lints .vue files; it ignores .pug standalone files ↓

fix Use include option to add extra patterns: /\.pug$/

gotcha Plugin must be placed before @vitejs/plugin-vue in plugins array ↓

fix Ensure pugLint() is called before vue()

Install

npm install vite-plugin-vue-pug-lint

yarn add vite-plugin-vue-pug-lint

pnpm add vite-plugin-vue-pug-lint

Imports

default

wrong

const pugLint = require('vite-plugin-vue-pug-lint')

correct

import pugLint from 'vite-plugin-vue-pug-lint'

ESM-only; no CommonJS export

default

wrong

const { pugLint } = require('vite-plugin-vue-pug-lint')

correct

import pugLint from 'vite-plugin-vue-pug-lint'

Default export, not named export

pugLint

wrong

import pugLint from 'vite-plugin-vue-pug-lint'

correct

import { pugLint } from 'vite-plugin-vue-pug-lint'

Named export also available since v1.0.0

Quickstart

Shows how to install and configure vite-plugin-vue-pug-lint with custom options in a Vite project using Vue.

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import pugLint from 'vite-plugin-vue-pug-lint';

export default defineConfig({
  plugins: [
    pugLint({
      configFile: 'path/to/.pug-lintrc', // optional
      include: /\.vue$/, // default
      exclude: /node_modules/, // default
    }),
    vue(),
  ],
});

// Then configure pug-lint rules as usual, e.g., .pug-lintrc.json:
// { "disallowIdLiterals": true }