@54sher/eslint-config

升华工作室 ESLint 规则配置集合

📦 包列表

该仓库包含以下 ESLint 配置包：

• @54sher/eslint-config-base - 基础配置，适用于所有 JavaScript/TypeScript 项目
• @54sher/eslint-config-react - React 项目配置
• @54sher/eslint-config-vue - Vue 项目配置
• @54sher/eslint-config-node - Node.js 后端项目配置
• @54sher/eslint-config-typescript - TypeScript 专用配置
• @54sher/eslint-config-nextjs - Next.js 项目配置
• @54sher/prettier-config - Prettier 代码格式化配置

🚀 快速开始

基础配置

适用于所有 JavaScript/TypeScript 项目的基础规则。

安装：

pnpm add -D eslint @54sher/eslint-config-base

配置 eslint.config.js：

import base from '@54sher/eslint-config-base';

export default [...base];

包含规则：

• 现代 ES2025+ 语法支持
• 禁止使用 var，优先使用 const
• 强制使用严格相等（===）
• 禁止使用 eval、with 等危险特性
• 异步最佳实践
• 数组和对象操作最佳实践
• 驼峰命名规范

React 配置

适用于 React 项目的完整配置，包含可访问性和性能优化规则。

安装：

pnpm add -D eslint @54sher/eslint-config-react typescript

配置 eslint.config.js：

import reactConfig from '@54sher/eslint-config-react';

export default [...reactConfig];

包含规则：

• React 17+ 特性支持（无需手动导入 React）
• React Hooks 规则检查
• JSX 可访问性（a11y）规则
• 性能优化规则（避免不必要的重渲染）
• 事件处理函数命名规范
• 组件方法排序规范
• TypeScript 支持

主要规则：

• 强制事件处理函数命名：handle* / on*
• 禁止使用数组索引作为 key
• 禁止在 JSX 中使用 bind
• 要求所有图片有 alt 属性
• 要求表单元素有标签

Vue 配置

适用于 Vue 3 项目，支持 Composition API 和 <script setup>。

安装：

pnpm add -D eslint @54sher/eslint-config-vue

配置 eslint.config.js：

import vueConfig from '@54sher/eslint-config-vue';

export default [...vueConfig];

包含规则：

• Vue 3 官方推荐规则
• Composition API 最佳实践
• <script setup> 语法支持
• 模板语法规范
• 组件命名规范（PascalCase）
• 属性和组件选项排序
• TypeScript 支持

主要规则：

• 组件名使用 PascalCase
• 禁止 v-if 和 v-for 同时使用
• 要求 props 有类型定义
• 要求 v-for 有 key
• 优先使用 Composition API
• 块级标签顺序：script → template → style

Node.js 后端配置

适用于 Node.js 后端项目，包含安全性和异步处理规则。

安装：

pnpm add -D eslint @54sher/eslint-config-node

配置 eslint.config.js：

import nodeConfig from '@54sher/eslint-config-node';

export default [...nodeConfig];

包含规则：

• Node.js 环境支持
• 后端安全性规则
• 异步处理和 Promise 规则
• 错误处理最佳实践
• Express/Koa 框架支持
• TypeScript 后端特定规则

主要规则：

• 允许使用 console
• 禁止使用 process.exit()
• 要求处理回调错误
• 禁止在循环中使用 await
• 要求正确处理 Promise
• Express/Koa 参数命名豁免（req, res, ctx 等）

TypeScript 配置

TypeScript 专用的严格类型检查配置。

安装：

pnpm add -D eslint @54sher/eslint-config-typescript typescript

配置 eslint.config.js：

import tsConfig from '@54sher/eslint-config-typescript';

export default [...tsConfig];

包含规则：

• 严格的 TypeScript 类型检查
• 禁止使用 any（警告级别）
• 命名规范（类型用 PascalCase）
• 一致的类型导入/导出
• Promise 和异步处理规则
• 优先使用现代 TypeScript 特性

主要规则：

• 要求明确的函数返回类型
• 要求使用 interface 而非 type
• 要求一致的类型导入（import type）
• 禁止不必要的类型断言
• 要求使用可选链和空值合并
• 禁止浮动的 Promise

Next.js 配置

适用于 Next.js 项目，支持 App Router 和 Pages Router。

安装：

pnpm add -D eslint @54sher/eslint-config-nextjs next typescript

配置 eslint.config.js：

import nextjsConfig from '@54sher/eslint-config-nextjs';

export default [...nextjsConfig];

包含规则：

• Next.js 官方规则
• App Router 特定规则
• Pages Router 特定规则
• 图片优化规则
• 性能优化规则
• SEO 最佳实践

主要规则：

• 要求使用 next/link 而非 <a>
• 要求使用 next/image 而非 <img>
• 要求使用 next/script 加载脚本
• API 路由特殊处理
• 服务端组件和客户端组件区分
• 禁止在客户端组件使用异步组件

Prettier 配置

代码格式化配置。

安装：

pnpm add -D prettier @54sher/prettier-config

配置 package.json：

{
  "prettier": "@54sher/prettier-config"
}

或创建 .prettierrc.js：

import config from '@54sher/prettier-config';

export default config;

🔧 高级用法

组合多个配置

你可以根据项目需求组合多个配置：

React + TypeScript：

import reactConfig from '@54sher/eslint-config-react';
import tsConfig from '@54sher/eslint-config-typescript';

export default [
  ...reactConfig,
  ...tsConfig,
  {
    // 你的自定义规则
    rules: {
      // ...
    },
  },
];

Vue + TypeScript：

import vueConfig from '@54sher/eslint-config-vue';
import tsConfig from '@54sher/eslint-config-typescript';

export default [...vueConfig, ...tsConfig];

覆盖规则

如果需要覆盖某些规则：

import reactConfig from '@54sher/eslint-config-react';

export default [
  ...reactConfig,
  {
    rules: {
      // 关闭某个规则
      'react/no-array-index-key': 'off',

      // 修改规则严重程度
      'no-console': 'warn',

      // 修改规则配置
      '@typescript-eslint/no-explicit-any': ['error', {
        fixToUnknown: false,
      }],
    },
  },
];

针对特定文件应用规则

import baseConfig from '@54sher/eslint-config-base';

export default [
  ...baseConfig,
  {
    files: ['**/*.test.ts', '**/*.spec.ts'],
    rules: {
      // 测试文件允许 any
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
];

📝 规则详解

代码风格规则

所有配置都遵循以下代码风格：

• 缩进：2 空格
• 引号：统一由 Prettier 处理
• 分号：统一由 Prettier 处理
• 命名：驼峰命名（camelCase），组件和类型用 PascalCase
• 文件名：遵循各框架约定

安全性规则

• 禁止使用 eval()、new Function()
• 禁止使用 with
• 禁止使用不安全的正则表达式
• 禁止使用 Buffer() 构造函数（Node.js）
• 要求 target="_blank" 同时使用 rel="noopener noreferrer"

最佳实践

• 优先使用 const，其次是 let，禁止使用 var
• 使用 === 和 !==，避免 == 和 !=
• 优先使用模板字符串
• 优先使用箭头函数
• 优先使用解构赋值
• 优先使用展开运算符

🛠️ 开发

本地开发

# 安装依赖
pnpm install

# 构建所有包
pnpm build

# 运行 lint
pnpm lint

发布新版本

# 创建 changeset
pnpm changeset

# 更新版本号
pnpm version

# 发布到 npm
pnpm release

📄 许可证

ISC

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📚 相关资源

• ESLint 官方文档
• TypeScript ESLint
• eslint-plugin-react
• eslint-plugin-vue
• Next.js ESLint
• Prettier