自动补全css兼容前缀 Vscode插件 - Autoprefi

在前端开发中，为了使页面能够在主流浏览器上显示，部分css属性就需要添加不同的兼容前缀,例如：

-moz-：Firefox，GEcko引擎
-webkit-： Safari和Chrome，Webkit引擎
-o- ：Opera(早期)，Presto引擎，后改为Webkit引擎
-ms- ：Internet Explorer，Trident引擎
为了避免遗漏和减少工作量，可以安装Autoprefixer插件，自动补全css的前缀。适用于css、less、scss。`

一、安装步骤

1.在扩展里搜索Autoprefixer，点击安装

image.png

2.配置

设置-搜索Autoprefixer 选择在settings.json中编辑

image.png

在autoprefixer.options里添加如下代码：

    "autoprefixer.options": {
        "browsers": [
            "ie >= 6",
            "firefox >= 8",
            "chrome >= 24",
            "Opera >= 10",
            "last 2 versions",
            "> 5%"
        ]
    }

配置参数:
"ie >= 6":IE浏览器版本大于等于6
" >5%":全球超过5%人使用的浏览器
“last 2 versions”: 所有浏览器兼容到最后两个版本

注意：在处理兼容IE浏览器时，要注意IE浏览器较低版本本身就不支持的属性，即使进行兼容处理也不能应用。

3、使用方法：

在需要处理的css文件里F1，选择Autoprefixer：Run选项

效果如下：

//使用前
.container {
    display: block;
    flex-direction: row;
    justify-content: center;
}
//使用后
.container {
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}