Webstorm配置autoprefixer 自動補全兼容前綴

webstorm內置CSS3自動補全功能

本文來自：http://blog.csdn.net/pugongying520/article/details/52712639
eg：在樣式文件border-radius過程當中會出現加前綴的樣式，敲回車鍵便可

<span style="font-family:Microsoft YaHei;">div {
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}</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：文件目錄便可，可根據本身須要調整

 

寫具體配置，例如個人配置，如圖：

1. Program:填入你的postcss-cli 的PATH；
2. Parameters: -u autoprefixer -o $FileDir$\$FileName$  $FileDir$\$FileName$ ，你能夠根據你本身的須要配置，具體參見https://github.com/code42day/postcss-cli
3. Working directory :$ProjectFileDir$

step5：運行

在輸出文件中點擊右鍵->autoprefixer ,便可生成新增兼容前綴的文件

 

設置快捷鍵