Use csscomb for VS Code

Question

I'm trying VS Code for a few days and I've installed csscomb extension. It works fine when I put .csscomb.json on my work directory. But I wish it worked even on file I open outside of my work directory.

Could you tell me how to configure VS Code and/or csscomb to work like this? I use Windows 10 Pro.

Answer 1

According to the csscomb page on VS Code's Marketplace...

They have "Supported settings"

csscomb.preset

Type: Object or String

Defaut: {}

Config's name. Should be one of the following: csscomb, zen, yandex or an object containing custom configuration or path to config.

And the following warning:

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.

In other words, since there is no default, you have to set either a preset config or path to a custom config.

To configure csscomb in VS Code:

1. Go to File > Preferences > Settings
2. Select the "User Settings" tab in the right window (to apply the config globally)
3. Expand the options for "CSScomb configuration"
4. Click the pencil to the left of "csscomb.preset"
5. Click "Copy to Settings"

6. Enter the path to your custom config or choose a preset

   {
       "csscomb.preset": "~/.vscode/.csscomb.json"
   }
   

   OR one of ("csscomb", "zen", "yandex")

   {
       "csscomb.preset": "csscomb"
   }
   

Next, you need to create the .csscomb.json file in that location. I chose the C:\Users\username\.vscode directory because that's where VS Code also downloads extensions on Windows.

Here's the config I created using csscomb's config generator:

{
    "always-semicolon": true,
    "color-case": "upper",
    "block-indent": "    ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": false,
    "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": " ",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "vendor-prefix-align": true
}

You can also include an option for sorting tags (or copy it from one of their presets on git):

{
    "sort-order": [
        [
            "font",
            "font-family",
            "font-size",
            "font-weight",
            "font-style"
        ],
        [
            "position",
            "z-index"
        ]
    ]
}

Now you should be able to format CSS within VS Code by typing ctrl+shift+p then typing "CSScomb" then enter.

"Formatter" extensions are supposed to be recognized by the default formatting keyboard shortcut shift+alt+f, however I haven't gotten that to work. I think it's something the developer has to configure.

Instead, you can create your own keyboard shortcut in VS Code:

1. Go to File > Preferences > Keyboard Shortcuts
2. Click the link at the top to edit keybindings.json

3. Add your custom keybinding

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

Now you should be all set!