Webstorm配置autoprefixer 自動補全相容首碼

標籤：技術   fill   css3   程式   iss   com   tar   搜尋   nal   

webstorm內建CSS3自動補全功能

本文來自：http://blog.csdn.net/pugongying520/article/details/52712639
eg：在樣式檔案border-radius過程中會出現加首碼的樣式，敲斷行符號鍵即可

[css] view plain copy 

1. <span style="font-family:Microsoft YaHei;">div {  
2.     -webkit-border-radius:50%;  
3.     -moz-border-radius:50%;  
4.     border-radius:50%;  
5. }</span>  

但某些樣式語句不能自動補全，如
輸入display: flex;


Autoprefixer是一個後處理常式，不象Sass以及Stylus之類的前置處理器。它適用於普通的CSS，可以實現css3代碼自動補全。


使用方法：
step1：安裝node.js (http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html)


step2：安裝Autoprefixer  npm install autoprefixer -g


step3：安裝postcss-cli  npm install postcss-cli -g

 

 

step4：設定webstorm External Tools

開啟webstorm->File->搜尋External Tools->點擊‘+’，設定Edit Tool

 

Name:autoprefixer 

Tool settings

       Program： 找到AppData下的檔案postcss.cm  若找不到AppData，在地址欄輸入%appdata%斷行符號即可

       Parameters：-u autoprefixer -o outputFile inputFile  注意檔案順序輸出檔案及輸入檔案 ，輸入檔案需要先建立，不能自動產生

       Working directory：檔案目錄即可，可根據自己需要調整

 

step5：運行

在輸出檔案中點擊右鍵->autoprefixer ,即可產生新增相容首碼的檔案

 

設定快速鍵

 

Webstorm配置autoprefixer 自動補全相容首碼