@brickjs-fe/eslint-config
Version:
BrickJs ESLint 配置 - 适用于 Vue3 + TypeScript 项目的 ESLint 配置
279 lines (204 loc) • 7.46 kB
Markdown
# @brickjs-fe/brick-eslint-config
<div align="center">
**适用于 Vue3 + TypeScript 项目的 ESLint 配置**
[](https://www.npmjs.com/package/@brickjs-fe/brick-eslint-config)
[](https://www.npmjs.com/package/@brickjs-fe/brick-eslint-config)
[](https://opensource.org/licenses/MIT)
</div>
## 📖 项目介绍
`@brickjs-fe/brick-eslint-config` 是 BrickJs 项目提供的 ESLint 配置包，专为 Vue3 + TypeScript 项目设计。该配置集成了 ESLint、Prettier、Vue 和 TypeScript 的最佳实践，确保代码质量和一致性。
## ✨ 特性
- 🎯 **Vue3 支持**: 完整的 Vue3 单文件组件支持
- 🔧 **TypeScript 集成**: 全面的 TypeScript 类型检查
- 🎨 **Prettier 兼容**: 与 Prettier 完美集成，避免冲突
- 📝 **详细注释**: 每个规则都有详细的中文注释说明
- 🚫 **禁止末尾逗号**: 内置禁止末尾逗号的规则
- 🔄 **灵活配置**: 支持覆盖和自定义规则
## 🛠️ 技术栈
- **ESLint**: JavaScript/TypeScript 代码检查
- **Vue ESLint Plugin**: Vue 单文件组件支持
- **TypeScript ESLint**: TypeScript 类型检查
- **Prettier**: 代码格式化集成
## 🚀 快速开始
### 安装
```bash
# 使用 pnpm 安装
pnpm add -D @brickjs-fe/brick-eslint-config
# 或使用 npm 安装
npm install -D @brickjs-fe/brick-eslint-config
# 或使用 yarn 安装
yarn add -D @brickjs-fe/brick-eslint-config
# 或使用 bun 安装
bun add -D @brickjs-fe/brick-eslint-config
```
### 基本使用
在项目根目录创建 `.eslintrc.js` 文件：
```javascript
module.exports = {
extends: ["@brickjs-fe/brick-eslint-config"],
// 可以在这里添加项目特定的规则
rules: {
// 自定义规则
},
};
```
### 在 package.json 中使用
```json
{
"eslintConfig": {
"extends": ["@brickjs-fe/brick-eslint-config"]
}
}
```
## 📋 规则说明
### 基础 JavaScript 规则
- **prefer-destructuring**: 优先使用解构赋值（对象必须，数组可选）
### Vue 相关规则
- **vue/no-v-html**: 允许使用 v-html 指令
- **vue/attributes-order**: 关闭属性顺序检查
- **vue/require-v-for-key**: 关闭 v-for 必须使用 key 的检查
- **vue/require-default-prop**: 关闭 props 必须设置默认值的检查
- **vue/no-unused-components**: 关闭未使用组件的检查
- **vue/multi-word-component-names**: 关闭组件名必须多个单词的检查
- **vue/no-setup-props-destructure**: 关闭 setup props 解构的检查
- **vue/return-in-computed-property**: 关闭计算属性必须有返回值的检查
### TypeScript 相关规则
- **@typescript-eslint/camelcase**: 关闭驼峰命名检查
- **@typescript-eslint/ban-ts-comment**: 关闭禁止 @ts-ignore 注释的检查
- **@typescript-eslint/no-unused-vars**: 开启未使用变量的检查
- **@typescript-eslint/no-var-requires**: 关闭禁止使用 require 的检查
- **@typescript-eslint/no-explicit-any**: 关闭禁止使用 any 类型的检查
- **@typescript-eslint/no-empty-function**: 关闭禁止空函数的检查
- **@typescript-eslint/no-non-null-assertion**: 关闭禁止非空断言的检查
- **@typescript-eslint/explicit-function-return-type**: 关闭函数必须显式返回类型的检查
- **@typescript-eslint/explicit-module-boundary-types**: 关闭模块边界必须显式类型的检查
### 代码风格规则
- **comma-dangle**: 禁止末尾逗号
- **trailing-comma**: 关闭尾随逗号规则
## 🔧 配置选项
### 环境配置
```javascript
module.exports = {
extends: ["@brickjs-fe/brick-eslint-config"],
env: {
browser: true, // 浏览器环境
node: true, // Node.js 环境
es6: true, // ES6 语法支持
},
};
```
### 解析器配置
```javascript
module.exports = {
extends: ["@brickjs-fe/brick-eslint-config"],
parserOptions: {
parser: "@typescript-eslint/parser", // TypeScript 解析器
ecmaVersion: "latest", // ECMAScript 版本
sourceType: "module", // 模块类型
},
};
```
### 规则覆盖
```javascript
module.exports = {
extends: ["@brickjs-fe/brick-eslint-config"],
rules: {
// 覆盖特定规则
"vue/no-v-html": "error", // 禁止使用 v-html
"comma-dangle": "off", // 关闭末尾逗号检查
},
};
```
## 📁 文件支持
该配置支持以下文件类型：
- `.js` - JavaScript 文件
- `.jsx` - React JSX 文件
- `.ts` - TypeScript 文件
- `.tsx` - TypeScript JSX 文件
- `.vue` - Vue 单文件组件
## 🎯 最佳实践
### 1. 项目结构
```
project/
├── .eslintrc.js # ESLint 配置
├── .prettierrc # Prettier 配置
├── src/ # 源代码目录
│ ├── components/ # Vue 组件
│ ├── views/ # 页面组件
│ ├── utils/ # 工具函数
│ └── types/ # 类型定义
└── package.json # 项目配置
```
### 2. 代码示例
```vue
<template>
<div class="example">
<h1>{{ title }}</h1>
<button @click="handleClick">点击我</button>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// 响应式数据
const title = ref("Hello World");
// 事件处理函数
const handleClick = () => {
console.log("按钮被点击了");
};
</script>
<style scoped>
.example {
padding: 20px;
}
</style>
```
### 3. TypeScript 类型定义
```typescript
// types/index.ts
export interface User {
id: number;
name: string;
email: string;
}
export interface ApiResponse<T> {
data: T;
message: string;
success: boolean;
}
```
## 🔍 故障排除
### 常见问题
1. **规则冲突**: 确保 Prettier 配置与 ESLint 规则兼容
2. **TypeScript 错误**: 检查 `tsconfig.json` 配置
3. **Vue 文件解析**: 确保安装了 `vue-eslint-parser`
### 调试技巧
```bash
# 检查 ESLint 配置
npx eslint --print-config src/main.ts
# 检查特定文件的规则
npx eslint --print-config src/components/HelloWorld.vue
# 运行 ESLint 检查
npx eslint src --ext .js,.ts,.vue
```
## 🤝 贡献指南
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request
## 📄 许可证
本项目基于 [MIT](https://opensource.org/licenses/MIT) 许可证开源。
## 👥 维护者
- [brickFE](https://github.com/brickFE) - _项目维护者_
## 🙏 致谢
感谢以下开源项目的支持：
- [ESLint](https://eslint.org/) - JavaScript/TypeScript 代码检查
- [Vue ESLint Plugin](https://eslint.vuejs.org/) - Vue 单文件组件支持
- [TypeScript ESLint](https://typescript-eslint.io/) - TypeScript 类型检查
- [Prettier](https://prettier.io/) - 代码格式化工具
---
<div align="center">
**如果这个项目对你有帮助，请给它一个 ⭐️**
[报告问题](https://github.com/brickFE/brickjs/issues) · [提出建议](https://github.com/brickFE/brickjs/discussions) · [贡献代码](https://github.com/brickFE/brickjs/pulls)
</div>