首页 > 代码库 > Webstorm配置autoprefixer 自动补全兼容前缀
Webstorm配置autoprefixer 自动补全兼容前缀
webstorm内置CSS3自动补全功能
本文来自:http://blog.csdn.net/pugongying520/article/details/52712639
eg:在样式文件border-radius过程中会出现加前缀的样式,敲回车键即可
- <span style="font-family:Microsoft YaHei;">div {
- -webkit-border-radius:50%;
- -moz-border-radius:50%;
- border-radius:50%;
- }</span>
但某些样式语句不能自动补全,如
输入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:文件目录即可,可根据自己需要调整
step5:运行
在输出文件中点击右键->autoprefixer ,即可生成新增兼容前缀的文件
设置快捷键
Webstorm配置autoprefixer 自动补全兼容前缀