在Webstorm中使用Autoprefixer

Autoprefixer是一個後處理程序，不象Sass以及Stylus之類的預處理器。它適用於普通的CSS，能夠實現css3代碼自動補全。也能夠輕鬆跟Sass，LESS及Stylus集成，在CSS編譯前或編譯後運行。詳情見， https://github.com/postcss/autoprefixer

具體安裝和配置：

1.首先固然是安裝node.js;

（略）

2.安裝Autoprefixer，

見 https://github.com/postcss/autoprefixer ：

sudo npm install autoprefixer -g

要不要加 sudo ，或者是否是全局安裝（ -g ）那就看你本身的環境了。

npm太慢，我是用淘寶的 NPM 鏡像的 https://npm.taobao.org/

3.安裝postcss-cli

Autoprefixer實際上是postcss的插件，見 https://github.com/code42day/postcss-cli

sudo npm install postcss-cli -g

4.配置External Tools

打開Webstorm設置，Preferences -> Tools -> External Tools ;點擊新增按鈕，如圖：

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

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

配置好後，你能夠在css，或sass文件中右鍵，就能夠在右鍵菜單中看到External Tools – autoprefixer，點擊搞定，嘎嘎。

5.設置快捷鍵

右鍵太麻煩的話，能夠設置個快捷鍵，打開Webstorm設置，Preferences -> Keymap ， 搜索External Tools ， 配置 autoprefixer便可。 不要和原來的衝突就能夠了。

ps：windows下能夠直接用autoprefixer的PATH，具體配置