ESLint Prettier Plugin for Vue SFC

5.0.0 · active · verified Sun Apr 19

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`.

Common errors

```
ESLint: Definition for rule 'prettier-vue/prettier' was not found.
```
cause 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.
```
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.

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.
```
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`.

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' } }`.

Warnings

breaking This 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.
gotcha 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.
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.
gotcha 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.
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.

Install

npm install eslint-plugin-prettier-vue npm
yarn add eslint-plugin-prettier-vue yarn
pnpm add eslint-plugin-prettier-vue pnpm

Imports

plugin:prettier-vue/recommended
wrong:
```
extends: ['plugin:prettier/recommended']
```
correct:
```
extends: ['plugin:prettier-vue/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
wrong:
```
rules: { 'prettier/prettier': 'error' }
```
correct:
```
rules: { 'prettier-vue/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>`.

Quickstart

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
      }
    ]
  }
};

view raw JSON →