Autoprefixer在VSCode保存时自动加前缀需满足三条件：安装正确插件mrmlnc.vscode-autoprefixer、本地安装postcss和autoprefixer、根目录存在postcss.config.js；默认不处理.css文件，需配置files.associations或run-on-save；前缀生成依赖browserslist配置，且易被Prettier格式化破坏顺序。
Autoprefixer 在 VSCode 保存时自动加前缀，不是装插件就完事——它必须走 PostCSS 流程，且默认不处理 .css 文件。
为什么保存后没加任何前缀？检查这三处硬性依赖
常见现象：装了插件、写了 display: flex、按 Ctrl+S，结果毫无反应。本质是触发链断在了底层。
- 插件必须是
mrmlnc.vscode-autoprefixer（作者名拼错或装了“Auto Prefixer”等变体都无效） - 项目本地必须安装
postcss和autoprefixer：npm install -D postcss autoprefixer（全局安装不认） - 根目录必须存在
postcss.config.js或.postcssrc，哪怕只写一行：module.exports = { plugins: [require('autoprefixer')] };
如何让 .css 文件也触发 Autoprefixer？
默认情况下，mrmlnc.vscode-autoprefixer 只响应 .scss、.less、.pcss 等预处理器文件，对原生 .css 文件静默跳过——这不是 bug，是设计上假设你用 Webpack/Vite 构建时统一处理。
- 临时方案：VSCode 设置中搜
files.associations，添加"*.css": "postcss"，强制把.css当 PostCSS 文件解析 - 更稳做法：配合
run-on-save插件，在settings.json里加命令："emeraldwalk.runonsave": { "commands": [{ "match": "\.css$", "cmd": "npx autoprefixer -r ${file} --config ./postcss.config.js" }] } - 注意：
postcss.config.js中的autoprefixer配置必须显式传overrideBrowserslist，否则 fallback 到默认（可能太宽松或太激进）
browserslist 配置决定加不加、加哪些前缀
写 gap: 1rem 却没生成 -webkit-gap？不是插件失效，是你配的浏览器范围根本不需要它。Autoprefixer 完全依赖 browserslist 查询结果。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：在
package.json里加字段："browserslist": ["> 1%", "last 2 versions", "not dead"] - 验证是否生效：终端运行
npx browserslist，看输出是否含 Safari 14.1 或 iOS 14.5 等你需要的老版本 - 别盲目抄“
IE 10”配置：-ms-前缀会加，但 IE10 的 Flex 实现和标准不兼容，加了反而错乱 - 慎用
last 1 version：Chrome Canary 或 Safari Technology Preview 这类“最新版”会进列表，导致加一堆无意义前缀
为什么前缀加了又消失？格式化工具正在悄悄覆盖
高频真实问题：Autoprefixer 加完 -webkit-transition，Prettier 紧跟着按字母序重排属性，把带前缀的行挪到中间——而浏览器要求 -webkit- 必须在标准属性之前，顺序一乱就失效。
- 最简解法：VSCode 中关掉 CSS 文件的
editor.formatOnSave（仅对.css文件设为false） - 进阶控制：在
prettier.config.js里加"cssDeclarationSortOrder": "smacss"或禁用排序 - 构建时更稳妥：把 Autoprefixer 放到构建流程里（如 Vite 的
css.postcss.options.plugins），编辑器只负责写标准语法
真正麻烦的点不在配置步骤，而在于「谁该负责加前缀」——VSCode 插件适合单文件快速验证，但项目一旦接入 Webpack/Vite，就必须停用编辑器侧的自动处理，否则两套流程叠加，-webkit-box-orient 被加两次，user-select 的前缀顺序被格式化工具打乱，最后线上样式出 bug 才去查，已经晚了。
