@be-link/eslint-config

共比邻 ESLint 和 Prettier 共享配置。

📦 安装

npm install --save-dev @be-link/eslint-config prettier typescript
# 或
pnpm add -D @be-link/eslint-config prettier typescript

注意：ESLint 已内置在此包中（版本 ^8），无需单独安装。

🚀 使用

基础配置（推荐用于 Node.js 项目）

// .eslintrc.js
module.exports = {
  extends: ['@be-link/eslint-config'],
};

或者显式使用 base 配置：

// .eslintrc.js
module.exports = {
  extends: ['@be-link/eslint-config/base'],
};

React 项目

// .eslintrc.js
module.exports = {
  extends: ['@be-link/eslint-config/react'],
};

Vue 项目

// .eslintrc.js
module.exports = {
  extends: ['@be-link/eslint-config/vue'],
};

🎨 Prettier 配置

在项目根目录创建 .prettierrc.js：

// .prettierrc.js
module.exports = require('@be-link/eslint-config/.prettierrc');

或者在 package.json 中引用：

{
  "prettier": "@be-link/eslint-config/.prettierrc"
}

📘 TypeScript 配置

基础配置

// tsconfig.json
{
  "extends": "@be-link/eslint-config/tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist"
  },
  "include": ["src"]
}

React 项目

// tsconfig.json
{
  "extends": "@be-link/eslint-config/tsconfig.react.json",
  "compilerOptions": {
    "outDir": "./dist"
  },
  "include": ["src"]
}

Vue 项目

// tsconfig.json
{
  "extends": "@be-link/eslint-config/tsconfig.vue.json",
  "compilerOptions": {
    "outDir": "./dist"
  },
  "include": ["src"]
}

📋 包含的规则

Base 配置

• ✅ ESLint 推荐规则
• ✅ TypeScript 推荐规则
• ✅ Prettier 集成
• ✅ Import 插件
• ✅ 常用代码规范

React 配置

继承 Base 配置，额外包含：

• ✅ React 推荐规则
• ✅ React Hooks 规则
• ✅ JSX 支持

Vue 配置

• ✅ Vue 3 推荐规则
• ✅ TypeScript 支持
• ✅ Vue 特定的格式化规则

🔧 VSCode 集成

安装 VSCode 插件：

• ESLint
• Prettier - Code formatter

在项目的 .vscode/settings.json 中配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

📝 Scripts 配置

在 package.json 中添加脚本：

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue,json,md}\""
  }
}

🛠️ 自定义规则

如果需要覆盖某些规则，可以在项目的 .eslintrc.js 中添加：

// .eslintrc.js
module.exports = {
  extends: ['@be-link/eslint-config/react'],
  rules: {
    // 覆盖或添加你的规则
    'no-console': 'warn',
  },
};

📦 依赖的插件

此配置包已包含以下插件：

• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-config-prettier
• eslint-plugin-import
• eslint-plugin-prettier
• eslint-plugin-promise
• eslint-plugin-unicorn
• eslint-plugin-react (React 配置)
• eslint-plugin-react-hooks (React 配置)
• eslint-plugin-vue (Vue 配置)
• vue-eslint-parser (Vue 配置)

📄 License

MIT

👥 维护者

@be-link Team