@mznjs/eslint-config

基于 @antfu/eslint-config 的 MZN 专用 ESLint 配置，提供现代化的代码规范检查和格式化功能。

📦 安装

作为依赖安装

# 使用 npm
npm install --save-dev @mznjs/eslint-config

# 使用 pnpm
pnpm add -D @mznjs/eslint-config

# 使用 yarn
yarn add --dev @mznjs/eslint-config

确保安装 peerDependencies

# 安装必要的 peerDependencies
npm install --save-dev @antfu/eslint-config eslint

🚀 快速开始

1. 创建 ESLint 配置文件

创建 eslint.config.mjs 文件：

import mznjs from '@mznjs/eslint-config'

export default mznjs({
  // 配置选项
  mznjs: true,
})

2. 基本使用

// eslint.config.mjs
import mznjs from '@mznjs/eslint-config'

export default mznjs()

3. 启用特定功能

// eslint.config.mjs
import mznjs from '@mznjs/eslint-config'

export default mznjs({
  // Vue 支持
  vue: true,

  // TypeScript 支持
  typescript: true,

  // 格式化器
  formatters: true,

  // mznjs 专用配置
  mznjs: true,
})

⚙️ 配置选项

基础配置

import mznjs from '@mznjs/eslint-config'

export default mznjs({
  // Vue.js 支持
  vue: true,

  // TypeScript 支持
  typescript: true,

  // 格式化器
  formatters: true,

  // UnoCSS 支持
  unocss: false,

  // 风格规则配置
  stylistic: {
    indent: 2,           // 缩进空格数
    quotes: 'single',    // 引号风格
    jsx: true,           // 是否启用 JSX 规则
    semi: true,          // 是否强制分号
  },

  // 忽略文件模式
  ignores: [
    '**/dist/**',
    '**/node_modules/**',
    '**/*.json',
    '**/*.md',
  ],

  // mznjs 专用配置
  mznjs: {
    overrides: {
      // 自定义规则覆盖
    }
  },
})

自定义规则覆盖

import mznjs from '@mznjs/eslint-config'

export default mznjs({
  mznjs: {
    overrides: {
      // 关闭特定规则
      'no-console': 'off',
      'no-debugger': 'warn',

      // 自定义 TypeScript 规则
      'ts/no-explicit-any': 'warn',
      'ts/no-unused-vars': 'error',
    }
  }
}, {
  // 额外的自定义配置
  rules: {
    'custom-rule': 'error',
  }
})

⚙️ 配置选项（续）

Stylistic 配置

stylistic 选项用于配置代码风格规则，基于 @antfu/eslint-config 的 StylisticConfig 类型。

配置选项

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | indent | number \| object | 2 | 缩进空格数 | | quotes | 'single' \| 'double' | 'single' | 引号风格 | | jsx | boolean | true | 是否启用 JSX 风格规则 | | semi | boolean | true | 是否强制使用分号 |

示例

import mznjs from '@mznjs/eslint-config'

export default mznjs({
  stylistic: {
    // 使用 4 空格缩进
    indent: 4,

    // 使用双引号
    quotes: 'double',

    // 禁用 JSX 规则（非 React/Vue 项目）
    jsx: false,

    // 不强制分号
    semi: false,
  },
})

启用 stylistic（简化写法）

import mznjs from '@mznjs/eslint-config'

// 使用默认配置启用 stylistic
export default mznjs({
  stylistic: true,
})

🔧 规则特性

默认启用的规则

基础规则

• no-console: off - 允许控制台输出
• no-debugger: warn - 调试器警告
• prefer-const: error - 优先使用 const
• no-var: error - 禁止使用 var
• eqeqeq: off - 关闭全等运算符要求

控制台限制

只允许特定的 console 方法：

• console.log
• console.warn
• console.error
• console.info
• console.trace

TypeScript 规则

• ts/no-unused-vars: error - 未使用变量检查
• ts/no-inferrable-types: off - 允许推断类型
• ts/no-explicit-any: off - 允许使用 any 类型
• ts/ban-ts-ignore: off - 允许 @ts-ignore

