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.
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:
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:
keybindings.json
Add your custom keybinding
{ "key": "ctrl+shift+c", "command": "csscomb.execute" }
Now you should be all set!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.