@fespec/stylelint-config

前端工程化规范CLI工具 - stylelint配置

简介

本包提供了前端工程化规范中的stylelint配置，用于统一项目中的CSS/SCSS代码风格，确保代码质量和一致性。

安装

# 使用npm
npm install --save-dev @fespec/stylelint-config stylelint stylelint-scss

# 使用yarn
yarn add --dev @fespec/stylelint-config stylelint stylelint-scss

# 使用pnpm
pnpm add --save-dev @fespec/stylelint-config stylelint stylelint-scss

使用方法

在项目根目录下创建.stylelintrc.js文件，添加以下内容：

module.exports = {
  extends: "@fespec/stylelint-config",
};

或者在package.json中添加：

{
  "stylelint": {
    "extends": "@fespec/stylelint-config"
  }
}

规则说明

本配置基于stylelint官方推荐规则，并结合前端工程化最佳实践进行了优化，主要包括以下几类规则：

1. 可能的错误检测

• block-no-empty 允许空的代码块
• color-no-invalid-hex 禁止无效的十六进制颜色
• comment-no-empty 禁止空的注释
• declaration-block-no-duplicate-properties 禁止声明块中的重复属性
• font-family-no-duplicate-names 禁止字体族名称重复
• function-calc-no-unspaced-operator 禁止calc函数中操作符两边没有空格
• media-feature-name-no-unknown 禁止未知的媒体特性名称
• no-empty-source 允许空的源
• no-extra-semicolons 禁止多余的分号
• property-no-unknown 禁止未知的属性
• selector-pseudo-class-no-unknown 禁止未知的伪类选择器
• selector-pseudo-element-no-unknown 禁止未知的伪元素选择器
• string-no-newline 禁止字符串中包含换行符
• unit-no-unknown 禁止未知的单位

2. 风格问题

• indentation 缩进使用2个空格
• block-closing-brace-newline-before 多行块关闭大括号前必须换行
• block-closing-brace-space-before 单行块关闭大括号前必须有空格
• block-opening-brace-newline-after 多行块打开大括号后必须换行
• block-opening-brace-space-before 块打开大括号前必须有空格
• block-opening-brace-space-after 单行块打开大括号后必须有空格
• color-hex-case 颜色十六进制值使用小写
• color-hex-length 颜色十六进制值使用简写形式
• comment-whitespace-inside 注释内必须有空格
• declaration-colon-space-before 声明冒号前不能有空格
• declaration-colon-space-after 声明冒号后必须有空格
• declaration-block-single-line-max-declarations 单行声明块最多只能有一个声明
• declaration-block-trailing-semicolon 声明块必须有尾随分号
• length-zero-no-unit 长度为零时不使用单位
• max-line-length 最大行长度为100
• selector-max-id 选择器中id选择器的最大数量为0
• value-list-comma-space-after 单行值列表中逗号后必须有空格

3. SCSS规则

• scss/at-rule-no-unknown 禁止未知的SCSS at-rule
• scss/double-slash-comment-whitespace-inside SCSS双斜杠注释内必须有空格

在package.json中添加脚本

为了方便使用，可以在项目的package.json中添加以下脚本：

{
  "scripts": {
    "lint:css": "stylelint \"**/*.{css,scss,sass,less}\"",
    "lint:css:fix": "stylelint \"**/*.{css,scss,sass,less}\" --fix"
  }
}

然后可以使用以下命令进行代码检查和自动修复：

# 检查CSS/SCSS文件
npm run lint:css

# 自动修复CSS/SCSS文件中的问题
npm run lint:css:fix

在IDE中集成

VS Code

1. 安装 Stylelint 插件
2. 在VS Code的设置中添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "scss", "sass", "less"]
}

WebStorm

1. 在设置中启用Stylelint：Settings -> Languages & Frameworks -> Style Sheets -> Stylelint
2. 勾选"Enable"选项
3. 选择Stylelint包的路径

测试

本配置包包含了完整的测试用例，可以通过以下命令运行测试：

# 安装依赖
npm install

# 运行所有测试
npm test

# 监视模式运行测试
npm run test:watch

# 生成测试覆盖率报告
npm test -- --coverage

测试文件位于__tests__目录下，包括：

• stylelint-config.test.js: 测试配置对象的完整性和正确性
• index.css: 符合所有规则的有效CSS文件
• essential.css: 包含一些规则违反的无效CSS文件
• sass-test.scss: 用于测试SCSS规则的文件

相关链接

• stylelint官方文档
• stylelint-scss文档
• @fespec/cli