# zhiyi-eslint-config

**Repository Path**: sanzhishuke/zhiyi-eslint-config

## Basic Information

- **Project Name**: zhiyi-eslint-config
- **Description**: 智衣eslint校验库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-28
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智衣前端规范配置包

![npm](https://img.shields.io/npm/v/zhiyi-eslint-config)
![license](https://img.shields.io/npm/l/zhiyi-eslint-config)

这是一个专为智衣项目设计的 ESLint 和 Prettier 配置包，用于统一前端代码风格和质量检查。

## 目录

- [功能特性](#功能特性)
- [安装](#安装)
- [使用方法](#使用方法)
  - [1. 在你的项目中安装依赖](#1-在你的项目中安装依赖)
  - [2. 配置 ESLint](#2-配置-eslint)
  - [3. 配置 Git Hooks](#3-配置-git-hooks)
  - [4. 配置 lint-staged](#4-配置-lint-staged)
  - [5. 配置 Prettier (可选)](#5-配置-prettier-可选)
  - [6. 验证是否生效](#6-验证是否生效)
- [包含的规则](#包含的规则)
  - [JavaScript/TypeScript 规则](#javascripttypescript-规则)
  - [Vue 规则](#vue-规则)
  - [格式化](#格式化)
- [支持的文件类型](#支持的文件类型)
- [Git Hooks 工作原理](#git-hooks-工作原理)
  - [配置说明](#配置说明)
  - [工作原理](#工作原理)
- [维护](#维护)

## 功能特性

- 集成了 ESLint 和 Prettier 的最佳实践配置
- 包含对 JavaScript、TypeScript 和 Vue.js 的支持
- 在代码提交时自动进行增量格式化和检查
- 使用 husky 和 lint-staged 实现 Git hooks 自动化

## 安装

```bash
pnpm install zhiyi-eslint-config -D
```

## 使用方法

### 1. 在你的项目中安装依赖

```bash
pnpm install eslint prettier eslint-plugin-vue eslint-import-resolver-alias @eslint/js  @typescript-eslint/parser typescript-eslint @typescript-eslint/eslint-plugin eslint-plugin-import eslint-config-prettier eslint-plugin-prettier lint-staged@15.2.10 husky -D
```

### 2. 配置 ESLint

在你的项目根目录下创建 `eslint.config.js` 文件：

```javascript
module.exports = require('zhiyi-eslint-config');
```

或者在 `eslint.config.mjs` 中使用 ES 模块语法：

```javascript
import zhiyiConfig from 'zhiyi-eslint-config';

export default [
  ...zhiyiConfig,
  // 你可以在这里添加自己的配置或覆盖默认配置
];
```

Vue 2 项目校验配置：

```javascript
import { vue2EsLintConfig } from 'zhiyi-eslint-config';

export default [
    ...vue2EsLintConfig,
    // 你可以在这里添加自己的配置或覆盖默认配置
];
```

### 3. 配置 Git Hooks

在项目根目录下执行以下命令来设置 Git hooks：

```bash
npx husky init
```

然后手动创建 pre-commit 钩子文件：

```bash
echo "npx lint-staged" > .husky/pre-commit
# linux或macos下需执行
chmod +x .husky/pre-commit
```

### 4. 配置 lint-staged

[.lintstagedrc.json](file:///D:/workspace/zhiyi/zhiyi-eslint-config/.lintstagedrc.json) 是 lint-staged 工具的配置文件，用于定义在 Git 提交前对暂存区文件执行的操作。配置内容如下：

```json
{
  "*.{js,vue,ts}": ["eslint --fix", "prettier --write"],
  "*.{json,md,css,scss}": ["prettier --write"]
}
```

#### 配置说明

1. **文件匹配规则**：
   - `*.{js,vue,ts}`：匹配所有 [.js](file://D:\workspace\zhiyi\zhiyi-eslint-config\index.js)、`.vue`、[.ts](file://D:\workspace\zhiyi\zhiyi-eslint-config\node_modules\@eslint\core\dist\esm\types.d.ts) 文件
   - `*.{json,md,css,scss}`：匹配所有 [.json](file://D:\workspace\zhiyi\zhiyi-eslint-config\node_modules\@eslint\core\package.json)、[.md](file://D:\workspace\zhiyi\zhiyi-eslint-config\README.md)、`.css`、`.scss` 文件

2. **执行命令**：
   - `eslint --fix`：对 JavaScript/TypeScript/Vue 文件进行 ESLint 检查和自动修复
   - `prettier --write`：对匹配的文件进行 Prettier 格式化

3. **执行顺序**：
   - 命令按数组顺序执行
   - 前一个命令失败会阻止后续命令执行

### 5. 配置 Prettier (可选)

如果需要自定义 Prettier 配置，可以在项目根目录下创建 `.prettierrc` 文件。

### 6. 验证是否生效

```bash
# 指定文件检查 e.g npx eslint --fix pages/employee/wage/wage.vue
npx eslint --fix [指定文件] 
# 验证提交前检查是否生效, 注意：运行前如果eslint.config.mjs未提交时，需要将其使用git add加入暂存区才会生效
npx lint-staged
```

## 包含的规则

### JavaScript/TypeScript 规则
- 禁止使用 `console.log`（允许 `console.warn` 和 `console.error`）
- 禁止使用 `debugger`（错误级别）
- 检查未使用的变量（错误级别）
- 文件最大行数限制（1000 行）
- 函数最大行数限制（120 行）
- 命名规范检查

### Vue 规则
- 检查未使用的变量
- 要求 v-for 必须有 key
- HTML 缩进设置（2个空格）
- 属性行数限制
- HTML 自闭合标签规则

### 格式化
使用 Prettier 进行代码格式化，统一团队代码风格。

## 支持的文件类型

配置会检查以下类型的文件：
- `.js`, `.jsx`, `.mjs`, `.cjs` - JavaScript 文件
- `.ts`, `.tsx` - TypeScript 文件  
- `.vue` - Vue 单文件组件
- `.json` - JSON 配置文件
- `.md` - Markdown 文档
- `.css`, `.scss` - 样式文件

## Git Hooks 工作原理

当您执行 `git commit` 时，会自动触发以下流程：

1. husky 捕获 pre-commit 钩子
2. 执行 lint-staged 命令
3. lint-staged 根据 [.lintstagedrc.json](file:///D:/workspace/zhiyi/zhiyi-eslint-config/.lintstagedrc.json) 的配置对暂存区文件进行处理：
   - 对于 JS、TS、Vue 文件：运行 `eslint --fix` 和 `prettier --write`
   - 对于 JSON、MD、CSS、SCSS 文件：运行 `prettier --write`
4. 只有当所有检查通过后，代码才会被提交

### 配置说明

详细说明请参考 [lint-staged 配置说明](#4-配置-lint-staged) 部分。

### 工作原理

- 只对 Git 暂存区的文件进行处理
- 提交前自动格式化和检查代码质量
- 确保提交的代码符合规范

## 维护

如有任何问题或建议，请联系维护人员 [xxl](https://www.feishu.cn/invitation/page/add_contact/?token=aa1hd5fb-3c95-44b6-94e0-0bc2754c679f&unique_id=NGxtg9ItD8Fs2hvo6PZ1-w==)。