eslint-config-na

适用于 JavaScript、TypeScript、Vue 2/3、Vue + TypeScript 项目的 ESLint 配置包。

特点

🚀 现代化配置

• 基于 ESLint 9.x 的 Flat Config 格式
• 支持最新的 ECMAScript 特性
• 使用 TypeScript ESLint 8.x 最新版本

📦 多场景支持

• 基础 JavaScript 项目：提供完整的 JS 代码规范
• TypeScript 项目：包含严格的 TS 类型检查规则
• Vue 2 项目：支持 Vue 2 的组件开发规范
• Vue 3 项目：支持 Vue 3 的 Composition API 规范
• Vue + TypeScript：Vue 3 + TypeScript 的最佳实践配置

🎯 智能规则配置

• 代码风格统一：使用 @stylistic/eslint-plugin 提供一致的代码格式
• 导入排序：自动排序和分组 import 语句
• TypeScript 严格模式：启用严格的类型检查规则
• Vue 最佳实践：遵循 Vue 官方推荐的代码规范

🔧 开箱即用

• 零配置即可使用
• 内置常用插件和规则
• 支持自定义扩展和覆盖

安装

npm install --save-dev eslint-config-na

使用方法

1. 使用主入口函数（推荐）

// eslint.config.js
import na from 'eslint-config-na'

export default na({
  ts: true,   // TypeScript
  vue3: true, // Vue 3
  // vue: true, // 如果是 Vue 2
  rules: {
    // 全局覆盖 / 追加规则
    'no-console': 'off',
  },
  overrides: [
    {
      files: ['**/*.test.ts', '**/*.spec.ts'],
      rules: {
        'no-unused-expressions': 'off',
      },
    },
  ],
})

适用场景：现代项目统一用一套入口，根据需要按开关组合 JS / TS / Vue 2 / Vue 3。

2. 基础 JavaScript 项目

// eslint.config.js
import na from 'eslint-config-na'

export default na()

适用场景：纯 JavaScript 项目，包含基础的代码规范和风格检查。

3. TypeScript / Vue / 小程序 场景示例（使用主入口）

下面是一些常见场景下，基于 na() 的推荐写法：

TypeScript 项目

// eslint.config.js
import na from 'eslint-config-na'

export default na({
  ts: true,
})

Vue 2 项目

// eslint.config.js
import na from 'eslint-config-na'

export default na({
  vue: true,
})

Vue 3 项目

// eslint.config.js
import na from 'eslint-config-na'

export default na({
  vue3: true,
})

Vue 2 + TypeScript 项目

// eslint.config.js
import na from 'eslint-config-na'

export default na({
  ts: true,
  vue: true,
})

Vue 3 + TypeScript 项目

// eslint.config.js
import na from 'eslint-config-na'

export default na({
  ts: true,
  vue3: true,
})

微信小程序项目（miniprogram 目录）

// eslint.config.js
import na from 'eslint-config-na'

export default na({
  mp: true,
})

适用场景：所有 JS / TS / Vue 2 / Vue 3 / Vue + TS / 微信小程序 项目统一走一个入口，通过布尔开关组合需要的配置。

配置特性

代码风格规则

• 统一的缩进（2 空格）
• 单引号字符串
• 分号结尾
• 对象大括号内空格
• 函数参数括号前空格
• 最大行长度 120 字符

TypeScript 规则

• 严格的类型检查
• 禁止 any 类型
• 强制接口和类型定义
• 类成员排序
• 禁止未使用的变量

Vue 规则

• 组件命名规范
• 模板语法检查
• 生命周期钩子顺序
• 组件属性验证

导入排序

自动按以下顺序排序 import 语句：

1. 第三方库（如 react、vue）
2. @ 开头的别名导入
3. 相对路径导入（../、./）

自定义配置

如果需要自定义规则，可以扩展配置：

// eslint.config.js
import baseConfig from 'eslint-config-na'

export default [
  ...baseConfig,
  {
    rules: {
      // 自定义规则
      'no-console': 'warn',
      'prefer-const': 'error'
    }
  }
]

支持的插件

• @eslint/js - ESLint 官方 JavaScript 规则
• @stylistic/eslint-plugin - 代码风格规则
• @typescript-eslint/eslint-plugin - TypeScript 规则
• eslint-plugin-vue - Vue 规则
• eslint-plugin-import - 导入/导出规则
• eslint-plugin-simple-import-sort - 导入排序

版本要求

• Node.js >= 16.0.0
• ESLint >= 9.0.0
• TypeScript >= 4.0.0（如果使用 TS 配置）

测试

单元测试

克隆仓库后安装依赖并运行：

npm install
npm run test

用例覆盖 na() 的选项组合（ts / vue / vue3）、rules 与 overrides 是否正确拼进配置。

本地验证配置是否生效

用 ESLint 打印合并后的配置，确认规则符合预期：

# 根目录下用本包作为 config
npx eslint --print-config index.js

或在业务项目里临时把 eslint.config.js 指到本地包路径，跑一次 eslint . 看是否有报错、规则是否生效。

许可证

MIT License