Webstorm配置autoprefixer自动补全兼容前缀

作者： | 来源：互联网 | 2023-08-24 18:07

webstorm内置CSS3自动补全功能本文来自：http:blog.csdn.netpugongying520articledetails52712639eg：在样式文件border-r

webstorm内置CSS3自动补全功能

本文来自：http://blog.csdn.net/pugongying520/article/details/52712639
eg：在样式文件border-radius过程中会出现加前缀的样式，敲回车键即可

[css] view plain copy

"font-family:Microsoft YaHei;">div {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

但某些样式语句不能自动补全，如
输入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：文件目录即可，可根据自己需要调整

写具体配置，例如我的配置，如图：

Program:填入你的postcss-cli 的PATH；
Parameters: -u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$ ，你可以根据你自己的需要配置，具体参见https://github.com/code42day/postcss-cli
Working directory :$ProjectFileDir$

step5：运行

在输出文件中点击右键->autoprefixer ,即可生成新增兼容前缀的文件