Stylelint 快速入门指南：从零开始配置CSS代码检查

Stylelint 快速入门指南：从零开始配置CSS代码检查

stylelint A mighty CSS linter that helps you avoid errors and enforce conventions. 项目地址: https://gitcode.com/gh_mirrors/st/stylelint

什么是Stylelint

Stylelint 是一个强大的现代化CSS代码检查工具，它可以帮助开发者保持CSS代码风格的一致性，避免错误，并强制执行团队约定的编码规范。作为前端开发中不可或缺的代码质量保障工具，Stylelint支持原生CSS以及各种CSS预处理器如SCSS、Less等。

基础安装与配置

1. 初始化项目

对于大多数CSS项目，推荐使用标准配置作为起点。这个配置包含了Stylelint团队推荐的CSS最佳实践规则。

执行以下命令快速初始化：

npm init stylelint

这个命令会自动完成以下工作：

• 安装Stylelint核心包
• 安装标准配置包
• 创建基础配置文件

2. 运行代码检查

初始化完成后，可以检查项目中的所有CSS文件：

npx stylelint "**/*.css"

这里使用了npx命令来运行本地安装的Stylelint。如果想全局使用，可以先全局安装Stylelint，然后直接使用stylelint命令。

进阶配置：支持CSS预处理器

1. 安装SCSS支持

如果需要检查SCSS文件，需要额外安装对应的配置包：

npm install --save-dev stylelint stylelint-config-standard-scss

2. 创建配置文件

在项目根目录创建stylelint.config.js文件：

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard-scss"]
};

这个配置不仅继承了标准CSS规则，还包含了针对SCSS语法的特殊规则。

3. 运行SCSS检查

stylelint "**/*.scss"

特殊场景处理

1. 检查嵌入式CSS

对于HTML文件中的内联CSS或CSS-in-JS等场景，需要特殊处理。以Lit元素为例：

npm install --save-dev stylelint stylelint-config-standard postcss-lit

配置文件中需要指定自定义语法解析器：

/** @type {import('stylelint').Config} */
export default {
  extends: "stylelint-config-standard",
  customSyntax: "postcss-lit"
};

2. 混合检查多种文件类型

项目中如果同时存在多种需要检查的文件类型，可以使用overrides配置：

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"],
  overrides: [
    {
      files: ["*.js"],
      customSyntax: "postcss-lit"
    }
  ]
};

然后运行检查：

stylelint "**/*.{css,js}"

最佳实践建议

1. 渐进式采用：对于已有项目，建议先采用宽松配置，再逐步增加规则严格度
2. 团队统一：团队应该共同制定并遵守同一套Stylelint配置
3. 持续集成：将Stylelint检查集成到CI/CD流程中，确保代码质量
4. 编辑器集成：配置编辑器在保存时自动修复可修复的问题

通过以上步骤，你可以快速为项目配置好Stylelint，无论是简单的CSS项目还是复杂的多语言前端项目，都能获得一致的代码风格和质量保障。

stylelint A mighty CSS linter that helps you avoid errors and enforce conventions. 项目地址: https://gitcode.com/gh_mirrors/st/stylelint