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

webstorm内置CSS3自动补全功能

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

[css] view plain copy

  1. <span style="font-family:Microsoft YaHei;">div {
  2. -webkit-border-radius:50%;
  3. -moz-border-radius:50%;
  4. border-radius:50%;
  5. }</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 ,即可生成新增兼容前缀的文件


 

设置快捷键


 

时间: 2024-10-26 10:23:48

Webstorm配置autoprefixer 自动补全兼容前缀的相关文章

webstorm配置Autoprefixer,自动补齐代码

1.win+R,运行npm install postcss-cli -g 2.安装autoprefixer npm install autoprefixer -g 3.安装 npm install postcss-cli -g 4.打开webstorm--settings--找到External Tools,新增Tools 配置参数 Program:填入你的PATH,postcss.cmd所在的文件夹 我的是C:\Users\还有谁\AppData\Roaming\npm\postcss.cmd

【嗜血GO笔记】如何在goclipse 中配置代码自动补全。

代码总也不补全,用起来很不爽,但是liteide 的补全却很舒服,看了下 ,发现其实代码提示主要靠的就是gocode.exe这个文件 注意不是godoc.exe哈,有个小伙伴错误设成了godoc.exe半天他也没找到错误在哪. 我们看一下 如何在goeclipse 里面实现代码提示 首先要说明,其实goclipse 已经包含了一个gocode.exe,但是我只想把liteide的所有功能都迁移至goclipse 中, 所以,我选择的是直接借助liteide完成 用eclipse 纯是个人的一个小

[转] vim配置python自动补全

vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.python 模块内函数,变量补全 5.from module import sub-module 补全 想为vim启动自动补全需要下载插件,地址如下: http://vim.sourceforge.net/scripts/script.php?script_id=850https://github.co

webstorm配置scss自动编译路径

webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 点击左上角的File→Settings→File Watchers 在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss ------------------------------------------------------------------------------- Arguments: 可以配置编译后的文件的输出路径,我这里写的是: --n

Visual Studio 配置 Avalon 自动补全

以VS2013为例: 1.关闭 Visual Studio 2.打开 C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Packages\schemas\html 文件夹 3.删除 CommonHTML5Types.bin 4.打开 commonHTML5Types.xsd,以防万一,先备份再修改 5.打开文件找到此节点:<xsd:attributeGroup name="commonHTML5coreAttribute

Vim自动补全插件----YouCompleteMe安装与配置

Vim自动补全插件----YouCompleteMe安装与配置 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assist X这么方便快捷的补全插件呢?以前用的是neocomplcache+code_complete+omnicppcomplete,但效果还是不是很好.看到有YCM后前面的插件可以说拜拜了. YouCompleteMe:一个随键而全的.支持模糊搜索的.高速补全的插件.YCM 由 google 公司搜索项目组的软件工程师 Strahinja

【转】Vim自动补全插件----YouCompleteMe安装与配置

原文网址:http://www.cnblogs.com/zhongcq/p/3630047.html 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assist X这么方便快捷的补全插件呢?以前用的是neocomplcache+code_complete+omnicppcomplete,但效果还是不是很好.看到有YCM后前面的插件可以说拜拜了. YouCompleteMe:一个随键而全的.支持模糊搜索的.高速补全的插件.YCM 由 google 公司搜索

MyEclipse2015各种好用的自定义配置(SVN, JDK, Maven, Tomcat, 自动补全, UTF-8, 字体等)

以MyEclipse2015为例,各种好用的配置如下.   安装SVN插件:1. SVN官网查看最新的版本:http://subclipse.tigris.org,进入“Download and Install”2. 选择一个版本的url,比如:http://subclipse.tigris.org/update_1.10.x3. MyEclipse: Help -> Install from Site... -> add...把第2步的url填入“Location”中,点击OK4. 勾选 S

MyEclipse各种好用的自定义配置(SVN, JDK, Maven, Tomcat, 自动补全, UTF-8, 字体等)

以MyEclipse2015为例,各种好用的配置如下. 安装SVN插件: 1. SVN官网查看最新的版本:http://subclipse.tigris.org,进入"Download and Install" 2. 选择一个版本的url,比如:http://subclipse.tigris.org/update_1.10.x 3. MyEclipse: Help -> Install from Site... -> add...把第2步的url填入"Locati