19:I[15621,["/_next/static/immutable/chunks/3gm-8e62xn1qd.js","/_next/static/immutable/chunks/0n2yq6f-f75k2.js"],"ArticleReader"] 1a:Tc4e,

// eslint.config.js
import js from "@eslint/js";
import imports from "eslint-plugin-import";
import perfectionist from "eslint-plugin-perfectionist";
import promise from "eslint-plugin-promise";
import unicorn from "eslint-plugin-unicorn";
import unusedImports from "eslint-plugin-unused-imports";

export default [
  // 1. 官方推荐的核心规则（必须最先）
  js.configs.recommended,

  // 2. unicorn（包含大量 recommended 规则，建议第二位）
  unicorn.configs["recommended"],

  // 3. import 插件（路径检查、重复导入等，要在 perfectionist 之前）
  {
    plugins: {
      import: imports,
    },
    rules: {
      ...imports.configs.recommended.rules,
      // 关闭与 perfectionist 冲突的排序规则（perfectionist 更强）
      "import/order": "off",
    },
    settings: {
      "import/resolver": {
        node: { extensions: [".js", ".mjs", ".cjs"] },
      },
    },
  },

  // 4. promise 插件（规则很少，放中间就行）
  promise.configs["flat/recommended"],

  // 5. perfectionist（排序神器，必须在 import 之后！）
  {
    plugins: {
      perfectionist,
    },
    rules: {
      "perfectionist/sort-imports": [
        "warn",
        {
          type: "natural", // 排序算法
          order: "asc", // 排序方向
          // 分组顺序: Node内置➡ 第三方依赖➡ 项目内部别名➡ 父级目录➡ 同级目录➡ 当前目录index➡ 对象导入➡ 类型导入➡ 无法识别导入
          groups: [
            "builtin",
            "external",
            "internal",
            "parent",
            "sibling",
            "index",
            "object",
            "type",
            "unknown",
          ],
        },
      ],

      "perfectionist/sort-exports": "warn", // 导出排序 export { apple, banana, zebra }
      "perfectionist/sort-named-exports": "warn", // 导出排序 export { a, m, z } from './module'
    },
  },

  // 6. unused-imports（必须放最后！因为它依赖前面的解析结果来判断“是否真的没用”）
  {
    plugins: {
      "unused-imports": unusedImports,
    },
    rules: {
      "unused-imports/no-unused-imports": "error",
      // 可选：连未使用的变量也一起管（比内置 no-unused-vars 更快更准）
      "unused-imports/no-unused-vars": "error",
      "no-unused-vars": "off", // 关闭内置的，防止重复报错
    },
  },

  // 7. 可选:一些个人常用微调(可以全部复制)
  {
    languageOptions: {
      globals: {
        // Node.js 全局变量
        console: "readonly",
        process: "readonly",
        Buffer: "readonly",
        __dirname: "readonly",
        __filename: "readonly",
        global: "readonly",
        module: "readonly",
        require: "readonly",
        exports: "readonly",
      },
    },
    rules: {
      // unicorn 里个别对纯后端太严格的规则可以关掉
      "unicorn/filename-case": "off",

      // 后端常见放宽
      "no-console": "off", // 方便调试
      "no-underscore-dangle": "off", // 允许下划线命名 如 __dirname
    },
  },
];

