prettier保存时自动格式化css/scss需确保editor.defaultformatter设为esbenp.prettier-vscode且editor.formatonsave为true，语言模式识别正确（如.scss文件设为sass），否则可能回退至vs code内置格式器而忽略.prettierrc规则。
VS Code 保存时自动格式化 CSS/SCSS 文件
只要 Prettier 插件已安装且配置正确，editor.formatOnSave 开启后，所有被它支持的文件（包括 .css、.scss、.sass）都会在保存时自动格式化——不需要额外设置语言专属开关。
关键前提是：editor.defaultFormatter 必须设为 esbenp.prettier-vscode，否则 VS Code 可能 fallback 到内置 CSS 格式化器（比如 vscode.css-language-features），而它不读 .prettierrc 规则。
- 检查右键菜单“格式化文档时使用…”是否显示 Prettier；若没出现，说明默认格式化器未生效
-
.scss文件需确保 VS Code 当前语言模式识别为Sass（不是CSS），可通过右下角语言栏点击切换 - 如果保存后没反应，先运行
prettier --check src/**/*.scss确认 CLI 能识别这些文件——CLI 不识别，插件也不会处理
为什么 import 语句里的 CSS 路径没被重排？
Prettier 不修改字符串内容，所以 import './styles.scss'; 这类语句中的路径不会被调整缩进或换行。它只处理语法结构层面的格式，比如：
- 把
import { a, b, c } from 'mod';拆成多行（受printWidth和arrowParens影响） - 对
@import 'reset';后面的分号、空格做标准化 - 但
'./styles.scss'整个字符串被视为原子值，内部空格、换行、引号类型由外部规则（如singleQuote）决定，不会被“解析路径”再重写
如果你发现 import 行被意外折行，大概率是 printWidth 设得太小，或者该行本身紧挨着长注释/装饰器，触发了 Prettier 的换行逻辑。
prettier --write 批量格式化 CSS/SCSS 的实际命令
终端里执行批量格式化最稳妥的方式是显式指定扩展名，避免遗漏或误触不支持的文件：
npx prettier --write "src/**/*.css" "src/**/*.scss" "src/**/*.sass"
注意点：
- 路径用双引号包裹，防止 shell 展开失败（尤其 Windows 或含空格路径）
- 不要只写
.——虽然 Prettier 默认支持 CSS/SCSS，但若项目里有大量.d.ts或.lock文件，可能触发解析失败报错，中断整个流程 - 首次运行前建议先试
npx prettier --check "src/**/*.css"，确认无语法错误再--write -
.prettierignore中若写了node_modules，无需重复添加dist或build，但 CSS 预编译产物（如bundle.css）建议显式忽略，避免污染构建输出
SCSS 特有语法的兼容性陷阱
Prettier 对 SCSS 的支持依赖于其内部 parser（目前是 @prettier/plugin-scss 内置），但并非所有语法都 100% 安全：
-
@each、@for、@function块内嵌套过深时，可能因 AST 解析边界问题导致换行错乱（例如把@return挤到上一行末尾） -
//单行注释在 SCSS 中合法，但 Prettier 会统一转为/* */（除非配置proseWrap: "always"，但该选项对注释无效） - 带插值的字符串如
#{map-get($colors, primary)}是安全的；但自定义函数调用若含非法字符（如未转义的$在字符串外），会导致解析失败并跳过该文件
真正容易被忽略的是：Prettier 不校验 SCSS 语法正确性，只负责格式化。哪怕 @mixin foo() { 缺少闭合 }，它也会照常输出（然后编译时报错）。所以格式化 ≠ 编译通过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
