{"id":18053,"library":"prettier-plugin-vue","title":"Prettier Plugin for Vue Single File Components (SFCs)","description":"prettier-plugin-vue is a Prettier plugin designed to enhance the formatting capabilities for Vue Single File Components (SFCs) beyond Prettier's default behavior. Currently at version 1.1.6, this plugin enables developers to precisely control which blocks within an SFC are formatted by Prettier. Its primary differentiator is the `vueExcludeBlocks` option, which allows specific sections (like `<style>` or `<template>`) to be ignored during formatting. This feature is particularly useful for integrating Prettier with other specialized linters such as `eslint` and `stylelint`, preventing formatting conflicts that might arise from multiple tools acting on the same code sections. The plugin autoloads in most setups, streamlining its adoption. While not explicitly stating a release cadence, its presence on npm and active GitHub actions suggest ongoing maintenance, providing a stable solution for Vue formatting challenges. It avoids common issues with IDE-specific formatters by handling exclusions at the Prettier configuration level.","status":"active","version":"1.1.6","language":"javascript","source_language":"en","source_url":"https://github.com/voqse/prettier-plugin-vue","tags":["javascript","prettier","plugin","vue","prettier-plugin"],"install":[{"cmd":"npm install prettier-plugin-vue","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for core formatting functionality; required for the plugin to operate.","package":"prettier","optional":false}],"imports":[{"note":"For CommonJS-based Prettier configurations (e.g., `prettier.config.js` or `.prettierrc.js` in a CJS project), use `require()` to explicitly load the plugin module. ESM `import` statements are not supported in these contexts.","wrong":"// .prettierrc.js\nimport prettierPluginVue from 'prettier-plugin-vue';\nmodule.exports = {\n  plugins: [\n    prettierPluginVue\n  ],\n}","symbol":"prettier-plugin-vue","correct":"// .prettierrc.js or .prettierrc.cjs\nmodule.exports = {\n  plugins: [\n    require('prettier-plugin-vue')\n  ],\n}"},{"note":"When explicitly configuring in an ESM context (e.g., `prettier.config.mjs`) or with certain package managers (like pnpm or Yarn PnP where autoloading might fail), the plugin name as a string is typically used in the `plugins` array. This also works in CJS if the plugin is discoverable.","wrong":"// .prettierrc.js (in a CJS context)\nmodule.exports = {\n  plugins: [\n    'prettier-plugin-vue'\n  ],\n}","symbol":"prettier-plugin-vue (string literal)","correct":"// .prettierrc.mjs or .prettierrc.js (in an ESM context)\nexport default {\n  plugins: [\n    'prettier-plugin-vue'\n  ],\n}"},{"note":"`vueExcludeBlocks` is a top-level Prettier option, not nested within the plugin definition itself. It applies globally once the `prettier-plugin-vue` plugin is loaded.","wrong":"// .prettierrc.js\nmodule.exports = {\n  plugins: [\n    {\n      'prettier-plugin-vue',\n      vueExcludeBlocks: ['style'] // Incorrect nesting\n    }\n  ]\n}","symbol":"vueExcludeBlocks","correct":"// .prettierrc.js\nmodule.exports = {\n  plugins: [require('prettier-plugin-vue')],\n  vueExcludeBlocks: ['style', 'template']\n}"}],"quickstart":{"code":"// 1. Install dependencies (run in your terminal):\n// npm install --save-dev prettier prettier-plugin-vue\n\n// 2. Create a .prettierrc.js file in your project root:\n// prettier.config.js\nmodule.exports = {\n  vueExcludeBlocks: ['style'], // Instructs prettier-plugin-vue to ignore <style> blocks\n  singleQuote: true,\n  semi: false,\n  trailingComma: 'es5',\n  tabWidth: 2,\n  printWidth: 100,\n};\n\n// 3. Create a sample Vue SFC (e.g., src/components/MyComponent.vue) with some messy formatting:\n/*\n<template>\n  <div class=\"hello-world\">\n    <h1>{{ msg }}</h1>\n    <p>\n      This is a sample component with intentionally\n      <span class=\"highlight\">poor formatting</span>\n      in its script and style blocks.\n    </p>\n  </div>\n</template>\n\n<script setup>\nimport {\n  ref\n} from 'vue';\n\nconst msg =\n  'Hello Vue 3 + TypeScript';\nconst count = ref(0); // This line will be formatted\nconst incrementCount = () => {\n  count.value++;\n};\n</script>\n\n<style scoped>\n.hello-world {\n  font-family: Arial, sans-serif;\n  text-align:center;\n  color: #2c3e50;\n  margin-top:    60px;\n}\n.highlight {\n  color: #42b983;\n  font-weight:  bold;\n}\n</style>\n*/\n\n// 4. Run Prettier from your terminal to format files:\n// npx prettier --write \"src/**/*.vue\"\n\n// This command will format the <template> and <script> blocks of your Vue files\n// according to the .prettierrc.js rules. However, due to `vueExcludeBlocks: ['style']`,\n// the <style> block's formatting (e.g., extra spaces, irregular indentation) will remain\n// untouched by Prettier, demonstrating the plugin's core functionality.","lang":"javascript","description":"This quickstart guides you through installing the plugin, configuring Prettier to exclude style blocks in Vue SFCs, and then demonstrates running Prettier on a sample Vue file to show which blocks are formatted and which are skipped."},"warnings":[{"fix":"To ensure the plugin is loaded, explicitly add `prettier-plugin-vue` to your Prettier configuration's `plugins` array. For CommonJS configs: `plugins: [require('prettier-plugin-vue')]`. For ESM configs: `plugins: ['prettier-plugin-vue']`.","message":"Prettier's plugin autoloading mechanism may not function correctly with certain package managers, specifically pnpm or Yarn PnP, requiring explicit configuration.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If you wish for Prettier to format `<style>` blocks within your Vue SFCs, you must explicitly remove `'style'` from the `vueExcludeBlocks` array in your Prettier configuration (e.g., `vueExcludeBlocks: []`). Be aware of potential conflicts if you are also using a style linter.","message":"By default, `prettier-plugin-vue` excludes `<style>` blocks from Prettier's formatting process. This is done to prevent potential conflicts with dedicated CSS linters like `stylelint`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure that `vueExcludeBlocks` is correctly defined as an array of string literals in your `.prettierrc` or `prettier.config.js` file, for example: `vueExcludeBlocks: ['style', 'template']`.","message":"The `vueExcludeBlocks` option expects an array of strings, where each string corresponds to the name of a block type (e.g., `'style'`, `'template'`, `'script'`) you wish to exclude from formatting.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"First, ensure `prettier-plugin-vue` is installed as a `devDependency` (`npm install --save-dev prettier-plugin-vue`). Then, explicitly configure it in your `prettier.config.js`: `module.exports = { plugins: [require('prettier-plugin-vue')] }`.","cause":"The plugin is either not installed as a dependency or Prettier cannot locate it, which can happen with certain package managers (pnpm, Yarn PnP) that use non-standard `node_modules` structures.","error":"Error: Cannot find module 'prettier-plugin-vue'"},{"fix":"To enable Prettier to format `<style>` blocks, you need to override the default configuration. In your `prettier.config.js`, set `vueExcludeBlocks` to an empty array or remove `'style'` from it: `module.exports = { vueExcludeBlocks: [] }`.","cause":"The `prettier-plugin-vue` defaults to excluding `<style>` blocks from formatting to avoid interfering with dedicated CSS linters like `stylelint`.","error":"Prettier is not formatting my Vue <style> block, even when I run it."},{"fix":"Use CommonJS `require()` syntax for loading plugins in `prettier.config.js`: `module.exports = { plugins: [require('prettier-plugin-vue')] }`. If you prefer ESM syntax, rename your configuration file to `prettier.config.mjs`.","cause":"Your `prettier.config.js` file is likely being treated as a CommonJS module, which does not support ESM `import` statements at the top level.","error":"SyntaxError: Cannot use import statement outside a module (when configuring Prettier)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}