1b:Ta29,// eslint.config.js import js from "@eslint/js"; import imports from "eslint-plugin-import"; import perfectionist from "eslint-plugin-perfectionist"; import promise from "eslint-plugin-promise"; import unicorn from "eslint-plugin-unicorn"; import unusedImports from "eslint-plugin-unused-imports"; export default [ // 1. 官方推荐的核心规则（必须最先） js.configs.recommended, // 2. unicorn（包含大量 recommended 规则，建议第二位） unicorn.configs["recommended"], // 3. import 插件（路径检查、重复导入等，要在 perfectionist 之前） { plugins: { import: imports, }, rules: { ...imports.configs.recommended.rules, // 关闭与 perfectionist 冲突的排序规则（perfectionist 更强） "import/order": "off", }, settings: { "import/resolver": { node: { extensions: [".js", ".mjs", ".cjs"] }, }, }, }, // 4. promise 插件（规则很少，放中间就行） promise.configs["flat/recommended"], // 5. perfectionist（排序神器，必须在 import 之后！） { plugins: { perfectionist, }, rules: { "perfectionist/sort-imports": [ "warn", { type: "natural", // 排序算法 order: "asc", // 排序方向 // 分组顺序: Node内置➡ 第三方依赖➡ 项目内部别名➡ 父级目录➡ 同级目录➡ 当前目录index➡ 对象导入➡ 类型导入➡ 无法识别导入 groups: [ "builtin", "external", "internal", "parent", "sibling", "index", "object", "type", "unknown", ], }, ], "perfectionist/sort-exports": "warn", // 导出排序 export { apple, banana, zebra } "perfectionist/sort-named-exports": "warn", // 导出排序 export { a, m, z } from './module' }, }, // 6. unused-imports（必须放最后！因为它依赖前面的解析结果来判断“是否真的没用”） { plugins: { "unused-imports": unusedImports, }, rules: { "unused-imports/no-unused-imports": "error", // 可选：连未使用的变量也一起管（比内置 no-unused-vars 更快更准） "unused-imports/no-unused-vars": "error", "no-unused-vars": "off", // 关闭内置的，防止重复报错 }, }, // 7. 可选:一些个人常用微调(可以全部复制) { languageOptions: { globals: { // Node.js 全局变量 console: "readonly", process: "readonly", Buffer: "readonly", __dirname: "readonly", __filename: "readonly", global: "readonly", module: "readonly", require: "readonly", exports: "readonly", }, }, rules: { // unicorn 里个别对纯后端太严格的规则可以关掉 "unicorn/filename-case": "off", // 后端常见放宽 "no-console": "off", // 方便调试 "no-underscore-dangle": "off", // 允许下划线命名如 __dirname }, }, ];11:["$","main",null,{"className":"reader-page","children":[["$","div",null,{"className":"reader-kicker","children":[["$","$L10",null,{"href":"/sources/76354eeeea30da83","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-left","children":[["$","path","1l729n",{"d":"m12 19-7-7 7-7"}],["$","path","x3x0zl",{"d":"M19 12H5"}],"$undefined"]}]," 返回 ","冰冻大西瓜"]}],["$","span",null,{"children":"工程"}]]}],["$","header",null,{"className":"article-meta","children":[["$","span",null,{"children":["FROM · ","冰冻大西瓜"]}],["$","div",null,{"children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":15,"height":15,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar-days","children":[["$","path","1cmpym",{"d":"M8 2v4"}],["$","path","4m81vk",{"d":"M16 2v4"}],["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}],["$","path","8toen8",{"d":"M3 10h18"}],["$","path","6423bh",{"d":"M8 14h.01"}],["$","path","1etili",{"d":"M12 14h.01"}],["$","path","1gbofw",{"d":"M16 14h.01"}],["$","path","lrp35t",{"d":"M8 18h.01"}],["$","path","mhygvu",{"d":"M12 18h.01"}],["$","path","kzsmim",{"d":"M16 18h.01"}],"$undefined"]}]," ","2026年7月31日",null]}]]}],["$","$L19",null,{"article":{"title":"JS ESLint 配置指南","byline":null,"publishedAt":"2026-07-31T13:10:51.000Z","language":"en","blocks":[{"id":"b0","type":"paragraph","html":"

建立本文档的目的,在于 eslint 规则在v9后启用了扁平化配置规则,

","text":"建立本文档的目的,在于 eslint 规则在v9后启用了扁平化配置规则,"},{"id":"b1","type":"paragraph","html":"

以及越来越多的规则插件,让各位前端工程师愈发分不清该用什么,不该用什么,

","text":"以及越来越多的规则插件,让各位前端工程师愈发分不清该用什么,不该用什么,"},{"id":"b2","type":"paragraph","html":"

更重要的是现在的规则有了排序,如果导入插件的顺序不对,则白费一番功夫

","text":"更重要的是现在的规则有了排序,如果导入插件的顺序不对,则白费一番功夫"},{"id":"b3","type":"paragraph","html":"

基于此, 我打算创建一系列 eslint 相关的文档,

","text":"基于此, 我打算创建一系列 eslint 相关的文档,"},{"id":"b4","type":"paragraph","html":"

适配 typescript、vue、react(可能需要L友共建,我不会react),

","text":"适配 typescript、vue、react(可能需要L友共建,我不会react),"},{"id":"b5","type":"paragraph","html":"

为保证文档不致于过长,增加阅读负担, 每一项都分开建立,

