3

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

你能告诉我如何配置 VS Code 和/或 csscomb 像这样工作吗？我使用的是 Windows 10 专业版。

4

1 回答 1

11

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

他们有“支持的设置”

csscomb.preset

类型：对象或字符串

默认值：{}

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

以及以下警告：

警告！

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

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

在 VS Code 中配置 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"
        ]
    ]
}

现在，您应该能够在 VS Code 中通过键入ctrl+shift+p然后键入“CSScomb”来格式化 CSS enter。

“格式化程序”扩展应该被默认格式化键盘快捷键识别shift+alt+f，但是我还没有让它工作。我认为这是开发人员必须配置的。

相反，您可以在 VS Code 中创建自己的键盘快捷键：

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

  3. 添加您的自定义键绑定

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

现在你应该准备好了！

于 2017-07-07T15:22:39.360 回答