VSCode本身不内置Autoprefixer，必须同时安装mrmlnc.vscode-autoprefixer插件和本地postcss、autoprefixer包，并配置postcss.config.js；仅装插件或仅装包均会静默失败或报错。
VSCode 本身不自动加 CSS 前缀，必须靠插件 + 本地 PostCSS 环境协同工作；只装插件不装 autoprefixer 包，或没配 postcss.config.js，必然静默失败或报 Command 'Autoprefixer' not found。
插件和依赖必须同时存在，缺一不可
VSCode 的 Autoprefixer 功能本质是调用你项目里的 autoprefixer CLI，不是编辑器内置能力。常见错误是只装了插件，但没在项目里装包。
- 卸载所有非官方插件：只保留
mrmlnc.vscode-autoprefixer（作者是 mrmlnc），删掉名字含 “Auto Prefixer”“CSS Auto Prefix” 等拼写变体的废弃插件 - 在项目根目录运行：
npm install -D postcss autoprefixer（必须是-D本地安装，全局npm install -g autoprefixer无效） - 创建
postcss.config.js，内容至少为：module.exports = { plugins: [require('autoprefixer')] };
保存时才触发，且文件类型要匹配
这个插件默认不监听输入、不悬浮补全、不实时预览——它只在你保存文件时运行，而且只对识别为 PostCSS 的文件生效。
- 默认支持
.css、.scss、.pcss，但 VSCode 有时把.css当作纯 CSS 处理，导致不触发：可在设置里搜files.associations，加一行"*.css": "postcss" -
.vue文件中的块默认不支持，需额外装vue相关插件或改用构建时处理（如postcss-loader） - 手动触发命令（
Ctrl+Shift+P→ 输入Autoprefixer）时，光标必须落在某条 CSS 声明内部（比如display: flex的任意位置），不能在空行或注释里
browserslist 配置决定加不加、加哪些前缀
你写了 gap: 1rem 却没生成 -webkit-gap，不是插件坏了，而是你的 browserslist 没覆盖 Safari 14.1 以下版本——Autoprefixer 完全按这个配置查 Can I Use 数据库。
- 推荐在
package.json里加："browserslist": ["> 1%", "last 2 versions", "not dead"]
- 验证是否生效：终端执行
npx browserslist，看输出里有没有你需要的老浏览器（比如safari 13） - 别盲目抄“IE 10 兼容”配置：
autoprefixer会加-ms-，但不会修正 IE10 flex 的语法差异（比如flex-direction不支持），反而容易出错
和 Prettier / Stylelint 冲突会导致前缀被删
这是真实高频问题：Autoprefixer 加完 -webkit-box-orient，Prettier 紧跟着按字母序重排属性，把带前缀的行挤到中间，破坏浏览器识别顺序（-webkit- 必须在标准属性之前）。
- 临时解法：VSCode 设置中关闭
editor.formatOnSave对 CSS/SCSS 文件的启用 - 长期解法：用
prettier-plugin-css-order或把格式化交给构建流程，在保存时只跑 Autoprefixer，格式化留到 commit hook 阶段 - 注意顺序：如果用了
run-on-save插件自定义命令，确保npx autoprefixer在npx prettier之前执行
最易被忽略的一点：你改了 browserslist 或 postcss.config.js，VSCode 插件不会自动 reload，必须重启窗口或重新打开文件才能生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
