在Webstorm中使用Autoprefixer的例子

曾经一直用sublime text写html和css,这些问题都有相应的插件。用Webstorm写js,但是来回切换编辑器也比较麻烦。
虽然Webstorm内置了css3自动补全功能,当输入user-select时,Webstorm会自动补全:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

但是很多情况下,这种自动补全并不令人满意,比如当我输入display:flex;时,Webstorm并不会自动补全为:

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
关于Autoprefixer

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {
     background : linear-gradient(to top, black, white);
     display : flex
}
::placeholder {
     color : #ccc
}
编译成:

a {
    background : -webkit-linear-gradient(bottom, black, white);
    background : linear-gradient(to top, black, white);
    display : -webkit-box;
    display : -webkit-flex;
    display : -moz-box;
    display : -ms-flexbox;
    display : flex
}
:-ms-input-placeholder {
    color : #ccc
}
::-moz-placeholder {
    color : #ccc
}
::-webkit-input-placeholder {
    color : #ccc
}
::placeholder {
    color : #ccc
}
 
Autoprefixer 同样会清理过期的前缀,因此下面的代码:

a {
    -webkit-border-radius : 5px;
    border-radius : 5px
}
编译成:

a {
    border-radius : 5px
}
因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

具体安装和配置:

所以尝试在Webstorm下搜索autoprefixer插件,无果。那就自己手动配置了一个。首先我考虑配置File Watchers,但是不习惯,原来在sublime text下用autoprefixer都是手动触发的,所以后面我配置了External Tools。

1.首先当然是安装node.js;

(略)

2.安装Autoprefixer,

见https://github.com/postcss/autoprefixer:

sudo npm install autoprefixer -g
要不要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。

npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/

3.安装postcss-cli

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli

sudo npm install postcss-cli -g

4.配置External Tools

打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮,如图:

填写具体配置,例如我的配置,如图:

Program:填入你的postcss-cli 的PATH;
Parameters: -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli
Working directory :$ProjectFileDir$
配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer,点击搞定,嘎嘎。

5.设置快捷键

右键太麻烦的话,可以设置个快捷键,打开Webstorm设置,Preferences -> Keymap , 搜索External Tools , 配置 autoprefixer即可。 不要和原来的冲突就可以了。

ps:windows下可以直接用autoprefixer的PATH,具体配置

2016年4月13日更新:

windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer 这个问题,
可以配置
Program:C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory :$ProjectFileDir$

时间: 2024-08-31 14:42:46

在Webstorm中使用Autoprefixer的例子的相关文章

Python Web框架Pylons中使用MongoDB的例子

 这篇文章主要介绍了Python Web框架Pylons中使用MongoDB 的例子,大家参考使用 Pylons 经过漫长的开发,终于放出了 1.0 版本.对于正规的产品开发来说,1.0 版本的意义很大,这表明 Pylons 的 API 终于稳定下来了.   Pylons 虽是山寨 Rails 而生,但作为一个纯 Python 的 Web 框架,它有一个鲜明的特点:可定制性强.框架每一层都没重新发明轮子,而是尽量整合现有的 Python 库.在 MVC 的 Model 层,Pylons 默认支持

javascript中应用 cookie 的 例子

cookie|javascript java中的cookie使用时非常的广泛的,尤其一些 在线 影音 播放的网站, 一般都是用服务器段脚本将 影音文件的名字 放到cookie中,然后在客户段 用 javascript 读取 .这样可以隐蔽 文件的名字,防止下载. 下面就把一个javascript中使用 cookie的例子发出来.大家共同学习.  写 cookie          var expiresTime=new Date();         expiresTime.setTime(ex

在ASP.NET中操作文件的例子

asp.net  在ASP.NET中操作文件的例子 1.写文件writefile.aspx <%@ Import Namespace="System.IO" %> '引入所需的NameSpace<%Response.write("Writing the content into Text File in ASP.NET <BR>")Dim strwriterobj As StreamWriter '声明一个StreamWriter对象s

在ASP.NET中操作文件的例子(VB)

asp.net 在ASP.NET中操作文件的例子 1.写文件writefile.aspx <%@ Import Namespace="System.IO" %>        '引入所需的NameSpace<%Response.write("Writing the content into Text File in ASP.NET <BR>")Dim strwriterobj As StreamWriter         '声明一个S

目标跟踪学习笔记_1(opencv中meanshift和camshift例子的应用)

在这一节中,主要讲目标跟踪的一个重要的算法Camshift,因为它是连续自使用的meanShift,所以这2个函数opencv中都有,且都很重要.为了让大家先达到一个感性认识.这节主要是看懂和运行opencv中给的sample并稍加修改.      Camshift函数的原型为:RotatedRect CamShift(InputArray probImage, Rect& window, TermCriteria criteria).      其中probImage为输入图像直方图的反向投影

arcgis android query- 关于arcgis for android 中的QueryTask这个例子的一些问题

问题描述 关于arcgis for android 中的QueryTask这个例子的一些问题 在下面的源码中我主要有几点不明白 请各位大神能够帮助解答 第一.这个个例子中是什么时候开始对地图进行初始化的啊? 在xml文件中的url="http://www.arcgis.com/home/webmap/viewer.html?webmap=58e58acce685442aa4c73f91fbb3a387"这句话是对该地图进行初始化吗? 为什么不是一个mapserver啊? 代码片段,双击

c++问题-关于c++ primer中一个友元的例子

问题描述 关于c++ primer中一个友元的例子 C++primer中的一个例子,关于友元,在VS2015报错,定义了两个类Screen和window-mgr,window-mgr作为Screen的友元,但是提示Screen没有构造函数 解决方案 贴出你的代码,你如果有拷贝之类的操作但是没有定义拷贝构造函数,或者初始化对象,但是没有提供无参数公共构造函数等,都会报错. 解决方案二: C++Primer之友元<C++ Primer>中的TextQuery例子 解决方案三: 这个其实跟友元没关系

在webstorm中,有什么方法一键让style内容展开

问题描述 在webstorm中,有什么方法一键让style内容展开 如照片所示:现在想有没有快捷键可以让webstorm中所以的style内容全部展开: 效果:style="width:100%"

win7下复制文本到webstorm中粘贴出来是上一次在webstorm中复制的文本

问题描述 win7下复制文本到webstorm中粘贴出来是上一次在webstorm中复制的文本 我在其他地方复制一段文本,随便找个地方粘贴,没有问题,但是到webstorm中粘贴就编程了之前在webstorm中复制的文本,感觉webstorm跟windows的剪切板是两个剪切板啊,不能共享啊,这个怎么解决 解决方案 没遇到过这个问题,建议重装一下试试 解决方案二: windows mobile 如何复制.粘贴文本信息