webstorm补全兼容前缀

发表于 | 更新于 | 分类于

因为不同浏览器的内核不尽相同，所以浏览器对页面的渲染也有一定差异，即浏览器对同一段代码有不同的解析，这就导致了浏览器兼容问题的出现，为了使页面在不同浏览器上呈现相同效果，较为简单的方法便是为部分代码添加前缀样式，来兼容不同浏览器。
如果使用webstorm编辑器，我们可以在webstorm中配置autoprefixer 来自动补全兼容前缀，在此简单记录配置过程，方便需要时参考。

安装及配置

第一步：安装node.js
官网下载需要的版本直接安装，并且新版的node.js已经集成了npm，所以不需要再安装npm包
第二步：安装autoprefixer
在cmd中输入
npm install autoprefixer -g
使用npm管理工具来安装autoprefixer
第三步：安装postcss-cli
在cmd中输入
npm install postcss-cli -g
第四步：设置webstorm
打开webstorm>文件>设置>工具>外部工具，点击新增按钮
配置autoprefixer
配置内容如下：

1
2
3
4
Name:auotoprefixer 
Program:填入 postcss 的PATH
Parameters:-u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$
Working directory ：`$ProjectFileDir$`

Progrm栏需要填写 postcss 的路径，一般为 用户名\AppDate\Roaming\npm 下的postcss.cmd
Parameters栏可根据自己的需要配置
Working directory为工作目录，一般为文件目录，可根据自己的需要配置
运行
在需要补全代码的文件上单击右键>External Tools>autoprefixer，即可为代码进行兼容补全

关于使用cmd安装解决windows权限问题

安装环境包，经常出现2503或者2502的错误，都是由于windows的权限问题导致的，如果我们使用cmd来安装，可以轻松避免这样的问题

  • 以管理员身份运行cmd
  • 进入安装包所在目录
  • 输入msiexec /i xxxx.msi回车 进行安装 即可

cmd的一些简单命令：
cd xxx进入xxx文件下
cd \回到根目录
msiexec查看相关安装选项