使用csscomb for VS Code

时间:2017-02-06 16:03:26

标签: visual-studio-code csscomb

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

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

1 个答案:

答案 0 :(得分:7)

根据VS Code的市场上的csscomb page ...

他们有"支持的设置"

  

<强> csscomb.preset

     

类型:对象或字符串

     

Defaut:{}

     

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

以下警告:

  

警告!

     

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

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

在VS代码中配置csscomb:

  1. 转到文件&gt;偏好&gt;设置
  2. 选择&#34;用户设置&#34;右侧窗口中的选项卡(全局应用配置)
  3. 展开&#34; CSScomb配置&#34;
  4. 的选项
  5. 点击&#34; csscomb.preset&#34;
  6. 左侧的铅笔
  7. 点击&#34;复制到设置&#34;
  8. 输入自定义配置的路径或选择预设

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

    或其中一个(&#34; csscomb&#34;,&#34; zen&#34;,&#34; yandex&#34;)

    {
        "csscomb.preset": "csscomb"
    }
    
  9. 接下来,您需要在该位置创建.csscomb.json文件。我选择了C:\ Users \ username \ .vscode目录,因为VS代码也在哪里在Windows上下载扩展程序。

    这是我使用csscomb&#39; 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
    }
    

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

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

    现在,您应该可以通过键入ctrl+shift+p然后键入&#34; CSScomb&#34;来在VS代码中格式化CSS。然后enter

    &#34;格式化&#34;扩展名应该由默认格式化键盘快捷键shift+alt+f识别,但我还没有得到它。我认为这是developer has to configure

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

    1. 转到文件&gt;偏好&gt;键盘快捷键
    2. 点击顶部的链接修改keybindings.json
    3. 添加自定义键绑定

      {
          "key": "ctrl+shift+c",
          "command": "csscomb.execute"
      }
      
    4. 现在你应该全力以赴!