Web前端

VS Code 使用 Autoprefixer 插件给样式自动添加浏览器所需前缀

1 min read

在编写现代 CSS 时，为了确保 flexbox、grid、transform 或 user-select 等特性在各大浏览器（WebKit、Gecko、Blink）中兼容良好，手动编写 -webkit-、-moz-、-ms- 前缀极其繁琐且易漏。通过 VS Code 的 Autoprefixer 插件，可以实现一键或保存时自动补充前缀。

一、 插件安装与使用

  1. 打开 VS Code，按下快捷键 Ctrl + Shift + X 打开应用扩展商店；
  2. 搜索 Autoprefixer 并点击“安装 (Install)”；
  3. 在打开的 CSS / SCSS / Less 文件中，按快捷键 F1（或 Ctrl + Shift + P）打开命令面板；
  4. 输入 Autoprefixer: Run 并回车，插件会自动解析当前文件的 CSS 规则，并根据目标浏览器规则补齐所有必要的前缀。

二、 推荐配置与 Browserslist 规则

打开 VS Code 设置（Ctrl + ,），搜索 autoprefixer，可以在 settings.json 中自定义目标浏览器兼容范围：

{
  "autoprefixer.browsers": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "ie >= 11"
  ],
  "autoprefixer.formatOnSave": true
}

三、 效果前后对比

格式化前：

.box {
    display: flex;
    user-select: none;
    transform: rotate(45deg);
}

运行 Autoprefixer 自动处理后：

.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
#Web前端