Stylelint 是一个 CSS 代码检查工具，通过安装 stylelint 及对应语法包、创建配置文件 .stylelintrc.json、设置检查范围脚本、集成编辑器与 Git Hooks 实现自动化校验，帮助团队统一编码规范。
Stylelint 是一个强大的 CSS 代码检查工具，可以帮助你在项目中统一 CSS 编码规范，避免错误和不一致的写法。配置 Stylelint 并不复杂，关键在于根据项目需求选择合适的规则并正确集成到开发流程中。
在项目根目录下通过 npm 或 yarn 安装 Stylelint：
npm install stylelint --save-dev如果你使用的是 SCSS、Less 或 CSS-in-JS，还需要安装对应的语法支持包，例如 SCSS：
npm install stylelint-scss --save-dev在项目根目录创建 .stylelintrc.json 文件（也支持 .yaml 或 .js 格式），这是 Stylelint 的核心配置文件。
立即学习“前端免费学习笔记（深入）”；
一个基础配置示例：
{ "extends": "stylelint-config-standard", "rules": { "indentation": 2, "string-quotes": "single", "color-hex-case": "lower", "block-closing-brace-newline-after": "always", "declaration-colon-space-after": "always" } }说明：
如果你使用 SCSS，可以这样扩展：
{ "extends": [ "stylelint-config-standard", "stylelint-config-standard-scss" ], "plugins": ["stylelint-scss"], "rules": { "scss/percent-placeholder-pattern": "^[_][a-z]", "scss/at-import-no-partial-leading-underscore": true } }在 package.json 中添加脚本命令，指定要检查的文件：
"scripts": { "lint:css": "stylelint \"**/*.css\" \"**/*.scss\"" }你也可以创建 .stylelintignore 文件，忽略某些目录：
node_modules/ dist/ public/ *.min.css为了让检查更高效，建议集成到开发环境中。
在 package.json 中添加：
"lint-staged": { "*.{css,scss}": "stylelint" }然后设置 husky 在 pre-commit 阶段运行 lint-staged。
基本上就这些。配置完成后，运行 npm run lint:css 就能看到检查结果。根据团队规范调整 rules，逐步完善即可。不复杂但容易忽略细节，关键是坚持使用。
以上就是css工具Stylelint在项目中如何配置的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
323
收藏
