https://github.com/rollecode/vscode-stylefmt
🔌 VS Code plugin for stylefmt— Format your CSS using stylefmt.
https://github.com/rollecode/vscode-stylefmt
Last synced: 27 days ago
JSON representation
🔌 VS Code plugin for stylefmt— Format your CSS using stylefmt.
- Host: GitHub
- URL: https://github.com/rollecode/vscode-stylefmt
- Owner: rollecode
- License: mit
- Created: 2020-10-19T11:05:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-11-29T13:11:31.000Z (6 months ago)
- Last Synced: 2026-05-02T13:33:35.315Z (28 days ago)
- Language: TypeScript
- Size: 458 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
Awesome Lists containing this project
README
# vscode-stylefmt
[](https://marketplace.visualstudio.com/items?itemName=ronilaukkarinen.vscode-stylefmt) [](https://github.com/ronilaukkarinen/vscode-stylefmt/releases)
> [stylefmt](https://github.com/morishitter/stylefmt) is a tool that automatically formats your stylesheets.
🍴 This is a WIP fork from [mrmlnc/vscode-stylefmt](https://github.com/mrmlnc/vscode-stylefmt) which is currently obsolete. This version is in daily use and kept up to date. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) together are the standard these days. I recommend checking them out.
[](https://i.imgur.com/h5vFQPP.gif)
## đź–Ś Advantages over prettier/stylelint - why use stylefmt?
While you should definitely use [stylelint](https://stylelint.io/) for linting CSS/SCSS, its `"source.fixAll.stylelint": true` can't really fix all. This plugin will fix the rest, indentations and positions etc. Trust me, you want these both.
What about Prettier? Well, it forces styles to a certain format and it doesn't give you much options. It's tricky especially with SCSS mixins and map-gets where it may even break the formatting completely by forcibly lining them up into a single line.
The official [stylefmt](https://github.com/morishitter/stylefmt) package has not been updated since on 18 Oct 2018. However, there are still users who like to format their styles automatically and controlled with stylefmt so that's why this plugin relies on a forked npm package, [@ronilaukkarinen/stylefmt](https://github.com/ronilaukkarinen/stylefmt). The main goal is to keep this project **active and alive**.
The best thing in stylefmt is that it supports [stylelint](https://stylelint.io/) out-of-the-box without being too restrictive.
**So, in short:** Practically this extension removes extra empty lines and indents the code to match the current indentation level. It does it a bit more efficiently than stylelint itself.
## Top contributors
This plugin is constantly kept up to date by the following persons and a bunch of [awesome contributors](https://github.com/ronilaukkarinen/vscode-stylefmt/graphs/contributors). Wanna join in development? Let us know!
| [](https://github.com/ronilaukkarinen) |
| --- |
| [Roni Laukkarinen](https://github.com/ronilaukkarinen) |
## Donation
Do you like this project? Support it by donating, creating an issue or pull request.
[](https://paypal.me/ronilaukkarinen?locale.x=en_US)
## Install
* Press F1 and `select Extensions: Install Extensions`.
* Search for and select `stylefmt`.
See the [extension installation guide](https://code.visualstudio.com/docs/editor/extension-gallery) for details.
## Usage
* You can use global keyboard shortcut ALT+SHIFT+F or right-click context menu `Format code`.
* Or press F1 and run the command named `stylefmt: Format CSS`.
To automatically format on save, run Cmd+Shift+P (or CTRL+Shift+P on Windows systems) and select `Preferences: Open Settings (JSON)` and add this to your settings.json file:
``` json
"[scss]": {
"editor.defaultFormatter": "ronilaukkarinen.vscode-stylefmt",
"editor.formatOnSave": true
},
```
## Supported languages
* CSS
* PostCSS
* Less
* SCSS
* SugarSS
## Supported settings
**configBasedir**
* Type: `string`
* Default: `null`
Base working directory; useful for stylelint `extends` parameter.
**config**
* Type: `object || string`
* Default: `null`
Config object for stylelint or path to a stylelint config file.
*Will automatically look for `.stylelintrc` and `stylelint.config.js` in workspace root, or a `stylelint` param in the `package.json`, if config is omitted.*
> **Warning!**
>
> If you want to specify a file in the current directory, the path must begin with a `./` or `../` if relative to the current directory. Also you can use HOME directory as `~` symbol.
**useStylelintConfigOverrides**
* Type: `boolean`
* Default: `false`
Overrides rules using Stylelint plugin settings.
**showErrorMessages**
* Type: `boolean`
* Default: `true`
Show error messages or not. Will be automatically set to false if `editor.formatOnSave` is enabled.
## Keyboard shortcuts
For changes keyboard shortcuts, create a new rule in `File -> Preferences -> Keyboard Shortcuts`:
```json
{
"key": "ctrl+shift+c",
"command": "stylefmt.execute"
}
```
## Custom configuration
Read about the [stylelint rules](https://github.com/morishitter/stylefmt#stylelint-rules-that-stylefmt-can-handle) and [default rules](https://github.com/morishitter/stylefmt#default-formatting-rules-without-stylelint-config-file) in stylefmt repository.
## Changelog
See the [Releases section of our GitHub project](https://github.com/ronilaukkarinen/vscode-stylefmt/releases) for changelogs for each release version.
## License
This software is released under the terms of the MIT license.