Make Vue 3 code easier to read and maintain with configurable rules for callback styles, macro layout, template ref naming, and statement ordering.
Require inline callbacks for Vue APIs and configure their function and body styles in components and standalone JavaScript or TypeScript files.
Configure callbacks
Keep inline compiler macro declarations readable with line breaks around braces and between members in script setup blocks.
Format macro declarations
Enforce naming patterns for template ref attributes, useTemplateRef keys, and ref properties in render functions.
Define ref naming patterns
Group top-level script setup statements by their Vue roles, choose a sorting style, and preserve execution dependencies.
Configure statement ordering
Enable the rules and options that fit your project. Each rule defines its own scope, and no built-in configuration enables rules for you.
Choose your rules
Apply supported fixes with ESLint and review remaining diagnostics. Each rule documents which changes can be made automatically.
Understand automatic fixes
Install the plugin and its peer dependencies:
pnpm add -D eslint eslint-plugin-vue-perfectionist vue-eslint-parsernpm i -D eslint eslint-plugin-vue-perfectionist vue-eslint-parseryarn add -D eslint eslint-plugin-vue-perfectionist vue-eslint-parserAlready have ESLint configured for Vue? Register vuePerfectionist under plugins and enable your chosen vue-perfectionist rules in rules.
Follow the setup guide for a complete configuration, including TypeScript support, or choose your rules and configure their options.