sublime text3 csscomb插件的安裝使用

遊戲數碼

csscomb插件主要是為了讓讓你的代碼更漂亮,幫助你按照你預定義的排序格式生成新的CSS；如果需要全棧開發的sublime-text3編輯器的可以輸入page45點ctfile點com斜槓fs斜槓iUm164723488即可得到

工具/原料

sublime text3
pc電腦

方法/步驟

一、使用快捷鍵ctrl+shift+p 輸入pin打開插件控制台下載csscomb;

二、你會看到默認的的效果如下圖所示；需要配合node來使用，百度node下載安裝完成後，node-path默認情況下不需要設置，如果沒有效果那麼可以配置一下他的地址如： "node-path" : "D:/Program Files/nodejs/node_modules/npm/bin",代表node的安裝位置；這裡我主要用來設置在一整行顯示，另外一個插件用於豎向顯示，請看我另外一個經驗

"node-path" : ":/usr/local/bin",

"config": {

"always-semicolon": true,

"block-indent": " ",

"color-case": "lower",

"color-shorthand": true,

"element-case": "lower",

"eof-newline": true,

"leading-zero": false,

"quotes": "single",

"remove-empty-rulesets": true,

"space-after-colon": " ",

"space-after-combinator": " ",

"space-after-opening-brace": "\n",

"space-after-selector-delimiter": "\n",

"space-before-closing-brace": "\n",

"space-before-colon": "",

"space-before-combinator": " ",

"space-before-opening-brace": "\n",

"space-before-selector-delimiter": "",

"space-between-declarations": "\n",

"strip-spaces": true,

"unitless-zero": true,

"vendor-prefix-align": true,

三、修改默認配置讓效果更佳；注意一下紅色框圖片位置；把],[去掉這樣就不會空行了

{

"node-path" : "D:/Program Files/nodejs/node_modules/npm/bin",

"config": {

"always-semicolon": true,

"block-indent": " ",

"color-case": "lower",

"color-shorthand": true,

"element-case": "lower",

"eof-newline": true,

// Add/remove leading zero in dimensions.小數點前面有0;

"leading-zero": true,

"quotes": "single",

"remove-empty-rulesets": true,

"space-after-colon": " ",

"space-after-combinator": " ",

"space-after-opening-brace": "",

// Set space after selector delimiter.選擇器空格還是換行;

"space-after-selector-delimiter": " ",

"space-before-closing-brace": "",

"space-before-colon": "",

"space-before-combinator": " ",

"space-before-opening-brace": " ",

"space-before-selector-delimiter": "",

"space-between-declarations": " ",

"strip-spaces": true,

"unitless-zero": true,

"vendor-prefix-align": true,

注意事項

得到大家的投票，是我努力的動力，請點擊文章末尾的「投票」和「收藏」按鈕支持我，並關注szhdl0929，及時了解我的最新經驗分享。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場