Postar Scene-Lint

基于 ESLint（支持 JavaScript/TypeScript）和 StyleLint（支持 CSS/SCSS/Less）的联合检查工具，提供 Monorepo 支持、Git 钩子集成和自动化修复能力。

✨ 特性

• 🚀 开箱即用 - 预配置的 ESLint 和 StyleLint 规则，无需复杂配置
• 📦 多框架支持 - 支持 Vue3、React、TypeScript、Uni-App 等
• 🎯 样式检查 - 支持 CSS、SCSS、Less 样式文件检查
• 🔒 团队规范 - 统一的代码风格，提升团队协作效率
• 🔄 自动修复 - 支持自动修复大部分代码风格问题
• 🎨 Monorepo 友好 - 完美支持 monorepo 项目结构

🎯 功能

• ESLint 代码检查（JavaScript/TypeScript）
• StyleLint 样式检查（CSS/SCSS/Less）
• Vue3 组件检查
• Uni-App 项目支持
• 自动代码格式化
• Git 钩子集成

🎯 设计理念

采用 ESLint 和 StyleLint 进行代码检查，禁用 Prettier 格式化

我们选择 ESLint + StyleLint 的组合方案，而不是 Prettier，原因如下：

• 🎯 统一工具链 - 一套工具解决代码质量和格式化问题
• 🔧 更精细的控制 - 可以针对具体规则进行定制
• 🚀 更好的性能 - 避免多工具冲突和重复处理
• 📝 团队一致性 - 统一的配置标准，减少工具链复杂度

🚀 快速开始

1. VSCode 配置（推荐）

在项目根目录创建 .vscode/settings.json：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "editor.formatOnSave": false,
  "prettier.enable": false,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"]
}

📦 安装

npm install @postar/scene-lint --save-dev
# 或者
pnpm install @postar/scene-lint --save-dev
# 或者
yarn add @postar/scene-lint -D

🚀 快速开始

1. ESLint 配置

在项目根目录创建 .eslintrc.js：

const { eslintConfig } = require('@postar/scene-lint');

module.exports = {
  ...eslintConfig,
  // 可以在这里覆盖或扩展规则
  rules: {
    ...eslintConfig.rules,
    // 自定义规则
  }
};

2. StyleLint 配置

在项目根目录创建 .stylelintrc.js：

const { stylelintConfig } = require('@postar/scene-lint');

module.exports = {
  ...stylelintConfig,
  // 可以在这里覆盖或扩展规则
  rules: {
    ...stylelintConfig.rules,
    // 自定义规则
  }
};

4. package.json 脚本配置

{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.vue --fix && stylelint **/*.{css,scss,less,vue} --fix",
    "lint:js": "eslint . --ext .js,.ts,.vue --fix",
    "lint:style": "stylelint **/*.{css,scss,less,vue} --fix",
    "lint:check": "eslint . --ext .js,.ts,.vue && stylelint **/*.{css,scss,less,vue}"
  }
}

📚 配置说明

可用配置

| 配置名称 | 说明 | 适用场景 | |---------|------|---------| | eslintConfig | 标准 ESLint 配置 | Vue3、React、TypeScript 项目 | | eslintUniAppConfig | Uni-App 专用 ESLint 配置 | Uni-App 项目 | | stylelintConfig | 标准 StyleLint 配置 | 通用样式检查 | | stylelintUniAppConfig | Uni-App 专用 StyleLint 配置 | Uni-App 项目 |

ESLint 规则特点

• 支持 Vue3 Composition API
• TypeScript 类型检查
• 强制使用驼峰命名
• 箭头函数间距规范
• 逗号和分号使用规范

StyleLint 规则特点

• 支持 SCSS、Less 语法
• CSS 属性排序规范
• 颜色函数传统风格
• 兼容 Vue 单文件组件
• 供应商前缀支持

🔧 Git 钩子集成

安装 husky 和 lint-staged：

npm install husky lint-staged --save-dev

在 package.json 中配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "git add"
    ],
    "*.{css,scss,less,vue}": [
      "stylelint --fix",
      "git add"
    ]
  }
}

🎨 自定义配置

扩展 ESLint 规则

const { eslintConfig } = require('@postar/scene-lint');

module.exports = {
  ...eslintConfig,
  rules: {
    ...eslintConfig.rules,
    // 关闭某个规则
    'vue/multi-word-component-names': 'off',
    // 修改规则级别
    'no-console': 'warn',
    // 添加新规则
    'prefer-const': 'error'
  }
};

扩展 StyleLint 规则

const { stylelintConfig } = require('@postar/scene-lint');

module.exports = {
  ...stylelintConfig,
  rules: {
    ...stylelintConfig.rules,
    // 自定义规则
  }
};

📝 支持的文件类型

ESLint

• .js - JavaScript 文件
• .ts - TypeScript 文件
• .vue - Vue 单文件组件
• .jsx - React JSX 文件
• .tsx - TypeScript JSX 文件

StyleLint

• .css - CSS 文件
• .scss - SCSS 文件
• .less - Less 文件
• .vue - Vue 单文件组件中的 <style> 标签

⚠️ 注意事项

• 确保项目中已安装对应的依赖（如 Vue、TypeScript 等）
• Uni-App 项目建议使用专用配置 eslintUniAppConfig 和 stylelintUniAppConfig
• 大型项目建议配置 .eslintignore 和 .stylelintignore 忽略不需要检查的文件
• 建议在 CI/CD 中集成代码检查流程

🔗 相关链接

• ESLint 官方文档
• StyleLint 官方文档
• Vue ESLint 插件