Webstorm实现css3自动加前缀prefix

CSS3不同平台兼容性增加了很多代码,人工实现兼容费时费力又容易出错。
好在神器webstorm内置了css3自动补全。当输入transform时,webstorm
会自动补全如下,nice:)

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

但是当我们从别处复制来的或者只有原生的时怎么办呢?

autoprefixer

autoprefixer可以实现css3代码自动补全。

详情见,https://github.com/postcss/autoprefixer

webstorm整合autoprefixer

打开设置,搜索external tools,点击绿色+号,

配置如下

2015-04-20_144359.png

Program是autoprefixer 的PATH,windows下可以用

where autoprefixer

参数如下

Program:填入你的PATH,我的是C:\Users\Administrator\AppData\Roaming\npm\autoprefixer.cmd

Parameters:$FileDir$$FileName$

Working directory :$ProjectFileDir$

配置快捷键

keymap 搜索 external tool, 配置 autoprefixer即可。 我配置的是
CTRL+SHIFT+ALT+P。

下次就可以直接CTRL+SHIFT+ALT+P一键转换了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容