* ESLint-Config

企业级ESLint配置系统,为现代JavaScript/TypeScript项目提供27+插件集成

目录

• 说明
• 特征
• 安装
• 使用量
• 路线图
• 财务问题
• 许可证

说明

ElsiKora的ESLint-Config是一个经过战斗测试的综合的ESLint配置系统,旨在在企业JavaScript和TypeScript应用中强制实施一致的代码质量. 它以模块化为核心,提供与"React","Next.js","Vue.js"和"NestJS"等通俗框架的无缝集成,同时支持地物-被设计"等先进的建筑模式. 配置系统超越了基本内衬,纳入了保密安全扫描、国际化执行、无障碍检查和性能优化。 在支持27+精心编译的插件的情况下,它处理从CSS-in-JS到GraphQL,从"故事"故事故事到TanStack查询模式的一切. 无论是构建起动MVP还是维护大型企业应用程序,这种配置都适应了你的需要,同时保持严格的质量标准,在被害者到达出产前抓住.

* 特性

• ✨ 🔧 模块结构 - 只选择需要的27+可选插件,这些插件可以独立启用/损坏
• ✨ 🏗️ 框架支助 - 对React、Vue.js、Next.js、NestJS的一等支持,更多支持针对具体框架的最佳做法
• ✨ 🔐 警卫第一 - 内设秘密探测,防止意外的证书暴露与定制模式相匹配
• ✨ 🌍 i18n 执行 - 自动检测应国际化的硬码字符串
• ✨ ♿ 访问检查 - JSX无障碍规则,确保人人可以使用你的应用程序
• ✨ 🎨 样式一致性 - 与自动解决格式化规则和定出规则之间的冲突进行更初步的整合
• ✨ 📁 文件组织 - 执行一致的文件/文件夹命名惯例和建筑模式,如地物设计
• ✨ 🚀 业绩规则 - 在React钩子、TanStack Query和其他图书馆中捕捉性能抗标者
• ✨ 📝 文档 Linting - 验证JSDoc的评论、Markdown文件,并确保适当的代码文件
• ✨ 🧪 测试支持 - 故事书、简讯、维特和其他测试框架的特殊配置
• ✨ 🔄 CI/CD 准备 - GitHub Actions, GitLab CI, 以及其他有语义版本支持的 CI 提供者
• ✨ 🛠️ 开发者经验 - 广泛的类型脚本支持,严格类型检查和智能自动固定

* 安装

# Using npm
npm install --save-dev @elsikora/eslint-config eslint

# Using yarn
yarn add --dev @elsikora/eslint-config eslint

# Using pnpm
pnpm add -D @elsikora/eslint-config eslint

# Using bun
bun add -d @elsikora/eslint-config eslint

# Quick setup with all recommended plugins
npx @elsikora/eslint-config init

# Manual setup - create eslint.config.js
echo "import { createConfig } from '@elsikora/eslint-config';

export default await createConfig({
  withJavascript: true,
  withTypescript: true,
  withPrettier: true
});" > eslint.config.js

使用量

基本用途

创建一个 eslint.config.js 在工程根中的文件 :

import { createConfig } from "@elsikora/eslint-config";

export default await createConfig({
    withJavascript: true,
    withTypescript: true,
    withPrettier: true,
});

配置示例

反应 + 类型脚本工程

import { createConfig } from "@elsikora/eslint-config";

const config = {
    ignores: ["dist", "coverage", ".next"],
};

export default [
    config,
    ...(await createConfig({
        withTypescript: true,
        withReact: true,
        withJsx: true,
        withTailwindCss: true,
        withPrettier: true,
        withSonar: true,
        withUnicorn: true,
    })),
];

Next.js Full-Stack 应用程序

import { createConfig } from "@elsikora/eslint-config";

export default await createConfig({
    withTypescript: true,
    withReact: true,
    withNext: true,
    withNode: true,
    withTailwindCss: true,
    withI18next: true,
    withNoSecrets: true,
    withPrettier: true,
});

