Stylelint与Prettier怎么配合使用

在前端开发中，Stylelint与Prettier是提升代码质量与统一风格的利器。Stylelint专注于CSS、SCSS等样式代码的规范检查，确保语法正确、符合团队编码规范；Prettier则专注于代码格式化，自动调整缩进、换行等，减少风格争论。为了避免两者在格式化上的冲突，本文详细介绍了如何通过`stylelint-prettier`插件，让Stylelint与Prettier协同工作。通过安装配置相关依赖，并在`.stylelintrc.json`和`.prettierrc`文件中定义规则，确保Stylelint专注于Prettier未覆盖的规则，从而实现代码质量与风格的完美统一。同时，本文还介绍了如何将两者集成到开发流程中，例如通过npm脚本或编辑器插件，实现代码保存时自动格式化和实时错误提示，提升开发效率。

Stylelint负责代码规范检查，Prettier专注格式化，通过stylelint-prettier插件协同工作，避免冲突，实现样式代码的质量与风格统一。

Stylelint 和 Prettier 都是前端开发中常用的代码质量工具，但职责不同。Stylelint 主要用于检查 CSS、SCSS 等样式语言的语法和规范问题，类似 ESLint；Prettier 则专注于代码格式化，统一风格。两者联合使用可以兼顾代码质量和格式一致性，但需要合理配置避免冲突。

理解两者的角色分工

Stylelint 负责：

• 检测无效或不推荐的 CSS 写法
• 强制执行团队的编码规范（如命名、嵌套深度）
• 支持 CSS、Less、SCSS、Vue 单文件组件等

Prettier 负责：

• 自动格式化代码（缩进、换行、引号等）
• 减少团队在代码风格上的争论
• 支持多种语言，包括 CSS 类型

如果同时启用默认配置，两者可能对空格、分号等产生冲突。因此关键在于让 Prettier 处理格式，而 Stylelint 只关注 Prettier 不覆盖的规则。

安装与基础配置

先安装所需依赖：

创建 .stylelintrc.json 配置文件：

其中 stylelint-prettier/recommended 会自动启用 Prettier 插件，并确保 Stylelint 不报错 Prettier 负责的格式问题。

配置 Prettier 规则

创建 .prettierrc 文件定义格式偏好：

这些设置会与 Stylelint-prettier 同步，避免风格冲突。注意：不要在 Stylelint 中重复定义 Prettier 已处理的格式规则（如分号、引号），否则会警告。

集成到开发流程

在 package.json 添加脚本：

也可以结合编辑器（如 VS Code）使用：

• 安装 Stylelint 和 Prettier 插件
• 设置默认格式化工具为 Prettier
• 开启保存时自动格式化，Stylelint 实时提示错误

这样在保存时 Prettier 自动格式化，Stylelint 检查潜在问题，两者协同工作。

基本上就这些。关键是通过 stylelint-prettier 插件桥接两者，让 Stylelint 尊重 Prettier 的格式决定，只专注语义层面的检查。配置一次后，团队能获得一致且高质量的样式代码。不复杂但容易忽略细节。

文中关于Prettier,CSS工具的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Stylelint与Prettier怎么配合使用》文章吧，也可关注golang学习网公众号了解相关技术文章。