对VS代码使用csscomb

Question

我尝试了几天的VS代码，我已经安装了csscomb扩展。当我将.csscomb.json放在我的工作目录中时，它工作得很好。但我希望它在我打开的工作目录之外的文件中也能工作。

你能告诉我如何配置VS代码和/或csscomb这样的工作方式吗？我使用Windows 10 Pro。

Answer 1

根据VS代码市场上的csscomb 页面 .

他们有“支持的设置”

csscomb.preset 类型:对象或字符串 Defaut：{} 配置的名字。应该是以下内容之一: csscomb、zen、yandex或包含自定义配置或配置.路径的对象。

并发出以下警告：

警告！ 如果要在当前目录中指定文件，路径必须以./或./(如果相对于当前目录)开始。您也可以使用主目录作为~符号。

换句话说，由于没有默认设置，您必须设置一个预置配置或自定义配置的路径。

在VS代码中配置css梳理：

1. 转到文件>首选项>设置
2. 选择右侧窗口中的“用户设置”选项卡(以全局应用配置)
3. 展开"CSScomb配置“选项
4. 单击"csscomb.preset“左侧的铅笔
5. 单击“复制到设置”
6. 输入自定义配置的路径或选择预置 { "csscomb.preset"：“~/..vscode/.csscom.json”} 或("csscomb“、"zen”、“yandex”之一) { "csscomb.preset"："csscomb“}

接下来，您需要在该位置创建.csscomb.json 文件。--我选择了C:\Users\username.vscode目录，因为VS代码也在C：\Users\username.vscode上下载扩展。

下面是我使用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"
        ]
    ]
}

现在您应该能够在VS代码中格式化CSS格式，方法是输入ctrl+shift+p ，然后键入"CSScomb“，然后输入 enter**.**

“格式化程序”扩展应该被默认格式键盘快捷方式shift+alt+f识别，但是我还没有做到这一点。我想这是开发人员必须配置的东西。

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

1. 转到File > Preferences >键盘快捷方式
2. 单击顶部的链接编辑keybindings.json
3. 添加自定义键绑定 {键："ctrl+shift+c"，“命令”："csscomb.execute“}

现在你应该准备好了！