NestJS 后端 API

import { createConfig } from "@elsikora/eslint-config";

export default await createConfig({
    withTypescript: true,
    withNest: true,
    withNode: true,
    withTypeorm: true,
    withSonar: true,
    withNoSecrets: true,
    withPrettier: true,
});

特色设计架构

import { createConfig } from "@elsikora/eslint-config";

export default await createConfig({
    withTypescript: true,
    withReact: true,
    withFsd: true,
    withPerfectionist: true,
    withCheckFile: true,
    withPrettier: true,
});

高级配置

自定义规则覆盖

import { createConfig } from "@elsikora/eslint-config";

const baseConfig = await createConfig({
    withTypescript: true,
    withReact: true,
});

const customRules = {
    rules: {
        // Override specific rules
        "no-console": "warn",
        "@typescript-eslint/explicit-function-return-type": "off",
        "react/prop-types": "off",
    },
};

export default [...baseConfig, customRules];

环境配置

import { createConfig } from "@elsikora/eslint-config";

const isDevelopment = process.env.NODE_ENV === "development";

export default await createConfig({
    withTypescript: true,
    withReact: true,
    withNoSecrets: !isDevelopment, // Disable in development
    withSonar: !isDevelopment,
    withPrettier: true,
});

QQ 配置选项

interface ConfigOptions {
    // Language Support
    withJavascript?: boolean; // JavaScript ES2022+ rules
    withTypescript?: boolean; // TypeScript with type checking
    withTypescriptStrict?: boolean; // Strict TypeScript rules

    // Framework Support
    withReact?: boolean; // React best practices
    withNext?: boolean; // Next.js specific rules
    withNest?: boolean; // NestJS decorators & patterns

    // Code Quality
    withSonar?: boolean; // SonarJS code quality rules
    withUnicorn?: boolean; // Unicorn best practices
    withPerfectionist?: boolean; // Import/export sorting
    withRegexp?: boolean; // RegExp optimization

    // Security
    withNoSecrets?: boolean; // Detect hardcoded secrets

    // Styling
    withPrettier?: boolean; // Prettier integration
    withStylistic?: boolean; // Code style rules
    withTailwindCss?: boolean; // TailwindCSS class sorting

    // Architecture
    withFsd?: boolean; // Feature-Sliced Design
    withCheckFile?: boolean; // File naming conventions

    // Documentation
    withJsDoc?: boolean; // JSDoc validation
    withMarkdown?: boolean; // Markdown linting

    // Testing
    withStorybook?: boolean; // Storybook best practices

    // Other
    withNode?: boolean; // Node.js environment
    withI18next?: boolean; // i18n enforcement
    withJson?: boolean; // JSON file linting
    withYaml?: boolean; // YAML file linting
    withPackageJson?: boolean; // package.json sorting
    withTanstack?: boolean; // TanStack Query/Router
    withTypeorm?: boolean; // TypeORM entities
    withJsx?: boolean; // JSX accessibility
    withCss?: boolean; // CSS file linting
}

QQ CLI 命令

# Run linting
eslint .

# Auto-fix issues
eslint . --fix

# Lint specific files
eslint "src/**/*.{js,ts,jsx,tsx}"

# Show only errors (no warnings)
eslint . --quiet

# Output results as JSON
eslint . --format json -o eslint-report.json

# Check if files are ignored
eslint . --debug

IDE 整合

VS 代码

添加为 .vscode/settings.json数字 :

{
    "eslint.experimental.useFlatConfig": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "json", "jsonc", "yaml", "markdown"]
}

WebStorm / IntelliJ EIDO 网络搜索器

1. 转到设置 → 语言和框架 → JavaScript → 代码质量工具 → ESLint
2. 选择“ 自动 ESLint 配置 ”
3. 请检查date=中的日期值 (帮助) "Run eslint -- fix on save"

* 路线图

问 题

