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 ， 谢谢！！！