Registry / testing / eslint-plugin-prettier-vue

eslint-plugin-prettier-vue

library5.0.0jsnpmunverified

This ESLint plugin integrates Prettier formatting specifically for Vue Single File Components (SFCs). At version 5.0.0, it is actively maintained and provides a robust solution for ensuring consistent code style in Vue projects. It includes all functionalities of `eslint-plugin-prettier` but extends them to properly handle the unique structure of Vue SFCs. Its key differentiators include the ability to process and format custom blocks (e.g., `<docs>`, `<config>`) within Vue SFCs, which `eslint-plugin-prettier` does not support. It also offers granular control over whether `<template>`, `<script>`, or `<style>` blocks should be processed by Prettier, allowing developers to disable formatting for specific sections if needed. While no explicit release cadence is documented, it typically updates to support new versions of ESLint, Prettier, and Vue. It is designed to be the sole Prettier-ESLint integration for Vue projects, superseding the general `eslint-plugin-prettier`.

testing

npm install eslint-plugin-prettier-vue

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-PRET

eslint-plugin-prettier-vue

testingjavascriptv5.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin:prettier-vue/recommended

✓ extends: ['plugin:prettier-vue/recommended']

✗ extends: ['plugin:prettier/recommended']

This `extends` entry activates the recommended configuration for `eslint-plugin-prettier-vue`, which includes all base `eslint-plugin-prettier` functionality tailored for Vue SFCs.

prettier-vue/prettier

✓ rules: { 'prettier-vue/prettier': 'error' }

✗ rules: { 'prettier/prettier': 'error' }

This rule applies Prettier as an ESLint rule, reporting formatting issues as ESLint errors. Do not use `prettier/prettier` when this plugin is active, as it can cause conflicts.

settings['prettier-vue']

✓ settings: { 'prettier-vue': { SFCBlocks: { template: true } } }

This `settings` object is used to configure how `eslint-plugin-prettier-vue` processes different blocks within Vue SFCs, including custom blocks and granular control over `<template>`, `<script>`, and `<style>`.

Demonstrates installation of the plugin and its dependencies, followed by the essential `.eslintrc.js` configuration including recommended presets and custom block handling.

npm install --save-dev eslint-plugin-prettier-vue eslint-plugin-vue eslint-config-prettier eslint prettier // .eslintrc.js module.exports = { extends: [ 'plugin:vue/recommended', 'plugin:prettier-vue/recommended' // ALWAYS last to override conflicting rules ], settings: { 'prettier-vue': { SFCBlocks: { template: true, script: true, style: true, customBlocks: { docs: { lang: 'markdown' }, // Example for a custom <docs> block config: { lang: 'json' } } }, usePrettierrc: true, fileInfoOptions: { withNodeModules: false } } }, rules: { 'prettier-vue/prettier': [ 'error', { // Override specific Prettier options here if needed, e.g.: printWidth: 100, singleQuote: true, semi: false } ] } };

Debug

Known issues

breakingThis package requires Node.js version 16 or newer. Running with older Node.js versions will result in errors.

fix

Upgrade your Node.js environment to version 16 or later.

affects: >=5.0.0

gotchaDo NOT use `eslint-plugin-prettier` together with `eslint-plugin-prettier-vue`. This plugin includes all functionalities of `eslint-plugin-prettier` and is specifically designed for Vue SFCs. Having both enabled can lead to conflicts and unexpected formatting behavior.

fix

Remove `plugin:prettier/recommended` from your `extends` array and any `'prettier/prettier'` rules if `eslint-plugin-prettier-vue` is active. This plugin's recommended configuration handles Prettier integration.

affects: >=1.0.0

gotchaIncorrect configuration of `settings['prettier-vue'].SFCBlocks` can lead to parts of your Vue SFCs (e.g., `<template>`, `<script>`, `<style>`, or custom blocks) not being formatted as expected or still being linted by other rules.

fix

Carefully review the `SFCBlocks` settings in your `.eslintrc.js`. Ensure `template`, `script`, and `style` are set to `true` if you want Prettier to handle them. For custom blocks, specify `lang` (e.g., `docs: { lang: 'markdown' }`) or `false` to ignore them.

affects: >=1.0.0

Errors

Common errors & fixes

ESLint: Definition for rule 'prettier-vue/prettier' was not found.

The `eslint-plugin-prettier-vue` plugin is either not installed, or not correctly referenced in the ESLint configuration's `extends` or `plugins` array.

fix

Ensure `npm install eslint-plugin-prettier-vue` has been run and `'plugin:prettier-vue/recommended'` is present in your `.eslintrc.js` `extends` array.

ESLint reports formatting errors or conflicts with 'prettier/prettier' rule even with 'eslint-plugin-prettier-vue' enabled.

This typically occurs when both `eslint-plugin-prettier` and `eslint-plugin-prettier-vue` are active simultaneously, or when `eslint-config-prettier` is not placed last in the `extends` array.

fix

Remove `plugin:prettier/recommended` from `extends` and any `prettier/prettier` rule. Ensure `plugin:prettier-vue/recommended` is the *last* entry in your `extends` array to ensure it correctly overrides other formatting-related rules.

Custom blocks (e.g., `<docs>`, `<config>`) in Vue SFCs are not being formatted by Prettier.

The `settings['prettier-vue'].SFCBlocks.customBlocks` option is not configured to explicitly define how to process these blocks, or they are set to `false`.

fix

Add or update the `customBlocks` configuration in `settings['prettier-vue'].SFCBlocks` within your `.eslintrc.js` to specify the `lang` (e.g., `markdown`, `json`, `js`, `ts`) for each custom block you wish to format. For example: `customBlocks: { docs: { lang: 'markdown' } }`.

Upgrade

Version history

5.0.0latest on npm

Audit

Dependencies

eslint-plugin-vuerequiredRequired for Vue-specific linting rules and parsing.

eslint-config-prettierrequiredUsed to disable ESLint rules that conflict with Prettier's formatting.

eslintrequiredThe core ESLint dependency, required for any ESLint plugin.

prettierrequiredThe underlying code formatter that this plugin integrates.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/meteorlxy/eslint-plugin-prettier-vue ↗

packagehttps://www.npmjs.com/package/eslint-plugin-prettier-vue ↗