vscode-csscomb

VS Code plugin for CSScomb — CSS coding style formatter.

:warning: This plugin is archived

The main package (csscomb) has no maintainer and does not develop. In this regard, the development of the plugin does not make sense.

Alternatively you can use:

postcss with similar plugins.
stylelint

I'm ready to go back to developing the plugin if the csscomb will develops again.

Donation

Do you like this project? Support it by donating, creating an issue or pull request.

Install

Press F1 and select Extensions: Install Extensions.
Search for and select csscomb.

See the extension installation guide for details.

Usage

Put a cssconfig.json in your project root, or set the config in the setting csscomb.preset. You can start with one of the predefined configs or generate a config. See details in config docs.
Run CSSComb in the Command Palette (F1, Ctrl+Shift+P on Windows, Cmd+Shift+P on macOS).

Supported languages

Styles: CSS, Less, Sass, SCSS
Styles inside <style> or <style lang="LANGUAGE"> tags: HTML, Vue, Svelte

⚠️ The plugin does not support formatting when saving template files (HTML, Vue, Svelte) by formatOnSave option and formatting of the selected fragments (selections).

Supported settings

csscomb.preset

Type: Object or String
Defaut: {}
Example: '~/path/to/file/csscomb.json' or 'csscomb'

Config file. Can be built-in config (csscomb, zen, or yandex), path to a config file, or an object containing custom configuration.

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.

csscomb.ignoreFilesOnSave

Type: Array
Default: []
Example: ["variables.less", "mixins/**/*"]

An optional array of glob-patterns to ignore files on save.

csscomb.supportEmbeddedStyles

Type: Boolean
Default: true

Support embedded CSS into HTML.

csscomb.formatOnSave

Type: Boolean
Default: false

Auto format on save.

csscomb.syntaxAssociations

Type: Object
Default: {}

Configuration of syntax associations.

{
	"csscomb.syntaxAssociations": {
		"postcss": "scss"
	}
}

For example:

{
  "csscomb.formatOnSave": true,
  "csscomb.preset": "yandex",
  "csscomb.preset": {
    "remove-empty-rulesets": true,
    "always-semicolon": true
  }
}

Keyboard shortcuts

For changes keyboard shortcuts, create a new rule in File -> Preferences -> Keyboard Shortcuts:

{
  "key": "ctrl+shift+c",
  "command": "csscomb.execute"
}

Custom configuration

We support the following configs:

.csscomb.json or csscomb.json
.csscomb.js or csscomb.js
Path in the CSSCOMB_CONFIG env variable
Config in the csscombConfig field in the package.json file

Custom configuration is fun and simple: just put .csscomb.json file in the project root or your HOME directory.

You can read more about available options in docs.

Changelog

See the Releases section of our GitHub project for changelogs for each release version.

License

This software is released under the terms of the MIT license.

CSScomb

mrmlnc