visual-studio-code - 将 csscomb 用于 VS Code

Question

我尝试使用 VS Code 几天了，并且安装了 csscomb 扩展。当我将 .csscomb.json 放在我的工作目录中时，它工作正常。但我希望它即使在我在工作目录之外打开的文件上也能工作。

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

Answer 1

根据csscomb page在 VS Code 的 Marketplace 上...

他们有“支持的设置”

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.

以及以下警告:

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.

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

在 VS Code 中配置 csscomb:

1. 转到"file">“首选项”>“设置”
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 的位置代码还下载 Windows 上的扩展。

这是我使用 csscomb 的 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
}

您还可以包含一个用于对标签进行排序的选项(或从其 presets on git 之一复制它):

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

现在，您应该能够在 VS Code 中设置 CSS 格式，方法是键入 ctrl+shift+p，然后键入“CSScomb”，然后 enter。

“Formatter”扩展应该可以被默认格式键盘快捷键 shift+alt+f 识别，但我还没有让它工作。我认为这是developer has to configure .

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

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

3. 添加您的自定义键绑定(bind)

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

现在你应该已经准备好了!