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 ,即可生成新增兼容前綴的文件

 

設置快捷鍵