Webstorm如何配置自動補全前綴--autoprefixer

       咱們在寫樣式代碼時，對不一樣平臺會有不一樣的兼容性寫法，會在代碼前加前綴，可是手動加前綴很費時間並且很容易弄錯。Webstorm編輯器是有自帶補全前綴功能的，那爲何還要寫這篇配置博客，由於Webstorm編輯器並不能把全部的樣式代碼給你補全，此時加上autoprefixer雙劍合璧確保萬全。下面是配置步驟：

 

       1.這個不用說，autoprefixer要先安裝，那安裝autoprefixer用到npm，要用npm就要有node.js，全部第一步是安裝node.js，網上不少教程，這裏不贅述。

 

       2.全局安裝autoprefixer：npm install autoprefixer -g --registry=https://registry.npm.taobao.org --verbose（--registry=https://registry.npm.taobao.org --verbose這是淘寶鏡像，能夠加速的，照着複製就能夠了。）

 

       3.全局安裝postcss-cli：npm install postcss-cli -g --registry=https://registry.npm.taobao.org --verbose，由於autoprefixer是postcss的插件，因此固然要安裝這個。

 

        4.配置Webstorm：打開Webstorm--file--settings--tools--external tools ,點擊'+'新建

         Name： autoprefixer，

         Program：postcss-cli的path，

         Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileNameWithoutExtension$.css,

         Working directory:$ProjectFileDir$，點擊OK便可。以下圖所示：

 

       注意：Parameters中的-u autoprefixer -o是固定的，$FileDir$\$FileName$是輸出文件，$FileDir$\$FileNameWithoutExtension$.css是輸入文件，這二者之間有一個空格。若是你的輸入文件是本身建好的，那就直接寫你建好的css文件名就能夠了，例如：$FileDir$\style.css。我這裏的css文件是stylus轉譯而成的，因此寫成$FileDir$\$FileNameWithoutExtension$.css。同時根據文件夾結構不一樣Parameters的輸入輸出也可能不一樣，具體視狀況而定。

        

 

         配置完了並非說你寫樣式就會自動給你補全前綴，效果是須要手動操做的，在你須要輸出的文件處右鍵，你會看到external tools，移上會出現autoprefixer，點擊就會轉換成加了前綴的樣式：

 

 

         若是你以爲總是右鍵太麻煩，你也能夠設置快捷鍵，點擊settings--keymap--external tools進行設置便可，注意不要和你其餘的快捷鍵衝突就行了。

 

 

 

 

     如需轉載請註明出處：http://www.cnblogs.com/zishang91/p/7573138.html ， 謝謝！！！