忽略的文件模式

默认忽略以下文件和目录：

• **/dist/** - 构建输出目录
• **/node_modules/** - 依赖目录
• **/*.json - JSON 文件
• **/*.md - Markdown 文件
• **/__tests__/** - 测试目录
• **/*.test.js - 测试文件
• **/examples/** - 示例目录

🎯 使用场景

Vue 3 + TypeScript 项目

// eslint.config.mjs
import mznjs from '@mznjs/eslint-config'

export default mznjs({
  vue: true,
  typescript: true,
  formatters: true,
  mznjs: true,
})

React + TypeScript 项目

// eslint.config.mjs
import mznjs from '@mznjs/eslint-config'

export default mznjs({
  typescript: true,
  react: true,
  formatters: true,
  mznjs: true,
})

纯 JavaScript 项目

// eslint.config.mjs
import mznjs from '@mznjs/eslint-config'

export default mznjs({
  javascript: true,
  formatters: true,
  mznjs: true,
})

📝 脚本命令

package.json 脚本示例

{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.vue",
    "lint:fix": "eslint . --ext .js,.ts,.vue --fix",
    "lint:report": "eslint . --ext .js,.ts,.vue --format json --output-file eslint-report.json"
  }
}

常用命令

# 检查代码规范
pnpm lint

# 自动修复可修复的问题
pnpm lint:fix

# 检查特定文件
eslint src/main.ts

# 检查特定目录
eslint src/

# 生成报告
eslint . --format json --output-file report.json

🔍 集成开发环境

VS Code 配置

在 .vscode/settings.json 中添加：

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

WebStorm 配置

1. 启用 ESLint
2. 设置自动修复
3. 配置文件监视器

🚨 故障排除

常见问题

1. 配置不生效

确保使用正确的文件扩展名：

• .mjs 用于 ES 模块
• .cjs 用于 CommonJS

2. 规则冲突

检查是否有多个 ESLint 配置冲突：

• 删除旧的 .eslintrc 文件
• 检查 package.json 中的 ESLint 配置

3. TypeScript 类型错误

确保 TypeScript 配置正确：

# 检查 TypeScript 配置
npx tsc --noEmit

调试模式

启用详细输出以调试配置：

# 启用调试模式
DEBUG=eslint:config* eslint .

📚 API 参考

mznjs(options, ...userConfigs)

参数

• options: 配置选项对象
• userConfigs: 额外的用户配置

返回值

• ESLint 扁平配置数组

OptionsConfig

继承自 @antfu/eslint-config 的所有选项，并添加：

interface OptionsConfig {
  mznjs?: boolean | {
    overrides?: OptionsOverrides
  }

  /**
   * 代码风格配置
   * 基于 @antfu/eslint-config 的 StylisticConfig 类型
   */
  stylistic?: boolean | StylisticConfig
}

StylisticConfig

interface StylisticConfig {
  /** 缩进空格数，默认 2 */
  indent?: number | object

  /** 引号风格，默认 'single' */
  quotes?: 'single' | 'double'

  /** 是否启用 JSX 规则，默认 true */
  jsx?: boolean

  /** 是否强制分号，默认 true */
  semi?: boolean
}

🔄 更新日志

v0.0.2

• 添加 stylistic 配置选项
• 支持代码风格规则配置：indent、quotes、jsx、semi
• 基于 @antfu/eslint-config 的 StylisticConfig 类型

v0.0.1

• 初始版本发布
• 基于 @antfu/eslint-config v5.2.1
• 添加 mznjs 专用规则配置

🤝 贡献

欢迎提交 Issue 和 Pull Request！

开发设置

# 克隆项目
git clone <repository>

# 安装依赖
pnpm install

# 构建项目
pnpm build

# 运行测试
pnpm test

📄 许可证

MIT License

相关链接:

• @antfu/eslint-config
• ESLint 官方文档
• TypeScript ESLint