经常被问到的问题

为什么要使用平面配置来代替.eslintrac??

ESLint平面配置(eslint.config.js)是ESLint配置的未来. 它通过懒惰的加载,改进了TypeScript的全类型检查支持,以及更清晰的更便于调试的配置来提供更好的性能. 所有新的ESLint特性都是专门为平面配置开发的.

我如何从现有的.eslintrc配置中迁移?

首先,安装此软件包并创建新的 eslint.config.js 文档。 以最小配置开始,并逐步启用与您现有的设置相匹配的特性 。 在迁移过程中,您可以通过使用不同的文件模式并肩运行两种配置. 这种组合的模块化性质使得移徙变得直截了当.

为什么这么多的同伴依赖?

这个配置系统支持27+不同的插件,但您只安装您实际使用的内容. 每个插件被标记为可选的对等依赖,因此npm/yarn/pnpm只会促使您安装您在配置中启用的. 这使得您的节点单元保持了倾斜,同时提供了最大的灵活性.

我怎么处理Pretier和ESLint之间的冲突?

简单的启用 withPrettier: true 在您的配置中。 自动包含 eslint-config-prettier 用于禁用所有与 Pretier 格式化相冲突的 ESLint 规则。 您应该先运行 Pretier, 然后运行 ESLint, 通常由您的 IDE 或 git 钩处理 .

我能用这个来创造回放吗?

没错! 用于 Next.js , 使用 withNext: true 包括所有Next.js的具体规则。 对于Create React App,您需要弹出或使用CRACO这样的工具来自定义ESLint配置,因为CRA还没有在本土支持平面配置.

秘密侦测工作如何?

这个 withNoSecrets 选项允许对常见的秘密格式(API密钥、密码、令牌)和高主动性字符串检测进行模式匹配。 它扫描了您的代码 用于图案 apiKey = 'abc123' 和形而上学的线条 可以自定义配置中的规律和敏感性.

什么是地物-切片设计(FSD)?

FSD是用于前端应用的一种建筑图案,它执行特性,共享代码和您应用的不同层之间的严格界限. 当你启用时 withFsd: true,该插件确保进口遵循FSD规则,防止建筑违规.

我怎么调试哪条规则引起问题?

使用 ESLint 运行 --debug 标记以查看正在装入哪些配置文件和规则。 您还可以使用 --print-config path/to/file.js 以查看对特定文件应用的确切配置。 每个规则错误都包括了规则名称,因此容易禁用或修改特定规则.

我可以用这个在单簧管吗?

当然 创建根 eslint.config.js 用于 createConfig() 中,然后在每一个软件包中扩展该软件包,并附加特定软件包的规则。 平面配置系统使得单列布设置比旧级联配置更清洁.

这个配置用于大型密码库吗?

是的, 装入懒惰的平面配置系统意味着在需要时只装入必要的插件 。 该配置还排除了常见目录, 如 node_modules, (中文(简体) ), dist,以及 coverage 默认。 对于非常大的代码库,可以通过限制每个插件进程的文件模式来进一步优化.

许可证

该项目根据**麻省理工学院许可证获得许可

版权(c) 2025 Elsi Kora

特此准许任何人免费获得本软件和相关文件文件("软件")的副本,不受限制地在软件中进行交易,包括不受限制地享有软件的使用、复制、修改、合并、出版、分发、分版和(或)销售的权利,并允许软件获得者这样做,但须符合下列条件: 1

上述版权通知和许可通知应载入软件的所有副本或大部分.

软件是提供的"AS IS", 没有任何种类的恐惧, 释放或被卷入, 包括但不限制在 危机的保障, 证明一个特定的目的和无关。 在任何情况下,对于任何索赔、索赔或其他负债,无论是产生于、产生于、产生于或涉及溶液或使用溶液中的其他交易的契约、契约或其他行为,或与溶液或溶液中的其他交易有关的索赔、赔偿金或其他负债,都不得赔偿.