怎么在webstorm里安装autopremixer插件

最近发现了一个很有意思的插件，autoprofixer插件，说是可以自动补充CSS3的兼容前缀。
表示很心动，如果可以不用对一个CSS属性去写多个兼容写法，而只交给插件来完成的话，相信开发效率会高效很多吧~
那心动就不如行动吧

1. 首先npm全局安装autopromixer插件

（使用npm的前提是安装了node；没有安装的要先安装node.js）

npm install autoprefixer -g

或者国内淘宝镜像（个人倾向，安装速度快一些）

cnpm i autoprefixer -g

2. 安装postcss-cli

autoprefixer其实是postcss的插件

cnpm i postcss-cli -g

3. 在webstorm里配置External Tools 添加autoprofixer

File >> Settings >> Tools >> External Tools
然后点击“+”进行添加

1. name：autoprefixer（给工具起个名字，不是固定的 自己起个后续用的容易记的名字也行）

2. Program:（你的postcss.cmd的路径）

   不知道的话可直接在终端 where postcss.cmd查找其路径
   比如我自己的
   
   直接复制路径到 Program 中

3. Parameters: -u autoprefixer -o $FileDir$/$FileName$ ?$FileDir$/$FileName$
   可根据自己的需要配置，具体参数可见
   https://github.com/pirxpilot/postcss-cli

4. Working directory :$ProjectFileDir$

(一般 Parameters和Working directory这样配置就行了）

5. 然后对相关的CSS文件右键External Tools则会有autoprefixer,点击即完成


这样就成功了
6. 如果想要安装后想要更快捷使用autoprofixer的话，创建其快捷键就行
File >> Settings >> Keymap >> External Tools
找到先前添加的插件 autoprefixer，点击，选择Add Keyboard Shortcut 添加快捷键


就可以敲击键盘键选择快捷键啦，按个人习惯