@brickjs-fe/brick-eslint-config

适用于 Vue3 + TypeScript 项目的 ESLint 配置

📖 项目介绍

@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: 代码格式化集成

🚀 快速开始

安装

# 使用 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 文件：

module.exports = {
  extends: ["@brickjs-fe/brick-eslint-config"],
  // 可以在这里添加项目特定的规则
  rules: {
    // 自定义规则
  },
};

在 package.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: 关闭尾随逗号规则

🔧 配置选项

环境配置

module.exports = {
  extends: ["@brickjs-fe/brick-eslint-config"],
  env: {
    browser: true, // 浏览器环境
    node: true, // Node.js 环境
    es6: true, // ES6 语法支持
  },
};

解析器配置

module.exports = {
  extends: ["@brickjs-fe/brick-eslint-config"],
  parserOptions: {
    parser: "@typescript-eslint/parser", // TypeScript 解析器
    ecmaVersion: "latest", // ECMAScript 版本
    sourceType: "module", // 模块类型
  },
};

规则覆盖

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. 代码示例

<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 类型定义

// 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

调试技巧

# 检查 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 许可证开源。

👥 维护者

• brickFE - 项目维护者

🙏 致谢

感谢以下开源项目的支持：

• ESLint - JavaScript/TypeScript 代码检查
• Vue ESLint Plugin - Vue 单文件组件支持
• TypeScript ESLint - TypeScript 类型检查
• Prettier - 代码格式化工具

如果这个项目对你有帮助，请给它一个 ⭐️

报告问题 · 提出建议 · 贡献代码