Stylelint 配置包

一个可定制的 Stylelint 配置包，支持 SCSS、Vue 和 React 项目，提供现代化的代码规范和样式检查。

特性

• 🎯 预设配置：提供基础、SCSS、Vue 和 React 预设配置
• ⚙️ 高度可定制：支持按需启用或禁用功能
• 🛠 TypeScript 支持：完整的类型定义和智能提示
• 📦 多格式输出：同时支持 ES Module 和 CommonJS
• 🔧 现代化工具链：使用 Vite 构建，提供优化的打包输出

安装

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

# 使用 yarn
yarn add --dev @yubei826/stylelint-config

# 使用 pnpm
pnpm add --dev @yubei826/stylelint-config

快速开始

基本用法

创建 stylelint.config.js 文件：

// stylelint.config.js
import { defineStylelintConfig } from '@yubei826/stylelint-config'

export default defineStylelintConfig({
  // 启用 SCSS 支持
  scss: true,
  // 启用 Vue 支持
  vue: true,
  // 自定义规则
  rules: {
    'color-hex-length': 'long'
  }
})

使用CommonJS

// stylelint.config.js
const { defineStylelintConfig } = require('@yubei826/stylelint-config')

module.exports = defineStylelintConfig({
  // 启用 SCSS 支持
  scss: true,
  // 启用 Vue 支持
  vue: true,
  // 自定义规则
  rules: {
    'color-hex-length': 'long'
  }
})

配置选项

预设选项

| 选项 | 类型 | 默认值 | 描述 | |--------|-----------|---------|------------------| | scss | boolean | false | 是否启用 SCSS 支持 | | vue | boolean | false | 是否启用 Vue 支持 | | react | boolean | false | 是否启用 React 支持 |

标准配置选项

| 选项 | 类型 | 描述 | |-----------------|-----------|--------------------| | extends | string[] | 额外的扩展配置 | | plugins | string[] | 额外的插件 | | rules | object | 自定义规则 | | ignoreFiles | string[] | 额外的忽略文件 | | allowEmptyInput | boolean | 是否允许空输入 |

添加额外插件

// 添加额外插件
export default defineStylelintConfig({
  plugins: [
    'stylelint-some-plugin'
  ],
  extends: [
    'some-other-config'
  ]
})

预设说明

基础预设

包含通用的 Stylelint 配置，提供代码风格和属性排序功能。

SCSS 预设

基于 stylelint-config-standard-scss，提供 SCSS 语法支持和相关规则。

Vue 预设

基于 stylelint-config-standard-vue，提供 Vue 单文件组件支持。

React 预设

基于 stylelint-config-standard-react，提供 React 相关样式支持。

与现有项目集成

在 package.json 中添加脚本

{
  "scripts": {
    "lint:css": "stylelint \"**/*.{vue,scss,css}\"",
    "lint:css:fix": "stylelint \"**/*.{vue,scss,css}\" --fix",
    "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"
  }
}

使用命令行

# 检查样式
npx stylelint "**/*.{vue,scss,css}"

# 检查并自动修复
npx stylelint "**/*.{vue,scss,css}" --fix

常见问题

如何处理特定文件的忽略？

export default defineStylelintConfig({
  ignoreFiles: [
    'src/legacy/**/*.scss', // 忽略特定目录
    '**/*.min.css' // 忽略压缩文件
  ]
})

如何禁用特定规则？

export default defineStylelintConfig({
  rules: {
    'no-descending-specificity': null // 禁用特定规则
  }
})

如何处理第三方库的样式？

export default defineStylelintConfig({
  ignoreFiles: [
    'node_modules/**/*', // 忽略 node_modules
    'dist/**/*' // 忽略构建输出
  ]
})

贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目。

• Fork 这个仓库

• 创建特性分支 (git checkout -b feature/amazing-feature)

• 提交更改 (git commit -m 'Add some amazing feature')

• 推送到分支 (git push origin feature/amazing-feature)

• 打开一个 Pull Request

许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

感谢使用这个 Stylelint 配置包！希望它能帮助您提高代码质量和开发效率。