Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>vue-style-beautifyNew to Visual Studio Code? Get it now.
vue-style-beautify

vue-style-beautify

xiguaxigua

|
29,525 installs
| (1) | Free
beautify css in your vue project
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

vue-style-beautify

Features

  • beautify you css rules
  • better css order
  • auto change after save
  • selection beautify

Quick Start

  • Install vue-style-beautify
  • key: cmd+shift+i
  • settings:
    • vueStyle.formatOnSave (default true)
    • vueStyle.ignoreFilesOnSave (default [])
    • vueStyle.preset (default {}): you can change csscomb settings by this

Set config

Default config is here
{
  "remove-empty-rulesets": true,
  "always-semicolon": true,
  "color-case": "lower",
  "block-indent": "  ",
  "color-shorthand": true,
  "element-case": "lower",
  "eof-newline": true,
  "leading-zero": false,
  "quotes": "double",
  "sort-order-fallback": "abc",
  "space-before-colon": "",
  "space-after-colon": " ",
  "space-before-combinator": " ",
  "space-after-combinator": " ",
  "space-between-declarations": "\n",
  "space-before-opening-brace": " ",
  "space-after-opening-brace": "\n",
  "space-after-selector-delimiter": "\n",
  "space-before-selector-delimiter": "",
  "space-before-closing-brace": "\n",
  "strip-spaces": true,
  "tab-size": true,
  "unitless-zero": true,
  "vendor-prefix-align": true,
  "sort-order": [
    "$variable",
    "$include",
    "$extend",
    "$import",
  
    "content",
    // 位置
    "position",
    "top",
    "right",
    "bottom",
    "left",
    "z-index",
    "float",
    "clear",
  
    "display",
    "flex-align",
    "flex-flow",
    "flex-direction",
    "flex-order",
    "flex-pack",
    "flex-wrap",
    "justify-content",
    "align-content",
    "align-items",
    "align-self",
    "order",
    "flex",
    "flex-basis",
    "flex-grow",
    "flex-shrink",
    // 大小
    "box-sizing",
    "overflow",
    "overflow-x",
    "overflow-y",
    "width",
    "min-width",
    "max-width",
    "height",
    "min-height",
    "max-height",
  
    "padding",
    "padding-top",
    "padding-right",
    "padding-bottom",
    "padding-left",
    "margin",
    "margin-top",
    "margin-right",
    "margin-bottom",
    "margin-left",
    "margin-collapse",
    "margin-top-collapse",
    "margin-right-collapse",
    "margin-bottom-collapse",
    "margin-left-collapse",
  
    "clip",
    "clip-path",
  
    "color",
    "counter-reset",
    "counter-increment",
    "direction",
    // 文字
    "font",
    "font-family",
    "font-feature-settings",
    "font-size",
    "font-kerning",
    "font-smoothing",
    "font-stretch",
    "font-style",
    "font-variant",
    "font-weight",
    "hanging-punctuation",
    "hyphens",
    "quotes",
    "line-height",
    "letter-spacing",
    "text-align",
    "text-decoration",
    "text-emphasis",
    "text-emphasis-color",
    "text-emphasis-position",
    "text-emphasis-style",
    "text-indent",
    "text-justify",
    "text-overflow",
    "text-overflow-ellipsis",
    "text-overflow-mode",
    "text-rendering",
    "text-size-adjust",
    "text-shadow",
    "text-transform",
    "word-break",
    "word-spacing",
    "word-wrap",
    "word-break",
    "tab-size",
    "vertical-align",
    "white-space",
    "list-style",
    "list-style-image",
    "list-style-position",
    "list-style-type",
    "appearance",
    // 背景
    "background",
    "background-color",
    "background-attachment",
    "background-clip",
    "background-image",
    "background-repeat",
    "background-repeat-x",
    "background-repeat-y",
    "background-position",
    "background-position-x",
    "background-position-y",
    "background-origin",
    "background-size",
    "box-decoration-break",
    "box-shadow",
  
    "border",
    "border-collapse",
    "border-top",
    "border-right",
    "border-bottom",
    "border-left",
    "border-color",
    "border-image",
    "border-top-color",
    "border-right-color",
    "border-bottom-color",
    "border-left-color",
    "border-spacing",
    "border-style",
    "border-top-style",
    "border-right-style",
    "border-bottom-style",
    "border-left-style",
    "border-width",
    "border-top-width",
    "border-right-width",
    "border-bottom-width",
    "border-left-width",
    "border-radius",
    "border-top-right-radius",
    "border-bottom-right-radius",
    "border-bottom-left-radius",
    "border-top-left-radius",
    "border-radius-topright",
    "border-radius-bottomright",
    "border-radius-bottomleft",
    "border-radius-topleft",
    "outline",
    "outline-width",
    "outline-style",
    "outline-color",
    "outline-offset",
    "perspective",
    "perspective-origin",
    "table-layout",
    // 其他
    "transform",
    "transform-origin",
    "transform-style",
    "animation",
    "animation-delay",
    "animation-duration",
    "animation-iteration-count",
    "animation-name",
    "animation-play-state",
    "animation-timing-function",
    "animation-fill-mode",
    "backface-visibility",
    "transition",
    "transition-delay",
    "transition-duration",
    "transition-property",
    "transition-timing-function",
    "will-change",
  
    "cursor",
    "opacity",
    "filter",
    "visibility",
    "zoom",
    "marks",
    "page-break",
    "page-break-before",
    "page-break-inside",
    "page-break-after",
    "pointer-events",
    "resize",
    "unicode-bidi",
    "user-select",
    "scrollbar",
    "widows"
  ]
}
you can get you own config through this [tools](http://csscomb.com/config) and set it in `vueStyle.preset` config. your own settings while be merged into default settings.

LICENSE

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft