{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install prettier-plugin-vue"],"cli":null},"imports":["// .prettierrc.js or .prettierrc.cjs\nmodule.exports = {\n  plugins: [\n    require('prettier-plugin-vue')\n  ],\n}","// .prettierrc.mjs or .prettierrc.js (in an ESM context)\nexport default {\n  plugins: [\n    'prettier-plugin-vue'\n  ],\n}","// .prettierrc.js\nmodule.exports = {\n  plugins: [require('prettier-plugin-vue')],\n  vueExcludeBlocks: ['style', 'template']\n}"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}