使用csscomb for VS Code

Question

我正在尝试VS Code几天,我已经安装了csscomb扩展.当我放入.csscomb.json我的工作目录时它工作正常.但我希望它甚至可以在我在工作目录之外打开的文件中工作.

你能告诉我如何配置VS Code和/或csscomb这样工作吗？我使用的是Windows 10 Pro.

Answer 1

根据VS Code的市场上的csscomb 页面 ...

他们有"支持的设置"

csscomb.preset

类型:对象或字符串

Defaut:{}

配置名称.应该是以下之一:csscomb,zen,yandex或包含自定义配置或配置路径的对象.

以下警告:

警告!

如果要在当前目录中指定文件,则路径必须以相对于当前目录的./或../开头.您也可以使用HOME目录作为〜符号.

换句话说,由于没有默认值,您必须设置预设配置或自定义配置的路径.

在VS代码中配置csscomb:

1. 转到文件>首选项>设置
2. 在右侧窗口中选择"用户设置"选项卡(全局应用配置)
3. 展开"CSScomb配置"的选项
4. 点击"csscomb.preset"左侧的铅笔
5. 点击"复制到设置"

6. 输入自定义配置的路径或选择预设

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

   或者("csscomb","zen","yandex")之一

   {
       "csscomb.preset": "csscomb"
   }
   

接下来,您需要.csscomb.json在该位置创建文件.我选择了C:\ Users\username\.vscode目录,因为这是VS Code在Windows上下载扩展的地方.

这是我使用csscomb的配置生成器创建的配置:

{
    "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
}

您还可以包含一个用于对标签进行排序的选项(或者在git上从其中一个预设中复制它):

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

现在,您应该能够通过键入ctrl+shift+p然后键入"CSScomb" 来在VS Code中格式化CSS enter.

应该通过默认的格式化键盘快捷方式识别"Formatter"扩展名shift+alt+f,但是我没有让它工作.我认为这是开发人员必须配置的东西.

相反,您可以在VS代码中创建自己的键盘快捷方式:

1. 转到文件>首选项>键盘快捷键
2. 单击顶部的链接进行编辑 keybindings.json

3. 添加自定义键绑定

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

现在你应该全力以赴!