Stylelint集成：在VS Code中规范你的CSS/SCSS

配置Stylelint可统一团队CSS/SCSS代码风格，提升质量。先安装VS Code的官方Stylelint扩展，再在项目中安装stylelint及规则集如stylelint-config-standard和stylelint-config-recommended-scss，接着创建.stylelintrc.json配置文件并设定规则，然后在VS Code中启用保存时自动修复，设置Stylelint为默认格式化工具，最后检查依赖安装、配置文件命名和文件语言模式以解决常见问题，实现编辑提示与自动修复。

想让团队的CSS或SCSS代码风格统一，避免低级错误？Stylelint 是目前最强大的样式代码检查工具之一。配合 VS Code 使用，可以实现实时校验、自动修复和编辑时提示，极大提升开发效率与代码质量。

安装 Stylelint 扩展

打开 VS Code 的扩展市场，搜索 Stylelint，选择由 stylelint 官方维护的插件（ID: stylelint.vscode-stylelint）。点击安装即可。

该扩展依赖项目中本地安装的 stylelint 包，因此还需在项目中配置相关依赖。

初始化项目依赖

进入项目根目录，通过 npm 或 yarn 安装必要包：

立即学习“前端免费学习笔记（深入）”；

• npm install --save-dev stylelint
• 根据需要安装规则集，例如：
  • stylelint-config-standard：标准规则集合
  • stylelint-config-recommended-scss：适用于 SCSS 的推荐规则

然后在项目根目录创建配置文件，如 .stylelintrc.json，内容示例：

九歌

九歌--人工智能诗歌写作系统

322

查看详情

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recommended-scss"
  ],
  "rules": {
    "indentation": 2,
    "string-quotes": "double",
    "no-empty-first-line": true
  }
}

启用保存时自动修复

为了让格式问题在保存时自动修正，修改 VS Code 的用户或工作区设置：

• 打开设置（Ctrl + ,），搜索 format on save，勾选 Editor: Format On Save
• 确保 Stylelint 被设为默认格式化工具：
  • 右键编辑器中的 CSS/SCSS 文件，选择“设置为默认格式化程序” → “Stylelint”

也可在 .vscode/settings.json 中明确配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "stylelint.vscode-stylelint"
}

处理常见问题

如果发现没有提示或无法修复，注意以下几点：

• 确认项目中已正确安装 stylelint 及其配置依赖
• 检查配置文件名称是否正确（支持 .stylelintrc、.stylelintrc.json、stylelint.config.js 等）
• 确保文件类型被识别，比如 SCSS 文件应标记为 scss 语言模式
• 某些规则不可修复，仅用于警告，需手动调整

基本上就这些。配置完成后，你在写 CSS 或 SCSS 时就能实时看到错误提示，并在保存时自动美化代码，团队协作更顺畅。不复杂但容易忽略细节，建议每个前端项目都加上。

以上就是Stylelint集成：在VS Code中规范你的CSS/SCSS的详细内容，更多请关注php中文网其它相关文章！