autoprefixer插件未生效需检查三处：一是确认安装正确插件（作者mrmlnc）；二是项目根目录存在postcss.config.js或.postcssrc配置文件；三是vscode中关闭css文件的editor.formatonsave以防与prettier冲突。
Autoprefixer插件为什么没生效？检查这三处
Autoprefixer 不是装上就自动加前缀的，它依赖 PostCSS 配置和文件保存触发机制。常见现象是：写完 display: flex，保存后毫无反应，连 -webkit- 都没加。
- 确认已安装
Autoprefixer插件（作者：mrmlnc），不是 “Auto Prefixer” 或其他拼写变体 - 项目根目录必须存在
postcss.config.js或.postcssrc，哪怕内容只是module.exports = { plugins: [require('autoprefixer')] }; - VSCode 设置里关闭
editor.formatOnSave对 CSS 文件的干扰——Autoprefixer 是通过“保存时运行 PostCSS”工作的，和 Prettier 格式化冲突会导致静默失败
如何让 Autoprefixer 在纯 CSS 文件中工作？
默认情况下，Autoprefixer 插件只对 .scss、.less、.vue 等预处理器文件生效，对 .css 文件不处理——这不是 bug，是设计选择，因为原生 CSS 通常走构建流程（如 Webpack + postcss-loader）。
- 临时方案：在 VSCode 设置中搜索
files.associations，添加"*.css": "postcss"，强制把 .css 当作 PostCSS 文件解析 - 更稳妥的做法：用
npm init -y && npm install -D postcss autoprefixer初始化项目，再配好postcss.config.js，然后配合npx postcss input.css -o output.css手动验证是否能加前缀 - 注意：VSCode 插件只在保存时触发，不支持实时预览或光标悬停补全；想“快捷生成”，本质是“保存即补全”，不是代码片段式插入
浏览器目标配置决定哪些前缀会被加
Autoprefixer 加什么前缀，完全取决于你配置的 browserslist（可写在 package.json 或单独的 .browserslistrc 中）。写 last 2 versions 和写 > 1%, not dead 产出差异极大。
- 例如：配置
Chrome >= 87，display: flex就不会加-webkit-前缀（Chrome 87 已原生支持） - 调试技巧：在终端运行
npx browserslist，看当前配置实际匹配哪些版本；加--json可查详细数据 - 别盲目抄网上“兼容 IE10”的配置——IE10 的
flex实现和现代标准不一致，Autoprefixer 会加-ms-前缀但不修正语法差异，容易出视觉错乱
为什么保存后前缀加了，但又被格式化工具删掉？
这是真实高频问题：Autoprefixer 加完 -webkit-box-orient，Prettier 或 Stylelint 紧跟着按“属性字母序”重排，把带前缀的属性挤到中间，破坏了浏览器识别顺序（比如 -webkit- 必须在标准属性之前）。
- 解决方法：在
.prettierrc中加"cssDeclarationSortOrder": "none"（如果用 Prettier v3+） - 或者更直接：禁用 CSS/PostCSS 文件的 Prettier 格式化，在 VSCode 设置中加
"[postcss]": { "editor.formatOnSave": false } - 关键点：Autoprefixer 的输出是“功能正确优先”，不是“美观优先”；顺序错误的前缀等于没加
真正卡住人的往往不是插件装不装得上，而是浏览器目标配置和编辑器格式化链路之间的隐性冲突。先跑通 npx postcss 命令行，再回来看 VSCode 行为，能省掉一半排查时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
