https://github.com/voqse/prettier-plugin-vue

A Prettier plugin that extends default Vue files formatting with additional options.
https://github.com/voqse/prettier-plugin-vue

plugin prettier prettier-plugin vue

Last synced: 4 months ago
JSON representation

A Prettier plugin that extends default Vue files formatting with additional options.

• Host: GitHub
• URL: https://github.com/voqse/prettier-plugin-vue
• Owner: voqse
• License: mit
• Created: 2023-01-05T11:09:34.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-02-12T00:05:33.000Z (about 3 years ago)
• Last Synced: 2025-02-21T09:37:08.737Z (about 1 year ago)
• Topics: plugin, prettier, prettier-plugin, vue
• Language: JavaScript
• Homepage:
• Size: 477 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# prettier-plugin-vue

[![test](https://img.shields.io/github/actions/workflow/status/voqse/prettier-plugin-vue/test.yml?branch=master&label=test)](https://github.com/voqse/prettier-plugin-vue/actions/workflows/test.yml)

[![npm](https://img.shields.io/npm/v/prettier-plugin-vue)](https://www.npmjs.com/package/prettier-plugin-vue)

A lightweight plugin that allows [Prettier](https://prettier.io/) to ignore certain blocks of Vue Single File Components (SFCs) independently of the IDE and its plugins. This can be useful if you want to setup Prettier in combination with other linters such as `eslint` or `stylelint`.

## Installation

To get started, just install prettier-plugin-vue as a dev-dependency:

```shell

npm install prettier prettier-plugin-vue --save-dev

```

This plugin follows Prettier’s autoloading convention, so as long as you’ve got Prettier set up in your project, it’ll start working automatically as soon as it’s installed.

*Note that plugin autoloading is not supported when using certain package managers, such as pnpm or Yarn PnP. In this case you may need to add the plugin to your Prettier config explicitly:*

```javascript

// prettier.config.js

module.exports = {

  plugins: [require('prettier-plugin-vue')],

}

```

## Configuration

### vueExcludeBlocks

Allows you to specify a list of blocks `strings` to ignore while formatting Vue SFC files.

| Default     | CLI Override                    | API Override                 |

|-------------|---------------------------------|------------------------------|

| `['style']` | `--vue-exclude-blocks ` | `vueExcludeBlocks: ` |

*Note that by default this plugin ignores `` blocks to avoid interfering with stylelint.*

### Example `.prettierrc`

```javascript

{

  vueExcludeBlocks: ["style", "template"]

}

```