eslint-plugin-vue-perfectionist

eslint-plugin-vue-perfectionist

ESLint rules for consistent, readable, and maintainable Vue 3 code.

Define conventions for callbacks and composables, macro types and layout, ref and result naming, component usage contracts, template expressions, and setup statement ordering. Each rule defines its own scope: Vue SFC templates, script blocks, or standalone JavaScript and TypeScript files.

The plugin provides rules only, with no built-in configurations. Choose rules explicitly and configure their options for your project.

[!WARNING] This project is under active development. The API is unstable and may introduce breaking changes before the first stable release.

Documentation · Getting Started · Rules

Setup

This ESM package requires ESLint ^10.0.0 and vue-eslint-parser ^10.0.0.

pnpm add -D eslint eslint-plugin-vue-perfectionist vue-eslint-parser

For TypeScript SFCs, also install the TypeScript parser:

pnpm add -D @typescript-eslint/parser typescript

Register the plugin and enable the rules you want in eslint.config.mjs. The plugin provides rules only, with no built-in configurations:

import tsParser from '@typescript-eslint/parser'
import { defineConfig } from 'eslint/config'
import vuePerfectionist from 'eslint-plugin-vue-perfectionist'
import vueParser from 'vue-eslint-parser'

export default defineConfig([
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: { parser: tsParser },
    },
    plugins: {
      'vue-perfectionist': vuePerfectionist,
    },
    rules: {
      'vue-perfectionist/callback-style': 'error',
      'vue-perfectionist/consistent-template-ref-name': 'error',
      'vue-perfectionist/define-macros-newline': 'error',
      'vue-perfectionist/prefer-ref-pattern': 'error',
      'vue-perfectionist/sort-script-setup': 'error',
    },
  },
])

For JavaScript-only SFCs, omit the TypeScript parser import and parserOptions.parser. If your Vue configuration already supplies the parsers, add the plugin and your chosen rules.

See the setup guide for more configuration options.

Configuration

• File scopes and parsers: configure Vue SFCs and standalone JS/TS files.
• Auto-imported APIs: enable settings['vue-perfectionist'].autoImport for supported unbound API names. It defaults to false; local bindings and rule-level overrides take precedence. Configure ESLint globals separately.
• Rule composition: combine related checks and avoid overlapping sorting or padding rules.
• Public types: import rule option types and VuePerfectionistSettings from the package root. The default export and named plugin export refer to the same plugin object.

Rules

Component prop, slot, and generic-comment rules need explicit targets; they check no components by default. sort-script-setup orders groups by default; set type: 'natural' or another comparator to sort names within groups.

See the rules overview for file scopes and automatic fix availability. Only supported cases are fixed; naming, type, and component contract diagnostics require manual changes.

Development

Use the Node version selected by .node-version and the pnpm version pinned in package.json:

pnpm install --frozen-lockfile
pnpm test
pnpm docs:dev

See Contributing for build, validation, testing, and documentation workflows, and Architecture and Design for repository structure and analysis boundaries. Package build output in dist/ is generated.

Credits

• eslint-plugin-perfectionist for inspiring the sorting rule names, grouping model, and configuration API.
• eslint-plugin-vue and vue-eslint-parser for their work on Vue linting and single-file component parsing.

This is an independent project and is not an official extension of eslint-plugin-perfectionist or eslint-plugin-vue.

License

MIT License © 2026-PRESENT ntnyq