","text":"为保证文档不致于过长,增加阅读负担, 每一项都分开建立,"},{"id":"b6","type":"paragraph","html":"

本篇为原生JS规则篇,方便在原生项目或者NodeJS项目中使用

","text":"本篇为原生JS规则篇,方便在原生项目或者NodeJS项目中使用"},{"id":"b7","type":"heading","html":"

现代插件介绍

","text":"现代插件介绍 "},{"id":"b8","type":"paragraph","html":"

TIP

","text":"TIP"},{"id":"b9","type":"paragraph","html":"

本人承诺介绍的插件都是现代流行插件,全部支持扁平化配置

","text":"本人承诺介绍的插件都是现代流行插件,全部支持扁平化配置"},{"id":"b10","type":"heading","html":"

安装

","text":"安装 "},{"id":"b11","type":"paragraph","html":"

shell

","text":"shell"},{"id":"b12","type":"paragraph","html":"

pnpm add -D eslint eslint-plugin-unused-imports \\\neslint-plugin-import eslint-plugin-unicorn \\\neslint-plugin-promise eslint-plugin-perfectionist \\\n@eslint/js

","text":"pnpm add -D eslint eslint-plugin-unused-imports \\ eslint-plugin-import eslint-plugin-unicorn \\ eslint-plugin-promise eslint-plugin-perfectionist \\ @eslint/js"},{"id":"b13","type":"paragraph","html":"

WARNING

","text":"WARNING"},{"id":"b14","type":"paragraph","html":"

如果你的项目是 monorepo 项目, 安装库不要忘记 -w 也就是 pnpm add -Dw

","text":"如果你的项目是 monorepo 项目, 安装库不要忘记 -w 也就是 pnpm add -Dw"},{"id":"b15","type":"paragraph","html":"

同时需要安装插件 Eslint 点我安装

","text":"同时需要安装插件 Eslint 点我安装"},{"id":"b17","type":"heading","html":"

配置

","text":"配置 "},{"id":"b18","type":"paragraph","html":"

在项目根目录中,创建文件 eslint.config.js,配置如下:

","text":"在项目根目录中,创建文件 eslint.config.js,配置如下:"},{"id":"b19","type":"paragraph","html":"

","text":"js"},{"id":"b20","type":"paragraph","html":"$1a","text":"$1b"},{"id":"b21","type":"paragraph","html":"

同时需要在编辑器(这里以vscode为例)的设置中添加以下配置,以达到自动修复的目的

","text":"同时需要在编辑器(这里以vscode为例)的设置中添加以下配置,以达到自动修复的目的"},{"id":"b22","type":"paragraph","html":"

json

","text":"json"},{"id":"b23","type":"paragraph","html":"

  \"eslint.enable\": true,\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\"\n  },\n  \"eslint.codeActionsOnSave.mode\": \"problems\",

","text":"\"eslint.enable\": true, \"editor.codeActionsOnSave\": { \"source.fixAll.eslint\": \"explicit\" }, \"eslint.codeActionsOnSave.mode\": \"problems\","},{"id":"b24","type":"heading","html":"

插件周下载量(2025年11月18日)

","text":"插件周下载量(2025年11月18日) "},{"id":"b25","type":"list","html":"

","text":"eslint-plugin-unused-imports: 4,967,752eslint-plugin-import: 32,590,009eslint-plugin-unicorn: 4,752,987eslint-plugin-promise: 5,303,551eslint-plugin-perfectionist: 1,169,778@eslint/js: 55,530,414"},{"id":"b26","type":"heading","html":"

更新内容

","text":"更新内容 "},{"id":"b27","type":"list","html":"

2025年11月18日: 新增nodeJS环境中的全局变量声明

","text":"2025年11月18日: 新增nodeJS环境中的全局变量声明"}],"source":"$0:f:0:1:0:props:children:props:children:1:props:children:props:children:props:children:0:props:sources:457","originalUrl":"https://bddxg.top/Tips/EslintJs.html","excerpt":"详解 ESLint v9 扁平化配置，涵盖现代 JS 项目必备插件及最佳实践配置方案"},"shouldTranslate":true}],"$L1c"]}]

现代插件介绍 ​

安装 ​

配置 ​

插件周下载量(2025年11月18日) ​

更新内容 ​

现代插件介绍

安装

配置

插件周下载量(2025年11月18日)

更新内容