Stylefmt 是基于 PostCSS 的 CSS 格式化工具，支持 Sass、SCSS、Less 等预处理语言，配合 Stylelint 可在保存或提交代码前自动统一格式，提升团队协作效率；通过 npm 安装 stylefmt、stylelint 和 postcss 后，创建 .stylelintrc.json 配置文件定义规范，如缩进、引号和颜色格式；使用 npx stylefmt 可格式化单个或批量文件，集成到 VS Code 插件可实现保存时自动修复；还可通过 npm 脚本或 husky 与 lint-staged 结合 Git Hooks，在提交前自动执行格式化；其功能涵盖缩进、属性顺序、空格一致性、颜色简写和引号统一等，规则均来自 Stylelint 配置，确保团队标准一致；只需一次配置，即可持续维护代码整洁性，降低人工检查成本，关键在于将其融入日常开发流程。
Stylefmt 是一个基于 PostCSS 的 CSS 格式化工具，能够自动整理样式代码，包括 Sass、SCSS、Less 等预处理语言。它与 Stylelint 配合使用效果更佳，可在保存或提交代码前自动统一格式，提升团队协作效率和代码可读性。
安装与配置 Stylefmt
要使用 Stylefmt 整理 Sass 代码，首先需要在项目中安装相关依赖：
npm install --save-dev stylefmt stylelint postcss安装完成后，在项目根目录创建 .stylelintrc.json 文件定义代码规范：
{ "extends": "stylelint-config-standard", "rules": { "indentation": 2, "string-quotes": "single", "color-hex-case": "lower" } }
Stylefmt 会读取该配置并据此格式化代码。
如何使用 Stylefmt 格式化 Sass 文件
在命令行中运行以下命令即可格式化指定的 Sass 文件：
npx stylefmt src/styles.scss也可以批量处理多个文件：
npx stylefmt src/**/*.scss若想在保存时自动格式化，可将 Stylefmt 集成到编辑器中，如 VS Code 安装 Stylelint 插件，并启用 “Fix on Save” 功能。
与构建流程集成
为了确保每次提交的代码都符合规范，可将 Stylefmt 加入 npm 脚本：
{ "scripts": { "format:css": "stylefmt src/**/*.scss" } }
运行 npm run format:css 即可一键整理所有样式文件。也可结合 Git Hooks 使用 husky 和 lint-staged，在代码提交前自动执行格式化。
支持的格式化功能示例
Stylefmt 可自动处理以下常见格式问题：
- 缩进统一（空格或制表符）
- 属性顺序按规范排列
- 选择器、冒号、分号的空格一致性
- 颜色值小写与简写（如 #ff0000 → #f00）
- 引号统一为单引号或双引号
这些规则均来自 .stylelintrc 配置，确保团队成员遵循相同标准。
基本上就这些。只要配置一次，Stylefmt 就能帮你持续维护 Sass 代码的整洁性，减少人工检查成本，让样式代码更易维护。不复杂但容易忽略的是：记得把它融入日常开发流程里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
