Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>SCSS FormatterNew to Visual Studio Code? Get it now.

SCSS Formatter

Sibiraj

sibiraj.dev
|
1,118,995 installs
| (11) | Free
| Sponsor
A Visual Studio Code Extension to format SCSS
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VS Code SCSS Formatter

Tests Version Installs Downloads Ratings

SCSS Formatter is an extension for Visual Studio Code to format SCSS.

SCSS Formatter uses Prettier under the hood to format files. Though Prettier supports formatting various file types. This extension focuses only on SCSS. Additionally it supports CSS.

Checkout prettier-vscode for an extended language support

Any issues related to formatting, open an issue here

Installation

Refer to Visual Studio MarketPlace to install or download the extension

To install via command line, you should have installed code command in PATH

code --install-extension sibiraj-s.vscode-scss-formatter

Usage

Files can be formatted by the Format Document option available in the context menu, by using the associated Keyboard Shortcut or running the Format Document command from the command pallete

Default keyboard shortcuts for Format Document command:

  • MacOS: ⇧⌥F or Shift+Option+F
  • Linux: Ctrl+Shift+I
  • Windows: Shift+Alt+F

Formatter Demo

SCSS Formatter Demo

Extension Settings

This extension contributes the following settings:

  • scssFormatter.printWidth: Line length that the formatter will wrap on.
  • scssFormatter.singleQuote: Use single quotes instead of double quotes.
  • scssFormatter.trailingComma: Print trailing commas wherever possible when multi-line.

Known Issues

  • formatOnPaste is not supported as Prettier does not support formatting a selection or range of text for css/scss.
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft