@yhzyzj/eslint-config-custom

一套适用于 TypeScript 项目的可共享 ESLint 配置，支持 Node.js、Vue 3 和 React 项目。

特性

• 基于 ESLint Flat Config (ESLint 9+)
• 支持 TypeScript 类型检查
• 集成 Prettier 代码格式化
• 提供 Node.js、Vue 3 和 React 三种预设配置
• 包含现代化的代码规范和最佳实践

安装

根据你的项目类型选择安装相应的依赖：

Node.js 项目

npm install -D @yhzyzj/eslint-config-custom \
  eslint @eslint/js typescript \
  @typescript-eslint/eslint-plugin @typescript-eslint/parser \
  eslint-plugin-node eslint-config-prettier

Vue 3 项目

npm install -D @yhzyzj/eslint-config-custom \
  eslint @eslint/js typescript \
  @typescript-eslint/eslint-plugin @typescript-eslint/parser \
  eslint-plugin-vue vue-eslint-parser eslint-config-prettier

React 项目

npm install -D @yhzyzj/eslint-config-custom \
  eslint @eslint/js typescript \
  @typescript-eslint/eslint-plugin @typescript-eslint/parser \
  eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y \
  eslint-config-prettier

使用

Node.js 项目配置

在项目根目录创建 eslint.config.js 文件：

// eslint.config.js
import customConfig from '@yhzyzj/eslint-config-custom';

export default [
  ...customConfig,
  // 你可以在这里添加自定义规则或覆盖默认配置
  {
    ignores: [
      // 添加你需要忽略的文件或目录
      'dist/**',
      'build/**'
    ]
  }
];

Vue 3 项目配置

在项目根目录创建 eslint.config.js 文件：

// eslint.config.js
import vueConfig from '@yhzyzj/eslint-config-custom/vue';

export default [
  ...vueConfig,
  // 你可以在这里添加自定义规则或覆盖默认配置
  {
    ignores: [
      // 添加你需要忽略的文件或目录
      'dist/**',
      'build/**'
    ]
  }
];

React 项目配置

在项目根目录创建 eslint.config.js 文件：

// eslint.config.js
import reactConfig from '@yhzyzj/eslint-config-custom/react';

export default [
  ...reactConfig,
  // 你可以在这里添加自定义规则或覆盖默认配置
  {
    ignores: [
      // 添加你需要忽略的文件或目录
      'dist/**',
      'build/**'
    ]
  }
];

配置说明

基础配置

所有配置都包含以下基础规则：

• 忽略常见的不需要检查的目录和文件
• 设置最新的 ECMAScript 版本和支持模块化
• 配置常用的全局变量
• 包含一组合理的代码风格规则

Node.js 配置

专门针对 Node.js 项目的配置，包含：

• Node.js 全局变量支持
• Node.js 特定规则
• TypeScript 支持和类型检查
• Prettier 集成

Vue 3 配置

专门为 Vue 3 项目设计的配置，包含：

• Vue 3 全局变量支持
• Vue ESLint 插件规则
• TypeScript 和 JSX 支持
• Prettier 集成
• Vue 组件特定规则

React 配置

专门为 React 项目设计的配置，包含：

• React 全局变量支持
• React、React Hooks 和 JSX a11y 插件规则
• TypeScript 和 TSX 支持
• Prettier 集成
• React 特定规则

规则概览

代码风格规则

• 使用 2 个空格缩进
• 单引号优先
• 语句末尾需要分号
• 对象和数组末尾需要逗号
• 最大行长度为 120 字符

TypeScript 规则

• 要求显式的函数返回类型
• 禁止未使用的变量
• 要求一致的类型导入
• 推荐使用可选链

框架特定规则

Node.js

• 推荐的 Node.js 插件规则
• 禁止使用未发布的 require

Vue

• 关闭多词组件名称限制
• 支持 script setup 语法糖
• HTML 缩进规则

React

• 不再需要显式导入 React
• 关闭 PropTypes 检查（使用 TypeScript 替代）
• React Hooks 规则检查

自定义配置

你可以在导入的配置基础上添加自己的规则：

// eslint.config.js
import customConfig from '@yhzyzj/eslint-config-custom';

export default [
  ...customConfig,
  {
    rules: {
      // 覆盖或添加自定义规则
      'no-console': 'off'
    }
  }
];

VS Code 配置

为了在 VS Code 中获得最佳体验，建议安装以下扩展：

• ESLint
• Prettier

并在 .vscode/settings.json 中添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

License

ISC