30 seconds of code 的 ESLint 9 与 Prettier 3 配置实战:一份可直接复用的前端代码规范方案

发布时间:2026/10/3 8:15:16

30 seconds of code 的 ESLint 9 与 Prettier 3 配置实战:一份可直接复用的前端代码规范方案 教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载本文围绕 30 seconds of code 仓库中实际使用的 ESLint 与 Prettier 配置展开完整呈现作者的个性化代码规范方案包括基于 flat config 的eslint.config.js、精简的.prettierrc、全局变量文件globals.js以及配套依赖版本。读完本文你将理解每一处规则的意图与取值依据并能将这套配置迁移到自己的 JavaScript / TypeScript 项目中快速启动。[!WARNING]这是作者非常个人化的配置带有强烈的主观倾向你可能需要根据团队风格或个人习惯进行调整。配置总览两份文件完成规范闭环整套方案的核心是两份配置文件分工明确ESLint 负责查代码质量与潜在错误Prettier 负责改统一格式化风格再由eslint-config-prettier关闭两者之间冲突的规则实现零摩擦协作。import js from eslint/js; import eslintConfigPrettier from eslint-config-prettier/flat; import globals from ./globals.js; export default [ js.configs.recommended, eslintConfigPrettier, { languageOptions: { ecmaVersion: 2025, sourceType: module, globals: { ...globals }, }, rules: { no-duplicate-imports: error, no-useless-computed-key: error, no-console: off, eqeqeq: [error, smart], curly: off, object-shorthand: [warn, always], camelcase: [warn, { properties: always }], no-extend-native: error, no-loop-func: error, no-implied-eval: error, no-iterator: error, no-label-var: error, no-multi-str: error, no-script-url: error, no-shadow-restricted-names: error, no-spaced-func: error, no-sparse-arrays: warn, no-fallthrough: warn, no-caller: error, no-eval: error, no-negated-in-lhs: error, no-new: error, no-new-require: error, block-scoped-var: error, no-use-before-define: warn, no-proto: error, complexity: [warn, 50], new-parens: error, yoda: [error, never], no-useless-assignment: error, }, }, ];{ printWidth: 80, arrowParens: avoid, singleQuote: true, tabWidth: 2, useTabs: false, semi: true, trailingComma: es5, bracketSpacing: true, objectWrap: collapse }可以看到这套方案只依赖三个基础包——eslint/js提供推荐规则集、eslint-config-prettier处理与 Prettier 的兼容、本地globals.js声明全局变量。没有引入任何风格化插件规则全部手写保持了配置的最小化与可读性。依赖与版本基线该配置针对ESLint 9 与 Prettier 3设计并优化配套使用了eslint-config-prettier来协调两者。原文档编写时基于eslint9.24.0与prettier3.5.3而在当前仓库的 package.json 中实际的开发依赖为依赖当前仓库版本作用eslint^9.28.0代码检查器采用 v9 的 flat config 体系prettier^3.5.3代码格式化器eslint-config-prettier^10.1.2关闭 ESLint 中与 Prettier 冲突的格式类规则prettier-plugin-astro^0.14.1让 Prettier 支持.astro文件的格式化globals.js全局变量的来源与作用配置中导入的globals.js是一个记录了各运行环境下全局变量的清单文件。它让 ESLint 能正确识别哪些标识符是环境提供的如浏览器中的window、documentNode.js 中的Buffer、process从而避免把全局变量误报为未定义。原文档作者并未百分百确认该文件的出处但指出可以从globals这个 npm 包获取同类清单。在当前仓库中globals.js 就位于仓库根目录共约 800 行采用如下结构export default { // Node.js / 通用运行时全局变量 __dirname: false, __filename: false, process: false, Buffer: false, console: false, // 浏览器全局变量 window: false, document: false, navigator: false, localStorage: false, fetch: false, // 事件处理属性可赋值故为 true onload: true, onclick: true, // ... };其中每个键名都是全局变量的名称值false表示该变量只读不可赋值true表示可写例如exports、location、OffscreenCanvas及各类on*事件属性。这份清单同时覆盖 Node.js 与浏览器环境还包含 Web API如ReadableStream、RTCPeerConnection、SVG DOM 以及 JavaScript 内置对象如Array、Map、Promise等。在languageOptions.globals中通过{ ...globals }展开后ESLint 便会以这些条目作为全局变量的定义来源与ecmaVersion: 2025、sourceType: module一起构成完整的语言环境描述。ESLint从推荐规则到个性化调整ESLint 的规则多如牛毛无法也不必逐一覆盖。js.configs.recommended提供的默认规则质量已经不错但为了让代码风格与多数协作团队保持一致仍需做少量针对性调整。[!NOTE]作者最近升级到了 ESLint9.x.x此前使用的一些风格类规则已在 v9 中废弃官方建议改用stylistic/eslint-plugin-js插件。作者计划在未来迁移到该插件以发挥其全部能力。这也是从 v8 的 eslintrc 配置迁移到 v9 flat config 时最常见的注意事项之一。通用配置General setupjs.configs.recommended启用 ESLint 官方推荐的规则集作为安全基线。eslintConfigPrettier通过eslint-config-prettier/flat入口flat config 专用版本关闭与 Prettier 冲突的规则避免格式检查和格式修改互相打架。languageOptionsecmaVersion: 2025启用 2025 年的最新 JavaScript 语法特性如最新的RegExp增强、Promise.try等。sourceType: module按 ES Module 解析支持import/export语句。globals: { ...globals }注入globals.js中的全局变量清单让no-undef等规则正确放行环境内置变量。规则详解原文档对每条规则都给出了选型理由以下是完整解读no-duplicate-importserror禁止重复导入同一模块避免冗余import语句。no-useless-computed-keyerror禁止无意义的计算属性键如{ [a]: 1 }应写成{ a: 1 }。no-consoleoff允许使用console语句。作者提示生产环境你可能想把它改回warn或error。eqeqeq[error, smart]强制使用严格相等/!smart模式允许在明确比较null、undefined等场景下使用。curlyoff关闭强制花括号规则。作者偏好能不加花括号的if语句尽量不加。object-shorthand[warn, always]对象字面量未使用简写语法时给出警告如{ a: a }应写为{ a }。camelcase[warn, { properties: always }]要求变量与对象属性都遵循 camelCase 命名违反时警告。no-extend-nativeerror禁止扩展原生对象如给Array.prototype添加方法。no-loop-funcerror禁止在循环内声明函数规避闭包捕获循环变量的经典陷阱。no-implied-evalerror禁止隐式eval()如setTimeout(code)这种传入字符串的形式。no-iteratorerror禁止使用遗留的__iterator__属性。no-label-varerror禁止标签名与变量名重名。no-multi-strerror禁止使用反斜杠续行的多行字符串。no-script-urlerror禁止使用javascript:协议的 URL如a hrefjavascript:void(0)。no-shadow-restricted-nameserror禁止遮蔽undefined、NaN、Infinity等受限标识符。no-sparse-arrayswarn对稀疏数组如[1, , 3]给出警告。no-fallthroughwarn对switch语句中意外的贯穿fallthrough分支给出警告。no-callererror禁止使用arguments.caller/arguments.callee。no-evalerror禁止使用eval()。no-negated-in-lhserror禁止在in表达式中对左操作数取反如!key in obj。no-newerror禁止new一个构造函数却不用其返回值如new Foo()单独成行。no-new-requireerror禁止new require()调用针对 CommonJS。block-scoped-varerror强制变量遵循块级作用域防止var提升带来的问题。no-use-before-definewarn在变量定义前使用该变量时给出警告。no-protoerror禁止使用__proto__属性。complexity[warn, 50]函数圈复杂度超过 50 时警告用于控制函数过度复杂。new-parenserror要求构造调用必须带括号如new Date()而非new Date。yoda[error, never]禁止 Yoda 条件如if (true condition)要求把变量放在比较运算符左侧。no-useless-assignmenterror禁止无意义的赋值值从未被读取ESLint 9 新增的规则。仓库实际配置的差异补充原文档展示的是最小可迁移版本。当前仓库根目录的 eslint.config.js 在此基础上扩展了更多规则与一个ignores字段可作为进阶参考ignores: [app/assets/config/manifest.js]显式跳过无需检查的第三方生成文件。风格类规则indent: off、quotes: [error, single, { avoidEscape: true, allowTemplateLiterals: true }]、semi: [error, always]、comma-dangle数组/对象/导入多行时强制尾逗号、函数参数禁用、brace-style、arrow-parens: [error, as-needed]等。空格类规则key-spacing、comma-spacing、block-spacing、space-infix-ops、eol-last、no-multi-spaces、no-multiple-empty-lines等。这套完整配置同样保留了原文档的核心规则no-duplicate-imports、eqeqeq、yoda、complexity、no-useless-assignment等印证了两者出自同一套配置演进脉络。Prettier一行一参数的格式化偏好Prettier 的配置相对直白每个选项对应一种明确的格式化行为printWidth: 80单行最大宽度 80 字符。作者不喜欢长行代码超出即换行。arrowParens: avoid能省略括号的箭头函数参数一律省略如x x多参数时仍保留括号。singleQuote: true统一使用单引号视觉上更简洁。tabWidth: 2缩进 2 个空格保持统一。useTabs: false永远用空格、不用制表符。semi: true语句末尾强制分号。作者坦言将来可能会改变主意。trailingComma: es5仅在 ES5 合法的地方对象、数组多行时添加尾逗号函数参数不加。作者认为多行对象和数组的尾逗号对版本控制更友好新增一行不会污染上一行 diff。bracketSpacing: true对象字面量花括号内侧保留空格如{ foo: 1 }而非{foo: 1}。objectWrap: collapse对象能在一行放下时尽量折叠为单行有助于缩短文件长度。作者对此选项态度中立。[!NOTE]trailingComma是几个选项中最有争议的一个es5、all、none三种取值各有拥趸选择时建议与团队约定一致。仓库里的 Prettier 进阶用法当前仓库的 .prettierrc 在原文档配置之外还添加了两段内容展示了 Prettier 在生产项目中的实际扩展方式{ plugins: [prettier-plugin-astro], overrides: [ { files: *.astro, options: { parser: astro } } ] }plugins注册prettier-plugin-astro让 Prettier 能够格式化 Astro 组件文件。overrides针对*.astro文件指定专用parser避免默认解析器误判混合了 HTML / CSS / JS 的 Astro 语法。这说明了 Prettier 配置的典型演进路径先设定全局格式化偏好再通过overrides与插件为特定文件类型定制行为。从零搭建如何在自己的项目中使用这套配置结合仓库的 package.json 中type: module的设置与 scripts 组织方式你可以按以下步骤在任意 ESM 项目中落地这套方案安装依赖npm install --save-dev eslint^9 prettier^3 eslint-config-prettier将上面的eslint.config.js与.prettierrc复制到项目根目录并按需创建或引入自己的globals.js可直接npm install globals后从中导出或参照 globals.js 手写精简版。在package.json中补充脚本{ scripts: { lint: eslint ., format: prettier --write . } }若项目中存在非标准文件类型如 Astro、Vue、MDX参照上文为.prettierrc添加对应插件与overrides。该仓库自身以type: module运行见 package.json因此eslint.config.js可以直接使用import/export default语法如果你在 CommonJS 项目中使用需相应改为module.exports或保留.mjs扩展名。结语这套 ESLint Prettier 配置的价值在于克制与自洽ESLint 聚焦真正的代码质量隐患重复导入、隐式 eval、原生对象扩展、复杂度过高等把纯格式问题完全交给 Prettier再通过eslint-config-prettier消除二者重叠。如果你想查看这套配置在大型真实项目中的完整形态可以对照仓库根目录的 eslint.config.js 与 .prettierrc 两份实际生效文件以及记录了全部依赖版本的 package.json直接复刻或按需裁剪即可。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐为什么选择nix-alienNix/NixOS用户的必备兼容性工具为什么选择nix alienNix/NixOS用户的必备兼容性工具 nix alien是一款专为Nix/NixOS用户设计的兼容性工具它能够帮助你轻松运行未AutoBangumi前端代码规范ESLint与Prettier配置AutoBangumi前端代码规范ESLint与Prettier配置 1. 规范体系概述 AutoBangumi前端项目采用ESLintPrettier后端前端音视频listmonk前端代码规范ESLint与Prettier配置listmonk前端代码规范ESLint与Prettier配置 作为一款高性能的自托管新闻通讯和邮件列表管理工具listmonk的前端代码质量直接影响用户体后端企业应用上一篇C并发编程实战深入理解\chrono\时间库下一篇深入解析分布式系统从基础概念到实践应用创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/10/3 8:15:16

网盘直链解析指南:免费油猴脚本快速获取 9 大网盘真实下载地址

网盘直链解析指南:免费油猴脚本快速获取 9 大网盘真实下载地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ,支持 百度网盘 / 阿里云盘 / 中国移动云盘…

2026/10/3 8:15:16

【题解-Acwing】278. 数字组合

题目:278. 数字组合 题目描述 给定 N 个正整数 A1,A2,…,AN,从中选出若干个数,使它们的和为 M,求有多少种选择方案。 输入格式 第一行包含两个整数 N 和 M。 第二行包含 N 个整数,表示 A1,A2,…,AN。 输出格式 …

2026/10/3 8:15:16

【题解-Acwing】1020. 潜水员

题目:1020. 潜水员 题目描述 潜水员为了潜水要使用特殊的装备。 他有一个带2种气体的气缸:一个为氧气,一个为氮气。 让潜水员下潜的深度需要各种数量的氧和氮。 潜水员有一定数量的气缸。 每个气缸都有重量和气体容量。 潜水员为了完成…

2026/10/3 9:15:22

企业级大模型落地:数据质量与治理才是规模化的胜负手

这两年聊企业级AI落地,几乎绕不开大模型。但真正在企业里趟过一遍的朋友,心里都有一本账:大模型选型、微调、部署、Agent编排,表面看的全是算法和算力,最后拼的却是数据。训练数据、微调数据、知识库数据、用户反馈数据…

2026/10/3 9:15:22

基于动态贝叶斯网络的配电网在线故障概率诊断系统

简介:本资源是一套基于贝叶斯概率推理的电力系统故障诊断仿真与实现方案,面向电气工程、智能电网方向的本科生、研究生及一线继保/自动化工程师,聚焦解决复杂电力系统中不确定性故障的识别、定位与决策支持问题。压缩包共32个文件&#xff08…

2026/10/3 9:15:22

LangGraph+FastAPI+Streamlit:从Demo到生产级AI Agent的完整改造指南

最近大半年,我花了大量时间把一个基于大模型的项目,从 Jupyter Notebook 里的演示 Demo,一步步改造成能够真正持续对外提供服务、接受真实用户请求的生产级 AI 助手。这个过程中最核心的技术组合,就是LangGraph FastAPI Streaml…

2026/10/3 9:15:22

时间复杂度深度解析:从大O复杂度到经典算法题优化实战

做了这么多年技术面试,我特别喜欢问同一个看似基础的问题:这段代码的时间复杂度是多少?大多数候选人能写出功能完整的程序,却说不清楚自己的代码为什么慢,更别提在大数据量下怎么选方案了。时间复杂度的概念谁都懂个大…

2026/10/3 9:15:22

RV1106 ISP与MIPI/LVDS配置实战:设备树调优与画质问题定位

做 RV1106 方案的第一个晚上,我盯着排线陷入沉思:sensor 供电正常、复位也拉完了,dmesg里死活不报 sensor 挂载,MIPI 时钟测出来却又是波形。后来翻了一整晚的资料,猜了无数种可能,最后发现根因既不在硬件上…

2026/10/3 9:10:21

语法分析器.cpp全解析:从Token流到AST与虚拟机指令生成

简介:编译原理课程中语法分析器环节的完整C实现代码,面向计算机专业学生与需要动手构建词法/语法分析模块的开发者。资源包仅含1个cpp文件,压缩后体积2KB,结构精简,便于直接阅读算法主流程,也适合作为课程实…

2026/10/2 8:16:46

东莞市品牌网站建设报价常见报错与解决

东莞品牌网站建设报价单背后:一份保姆级建站教程避坑实录 网站做好了没人访问,这大概是很多老板最头疼的事。花了大几万做的品牌站,上线后流量惨淡,比路边摊还冷清。别急着骂外包公司,很多“东莞品牌网站建设报价”里藏着不少猫腻,比如用模板站冒充定制…

2026/10/2 18:20:53

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解 【免费下载链接】spirula-studio Cross-vendor 3D Gaussian Splatting trainer - video to splat to mesh, Vulkan or CUDA. 项目地址: https://gitcode.com/GitHub_Trending/sp/spirula-studio Sp…

2026/10/1 10:48:55

SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南 模板网站太丑不够用?别急着加滤镜,那是治标不治本。很多老板盯着后台流量掉得眼红,却还在纠结首页Banner的圆角是不是3像素。这就像穿着西装去挖土,姿势不对,努力白费。我整理这份 速查手册…

2026/10/3 0:04:31

国内大学生必备的AI写作辅助软件是哪款?

国内高校学生在论文写作过程中,越来越依赖AI辅助工具提升效率,主流方案以本土化全流程工具为核心,结合通用大模型与专业插件,覆盖选题构思、框架搭建、初稿撰写、查重降重、格式调整等关键环节,本文将深入解析当前主流…

2026/10/3 0:04:31

Codex接入Jev模型完整指南:配置方法、本地部署与踩坑排查

最近不少人在讨论 Codex 搭配 Jev 这套玩法,我一开始没太当回事,直到自己把 Jev 接进 Codex跑了几轮编码任务之后,才明白那些说“直接起飞”的人是怎么想的。Codex 作为工具本身已经够能打了,但模型固定、上下文策略固定&#xff…

2026/10/3 0:04:31

GitHub 热门: NVIDIA/Model-Optimizer

👋 Hi,我擅长 AI 大模型应用落地、意识解码与 AI 开发工具链 。 💡 创业路上,用技术换时间,一起把 AI 变成生产力 🚀 >GitHub 热门: NVIDIA/Model-Optimizer 凌晨两点,你刚把跑通了的 Qwen3.…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