美文网首页
在Webstorm上安装csscomb插件

在Webstorm上安装csscomb插件

作者: 如沙雨下 | 来源:发表于2017-10-10 11:46 被阅读473次

    前端工程师在开发过程中要按照一定的规则来排列CSS样式是一件很繁琐的事情,并且也不方便频繁地修改代码,csscomb插件可以格式化你的css代码,看起来更加美观,更利于团队合作,同时运行效率更高。另外,csscomb不仅仅支持css还支持css的预处理器(SASS、LESS、Stylus等)。

    使用姿势

    1.全局安装csscomb: npm install -g csscomb
    2.WebStorm 内打开 Settings ->Tools -> External Tools
    3.点击+形状的icon
    4.对照填入
    – Name: CSScomb
    – Program: path_to_installed_csscomb/bin/csscomb 改为(C:\Users\你当前的系统用户名\AppData\Roaming\npm\csscomb.cmd)
    – Parameters:$FilePath$ -v -t
    – Working directory: $FileDir$


    设置分组
    Group:CSS TOOLS (自定义,出现在右键菜单分组中)
    5.点击apply
    6.在项目任意位置新建一个 .csscomb.json 文件,然后写入需要的配置,WebStorm会自动读取这个配置。可以在csscomb的官网按照提示,可视化的生成一个配置,点击访问,共有24个选项。将生成的配置拷贝到.csscomb.json文件中即可。
    7.在css文件上右键菜单找到CSS TOOLS分组,点击CSScomb

    补充一份配置文件

    {
      "remove-empty-rulesets": true,
      "always-semicolon": true,
      "color-case": "lower",
      "block-indent": "  ",
      "color-shorthand": true,
      "element-case": "lower",
        "eof-newline": true,
        "leading-zero": false,
        "quotes": "single",
        "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,
        "unitless-zero": true,
      "vendor-prefix-align": false,
      "sort-order": [
        [
          "content",
          "z-index",
          "position",
          "float",
          "top",
          "right",
          "bottom",
          "left",
          "overflow",
          "overflow-x",
          "overflow-y",
          "-ms-overflow-x",
          "-ms-overflow-y",
          "display",
          "width",
          "min-width",
          "max-width",
          "height",
          "min-height",
          "max-height",
          "margin",
          "margin-top",
          "margin-right",
          "margin-bottom",
          "margin-left",
          "padding",
          "padding-top",
          "padding-right",
          "padding-bottom",
          "padding-left",
          "border",
          "border-width",
          "border-style",
          "border-color",
          "border-top",
          "border-top-width",
          "border-top-style",
          "border-top-color",
          "border-right",
          "border-right-width",
          "border-right-style",
          "border-right-color",
          "border-bottom",
          "border-bottom-width",
          "border-bottom-style",
          "border-bottom-color",
          "border-left",
          "border-left-width",
          "border-left-style",
          "border-left-color",
          "-webkit-border-radius",
          "-moz-border-radius",
          "border-radius",
          "-webkit-border-top-left-radius",
          "-moz-border-radius-topleft",
          "border-top-left-radius",
          "-webkit-border-top-right-radius",
          "-moz-border-radius-topright",
          "border-top-right-radius",
          "-webkit-border-bottom-right-radius",
          "-moz-border-radius-bottomright",
          "border-bottom-right-radius",
          "-webkit-border-bottom-left-radius",
          "-moz-border-radius-bottomleft",
          "border-bottom-left-radius",
          "-webkit-border-image",
          "-moz-border-image",
          "-o-border-image",
          "border-image",
          "-webkit-border-image-source",
          "-moz-border-image-source",
          "-o-border-image-source",
          "border-image-source",
          "-webkit-border-image-slice",
          "-moz-border-image-slice",
          "-o-border-image-slice",
          "border-image-slice",
          "-webkit-border-image-width",
          "-moz-border-image-width",
          "-o-border-image-width",
          "border-image-width",
          "-webkit-border-image-outset",
          "-moz-border-image-outset",
          "-o-border-image-outset",
          "border-image-outset",
          "-webkit-border-image-repeat",
          "-moz-border-image-repeat",
          "-o-border-image-repeat",
          "border-image-repeat",
          "-webkit-box-sizing",
          "-moz-box-sizing",
          "box-sizing",
          "line-height",
          "text-align",
          "-webkit-text-align-last",
          "-moz-text-align-last",
          "-ms-text-align-last",
          "text-align-last",
          "background",
          "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
          "background-attachment",
          "background-color",
          "background-image",
          "background-position",
          "background-position-x",
          "-ms-background-position-x",
          "background-position-y",
          "-ms-background-position-y",
          "-webkit-background-clip",
          "-moz-background-clip",
          "background-clip",
          "background-origin",
          "-webkit-background-size",
          "-moz-background-size",
          "-o-background-size",
          "background-size",
          "background-repeat",
          "color",
          "opacity",
          "font",
          "font-style",
          "font-variant",
          "font-weight",
          "font-size",
          "font-family",
          "font-size-adjust",
          "font-stretch",
          "font-effect",
          "font-emphasize",
          "font-emphasize-position",
          "font-emphasize-style",
          "font-smooth",
          "vertical-align",
          "white-space",
          "-ms-word-wrap",
          "word-wrap",
          "word-break",
          "-ms-word-break",
          "cursor",
          "-webkit-transform",
          "-moz-transform",
          "-ms-transform",
          "-o-transform",
          "transform",
          "-webkit-transform-origin",
          "-moz-transform-origin",
          "-ms-transform-origin",
          "-o-transform-origin",
          "transform-origin",
          "-webkit-transition",
          "-moz-transition",
          "-ms-transition",
          "-o-transition",
          "transition",
          "-webkit-transition-delay",
          "-moz-transition-delay",
          "-ms-transition-delay",
          "-o-transition-delay",
          "transition-delay",
          "-webkit-transition-timing-function",
          "-moz-transition-timing-function",
          "-ms-transition-timing-function",
          "-o-transition-timing-function",
          "transition-timing-function",
          "-webkit-transition-duration",
          "-moz-transition-duration",
          "-ms-transition-duration",
          "-o-transition-duration",
          "transition-duration",
          "-webkit-transition-property",
          "-moz-transition-property",
          "-ms-transition-property",
          "-o-transition-property",
          "transition-property",
          "-webkit-box-shadow",
          "-moz-box-shadow",
          "box-shadow",
          "filter:progid:DXImageTransform.Microsoft.gradient",
          "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
          "text-shadow",
          "visibility",
          "clear",
          "clip",
          "zoom",
          "flex-direction",
          "flex-order",
          "flex-pack",
          "flex-align",
          "table-layout",
          "empty-cells",
          "caption-side",
          "border-spacing",
          "border-collapse",
          "list-style",
          "list-style-position",
          "list-style-type",
          "list-style-image",
          "quotes",
          "counter-reset",
          "counter-increment",
          "resize",
          "-webkit-user-select",
          "-moz-user-select",
          "-ms-user-select",
          "user-select",
          "nav-index",
          "nav-up",
          "nav-right",
          "nav-down",
          "nav-left",
          "-webkit-animation",
          "-moz-animation",
          "-ms-animation",
          "-o-animation",
          "animation",
          "-webkit-animation-name",
          "-moz-animation-name",
          "-ms-animation-name",
          "-o-animation-name",
          "animation-name",
          "-webkit-animation-duration",
          "-moz-animation-duration",
          "-ms-animation-duration",
          "-o-animation-duration",
          "animation-duration",
          "-webkit-animation-play-state",
          "-moz-animation-play-state",
          "-ms-animation-play-state",
          "-o-animation-play-state",
          "animation-play-state",
          "-webkit-animation-timing-function",
          "-moz-animation-timing-function",
          "-ms-animation-timing-function",
          "-o-animation-timing-function",
          "animation-timing-function",
          "-webkit-animation-delay",
          "-moz-animation-delay",
          "-ms-animation-delay",
          "-o-animation-delay",
          "animation-delay",
          "-webkit-animation-iteration-count",
          "-moz-animation-iteration-count",
          "-ms-animation-iteration-count",
          "-o-animation-iteration-count",
          "animation-iteration-count",
          "-webkit-animation-direction",
          "-moz-animation-direction",
          "-ms-animation-direction",
          "-o-animation-direction",
          "animation-direction",
          "text-decoration",
          "text-emphasis",
          "text-emphasis-color",
          "text-emphasis-style",
          "text-emphasis-position",
          "text-indent",
          "-ms-text-justify",
          "text-justify",
          "letter-spacing",
          "word-spacing",
          "-ms-writing-mode",
          "text-outline",
          "text-transform",
          "text-wrap",
          "text-overflow",
          "-ms-text-overflow",
          "text-overflow-ellipsis",
          "text-overflow-mode",
          "-moz-tab-size",
          "-o-tab-size",
          "tab-size",
          "-webkit-hyphens",
          "-moz-hyphens",
          "hyphens",
          "pointer-events",
          "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
          "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
          "-ms-interpolation-mode",
          "outline",
          "outline-width",
          "outline-style",
          "outline-color",
          "outline-offset",
          "box-decoration-break"
        ]
      ]
    }
    

    END

    相关文章

      网友评论

          本文标题:在Webstorm上安装csscomb插件

          本文链接:https://www.haomeiwen.com/subject/idrvyxtx.html