{"id":10826,"library":"eslint-plugin-prettier-vue","title":"ESLint Prettier Plugin for Vue SFC","description":"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`.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/meteorlxy/eslint-plugin-prettier-vue","tags":["javascript","typescript"],"install":[{"cmd":"npm install eslint-plugin-prettier-vue","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-prettier-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-prettier-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Vue-specific linting rules and parsing.","package":"eslint-plugin-vue"},{"reason":"Used to disable ESLint rules that conflict with Prettier's formatting.","package":"eslint-config-prettier"},{"reason":"The core ESLint dependency, required for any ESLint plugin.","package":"eslint"},{"reason":"The underlying code formatter that this plugin integrates.","package":"prettier"}],"imports":[{"note":"This `extends` entry activates the recommended configuration for `eslint-plugin-prettier-vue`, which includes all base `eslint-plugin-prettier` functionality tailored for Vue SFCs.","wrong":"extends: ['plugin:prettier/recommended']","symbol":"plugin:prettier-vue/recommended","correct":"extends: ['plugin:prettier-vue/recommended']"},{"note":"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.","wrong":"rules: { 'prettier/prettier': 'error' }","symbol":"prettier-vue/prettier","correct":"rules: { 'prettier-vue/prettier': 'error' }"},{"note":"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>`.","symbol":"settings['prettier-vue']","correct":"settings: { 'prettier-vue': { SFCBlocks: { template: true } } }"}],"quickstart":{"code":"npm install --save-dev eslint-plugin-prettier-vue eslint-plugin-vue eslint-config-prettier eslint prettier\n\n// .eslintrc.js\nmodule.exports = {\n  extends: [\n    'plugin:vue/recommended',\n    'plugin:prettier-vue/recommended' // ALWAYS last to override conflicting rules\n  ],\n  settings: {\n    'prettier-vue': {\n      SFCBlocks: {\n        template: true,\n        script: true,\n        style: true,\n        customBlocks: {\n          docs: { lang: 'markdown' }, // Example for a custom <docs> block\n          config: { lang: 'json' }\n        }\n      },\n      usePrettierrc: true,\n      fileInfoOptions: { withNodeModules: false }\n    }\n  },\n  rules: {\n    'prettier-vue/prettier': [\n      'error',\n      {\n        // Override specific Prettier options here if needed, e.g.:\n        printWidth: 100,\n        singleQuote: true,\n        semi: false\n      }\n    ]\n  }\n};","lang":"javascript","description":"Demonstrates installation of the plugin and its dependencies, followed by the essential `.eslintrc.js` configuration including recommended presets and custom block handling."},"warnings":[{"fix":"Upgrade your Node.js environment to version 16 or later.","message":"This package requires Node.js version 16 or newer. Running with older Node.js versions will result in errors.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"Do 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Incorrect 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `npm install eslint-plugin-prettier-vue` has been run and `'plugin:prettier-vue/recommended'` is present in your `.eslintrc.js` `extends` array.","cause":"The `eslint-plugin-prettier-vue` plugin is either not installed, or not correctly referenced in the ESLint configuration's `extends` or `plugins` array.","error":"ESLint: Definition for rule 'prettier-vue/prettier' was not found."},{"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.","cause":"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.","error":"ESLint reports formatting errors or conflicts with 'prettier/prettier' rule even with 'eslint-plugin-prettier-vue' enabled."},{"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' } }`.","cause":"The `settings['prettier-vue'].SFCBlocks.customBlocks` option is not configured to explicitly define how to process these blocks, or they are set to `false`.","error":"Custom blocks (e.g., `<docs>`, `<config>`) in Vue SFCs are not being formatted by Prettier."}],"ecosystem":"npm"}