Airbnb JavaScript 风格指南全解析：从代码规范到 eslint-config 落地实践

Lint代码质量前端文档【免费下载链接】javascriptJavaScript Style Guide项目地址https://gitcode.com/GitHub_Trending/javascript12/javascript点击查看免费下载导读本篇文章以仓库根目录 README.mdAirbnb JavaScript Style Guide 正文共 30 节、数百条带正反例的代码示例为骨架系统讲解 Airbnb 风格指南的核心规则、设计动机并结合本仓库中 packages/eslint-config-airbnb 与 packages/eslint-config-airbnb-base 两个可发布 ESLint 配置包的真实实现说明如何把规范落地为可自动执行的 lint 规则。读完你既能掌握一套可复用的 JS/ES6 编码规范也能了解 Airbnb 官方配置包的内部结构与用法。一、指南定位与配套工具Airbnb JavaScript Style Guide 的自我定位是 A mostly reasonable approach to JavaScript即一种大体上合理的 JavaScript 写法。它面向使用 Babel 的项目要求配合babel-preset-airbnb或等价方案并在应用中安装airbnb-browser-shims或等价 polyfill来补齐symbol、bigint等新原语的运行时支持。本仓库配套了完整的 ESLint 配置包把指南规则固化为可执行检查。配套的 react/README.md 与 css-in-javascript/README.md 是同一套风格的扩展主题React 与 CSS-in-JS。本仓库根 package.json 提供了全套维护脚本npm run lint用 markdownlint 校验文档linters/.markdownlint.jsonnpm test依次运行两个配置包的测试npm run travis则在 CI 中完成 lint 与测试形成文档规范 → 配置包 → 自动化校验的完整闭环。二、类型与引用值语义与块级作用域2.1 原始类型按值访问复杂类型按引用访问指南 1.1 原始类型 将string、number、boolean、null、undefined、symbol、bigint归为原始类型直接操作其值1.2 复杂类型 将object、array、function归为引用类型。示例const foo [1, 2]; const bar foo; bar[0] 9; console.log(foo[0], bar[0]); // 9, 9指南特别提示symbol和bigint无法被忠实的 polyfill因此在目标环境原生不支持它们时不应使用。2.2 一律使用 const/let拒绝 var2.1所有引用用const避免var对应 ESLint 规则prefer-const、no-const-assign2.2确需重新赋值时用let块级作用域对应no-var2.3const/let是块级作用域var是函数级作用域——在块外访问let a会抛ReferenceError而var c依然可读。这些规则在配置包中有真实落地eslint-config-airbnb-base/rules/variables.js中配置了prefer-const: [error, { destructuring: any, ignoreReadBeforeAssign: true }]与no-var: error。ESLint 规则配置格式为[严重级别, 选项对象]其中error表示违规即报错并退出。三、对象与数组字面量优先、展开语法优先3.1 对象创建与简写3.1用{}字面量创建对象不用new Object()no-new-object3.2动态属性名用计算属性[getKey(enabled)]: true把属性集中在一处定义3.3方法使用简写addValue(value) { ... }object-shorthand3.4属性值简写{ lukeSkywalker }3.5简写属性集中在对象声明开头3.6仅对非法标识符加引号如data-blahquote-props3.7不要直接调用Object.prototype方法如object.hasOwnProperty(key)改用Object.prototype.hasOwnProperty.call(object, key)可先在模块级缓存const has Object.prototype.hasOwnProperty支持 ES2022 的环境可直接用Object.hasOwn(object, key)no-prototype-builtins3.8浅拷贝用对象展开const copy { ...original, c: 3 }而非Object.assign——后者会修改第一个参数用对象 rest 省略属性const { a, ...noA } copyprefer-object-spread。3.2 数组创建与遍历4.1用[]而非new Array()no-array-constructor4.2用push追加元素不用下标赋值4.3复制数组用[...items]不用手写循环4.4可迭代对象转数组优先展开语法[...foo]4.5类数组对象转数组用Array.from(arrLike)不用Array.prototype.slice.call4.6对可迭代对象做映射时用Array.from(foo, bar)避免先展开产生中间数组4.7数组方法回调必须有return函数体为单条无副作用返回表达式时可省略对应 8.2array-callback-return。经典反例reduce回调忘记return会让acc在第一次迭代后变成undefined4.8多行数组在开闭括号处换行内层元素各占一行。四、解构单一定义点减少重复访问5.1访问对象的多个属性时用对象解构prefer-destructuring直接在函数参数处解构效果最佳function getFullName({ firstName, lastName }) { return ${firstName} ${lastName}; }5.2数组用下标解构const [first, second] arr5.3多返回值用对象解构而非数组解构这样新增属性或调整顺序不会破坏调用方const { left, top } processInput(input); // 调用方只取自己需要的字段五、字符串与函数5.1 字符串规范6.1一律使用单引号quotes不含插值或换行的模板字符串也是反例6.2超过 100 字符的长字符串不要用续行符或拼接保持单行6.3程序化构建字符串用模板字符串插值内不留空格${name}prefer-template、template-curly-spacing6.4禁止对字符串使用eval()no-eval6.5不要多余转义字符no-useless-escape。5.2 函数声明与参数7.1用命名函数表达式代替函数声明func-style、func-names。原因是函数声明会被提升容易在定义前被引用命名表达式保留词法名便于调试调用栈const short function longUniqueMoreDescriptiveLexicalFoo() { // ... };7.2IIFE 用括号整体包裹wrap-iife并注明在有模块的世界里几乎不需要 IIFE7.3不要在if/while等非函数块内声明函数改为赋值给变量no-loop-func7.5参数不要命名为arguments7.6用 rest 语法...args代替arguments对象prefer-rest-params——rest 是真数组且明确表达要取哪些参数7.7用默认参数opts {}代替opts opts || {}这类对参数的改写7.8默认参数不要带副作用如a b副作用会使结果难以推理7.9默认参数永远放在最后default-param-last7.10禁止用new Function(a, b, return a b)创建函数no-new-func等同于eval7.11函数签名中括号前保留一个空格space-before-function-paren、space-before-blocks7.12/7.13禁止修改或重新赋值参数no-param-reassign。重新赋值参数会影响 V8 优化和arguments对象行为7.14调用变参函数用展开语法console.log(...x)prefer-spreadnew也可以组合展开new Date(...[2016, 8, 5])7.15多行签名/调用按每项一行、末项带尾逗号缩进function-paren-newline。5.3 箭头函数8.1需要匿名函数时用箭头函数prefer-arrow-callback、arrow-spacingthis绑定更符合直觉8.2函数体只有单条无副作用返回表达式时省略花括号用隐式返回否则保留returnarrow-parens、arrow-body-style返回对象字面量要加括号(number, index) ({ [index]: number })8.3多行表达式用括号包裹提升可读性8.4单参数也保留括号arrow-parens减少增删参数时的 diff8.5避免与/混淆no-confusing-arrow8.6隐式返回的箭头函数体与同行implicit-arrow-linebreak。配置包中对应实现见 eslint-config-airbnb-base/rules/es6.jsarrow-parens: [error, always]、arrow-body-style: [error, as-needed, { requireReturnForObjectLiteral: false }]、arrow-spacing: [error, { before: true, after: true }]、generator-star-spacing: [error, { before: false, after: true }]。六、类、模块与迭代器6.1 类与构造函数9.1一律使用class不要直接操作prototype9.2继承用extends不破坏instanceof9.3方法返回this支持链式调用9.4可以自定义toString()但要保证无副作用9.5空构造函数或仅转发给父类的构造函数不必要no-useless-constructor9.6避免重复类成员no-dupe-class-members9.7类方法应使用this否则改为静态方法class-methods-use-this。6.2 模块10.1使用import/export模块系统10.2不用通配符导入import * as ...10.3不从导入处直接导出10.4同一路径只导入一次no-duplicate-imports10.5不导出可变绑定export { foo }中的foo必须是constimport/no-mutable-exports10.6单导出模块优先默认导出import/prefer-default-export10.7所有import放在非导入语句之前import/first10.8多行导入按对象字面量规则缩进并带尾逗号object-curly-newline10.9导入语句中禁用 Webpack loader 语法css!sass!foo.scssimport/no-webpack-loader-syntax10.10导入路径不带 JS 扩展名import/extensions。6.3 迭代器与生成器11.1不使用for-in/for-of迭代器改用高阶函数数组用map()/every()/filter()/find()/findIndex()/reduce()/some()对象先用Object.keys()/Object.values()/Object.entries()转数组no-iterator、no-restricted-syntaxconst sum numbers.reduce((total, num) total num, 0);11.2当前不使用生成器因为不能很好地转译到 ES511.3如必须使用生成器function*后跟一个空格generator-star-spacing。七、属性、变量与提升7.1 属性访问12.1属性访问用点号luke.jedidot-notation12.2变量访问属性用方括号luke[prop]12.3幂运算用2 ** 10而非Math.pow(2, 10)prefer-exponentiation-operator。7.2 变量声明13.1声明变量必须用const/let否则产生全局变量no-undef、prefer-const13.2每个变量一条声明语句one-var避免;/,误改13.3先集中const再集中let13.4变量在需要处就近声明let/const是块级作用域13.5禁止链式赋值let a b c 1no-multi-assign链式赋值会让b、c变成隐式全局变量13.6避免/--一元增减no-plusplus改用num 1累加用reduce计数用filter(Boolean).length13.7两侧不要换行operator-linebreak超长时用括号包裹值13.8禁止未使用变量no-unused-vars解构省略属性的const { type, ...coords } data场景中type可豁免。7.3 提升Hoisting14.1var声明提升到函数作用域顶部但赋值不提升const/let存在暂时性死区TDZ声明前访问抛ReferenceErrortypeof也不再安全14.2匿名函数表达式提升变量名不提升赋值声明前调用抛TypeError14.3命名函数表达式提升变量名不提升函数名与函数体14.4函数声明同时提升名称与函数体14.5变量、类、函数应定义后再使用no-use-before-define提升机制常带来反直觉行为。八、比较运算、块与控制语句8.1 相等与真值15.1一律使用/!eqeqeq15.2if条件按ToBoolean规则求值——对象恒为trueundefined/null为false数字仅0、-0、NaN为false字符串仅空串为false15.3布尔值用简写if (isValid)字符串/数字用显式比较if (name ! )、if (collection.length 0)15.5case/default内含词法声明let/const/function/class时用花括号建块no-case-declarations否则多个 case 共享作用域会冲突15.6三元表达式不要嵌套、保持单行no-nested-ternary15.7避免无谓三元a ? a : b改a || bc ? true : false改!!ca ! null ? a : b改a ?? bno-unneeded-ternary15.8混合运算符加括号明确优先级no-mixed-operators、-、**除外15.9空值合并运算符??只在左操作数为null/undefined时返回右侧值精准区分空值与其他假值const value null ?? default; // default const age user.age ?? 18; // age 为 null 时返回 188.2 块与控制语句16.1多行块必须加花括号nonblock-statement-body-position单行if (test) return false;可接受16.2else与if的右花括号同行brace-style16.3if块总是return时去掉多余elseno-else-return保持早退风格17.1超长控制条件换行时逻辑运算符放在行首、||开头与链式调用风格一致17.2不用选择运算符代替控制语句!isRunning startRunning()应写成if (!isRunning) { startRunning(); }。九、注释与空白9.1 注释18.1多行注释用/** ... */18.2单行注释用//置于被注释代码上方空行处块首行除外18.3注释以空格开头spaced-comment18.5// FIXME:标注待解决问题18.6// TODO:标注待实现方案。9.2 空白与格式19.1软制表符 2 空格缩进indent19.2左花括号前 1 空格space-before-blocks19.3控制语句关键字与左括号间 1 空格函数名与参数列表间不留空格keyword-spacing19.4运算符两侧留空格space-infix-ops19.5文件以单个换行符结尾eol-last19.6超过 2 个方法链的调用缩进换行点号在行首newline-per-chained-call、no-whitespace-before-property19.7块与下一条语句之间留空行19.8块内不填充空行padded-blocks19.9不使用多个空行no-multiple-empty-lines19.10/19.11/19.12圆括号/方括号内不留空格花括号内保留空格space-in-parens、array-bracket-spacing、object-curly-spacing19.13单行不超过 100 字符max-len长字符串除外超长链式条件可用可选链?.简化19.14块内单一语句也保持花括号内侧空格block-spacing19.15逗号前无空格、逗号后 1 空格comma-spacing19.16计算属性括号内无空格computed-property-spacing19.17函数与调用括号间无空格func-call-spacing19.18对象键值冒号后 1 空格key-spacing19.19行尾无尾随空格no-trailing-spaces19.20文件开头无空行、结尾仅一个换行no-multiple-empty-lines。空白类规则在仓库中同样有实现eslint-config-airbnb-base的whitespace.js与whitespace-async.js见 packages/eslint-config-airbnb-base/whitespace.jseslint-config-airbnb侧对应 packages/eslint-config-airbnb/whitespace.js与whitespaceRules.js协同定义空白细节。十、逗号、分号与类型转换10.1 逗号20.1禁止前导逗号comma-style20.2必须使用尾逗号comma-dangle多行对象/数组/函数参数的最后一项后保留逗号但 rest 元素后不能有逗号。理由让 git diff 更干净——新增属性只增加一行不污染已有行Babel 转译会移除多余尾逗号无需担心旧浏览器兼容。10.2 分号21.1必须使用分号semi。原因指向自动分号插入ASI的怪异行为[luke, leia].forEach(...)会被并入上一行导致异常、return独占一行会返回undefined、(async function ...行首括号会与上一语句粘连。显式加分号并配置 linter 检查可避免这些坑。10.3 类型转换22.1类型转换在语句开头显式进行22.2字符串转换用String(this.reviewScore)不用new String()返回对象、 触发 valueOf或.toString()不保证返回字符串no-new-wrappers22.3数字转换用Number(inputValue)parseInt必须带基数parseInt(inputValue, 10)radix避免老浏览器对0x/八进制的歧义22.4如确因性能瓶颈用位运算inputValue 0必须注释说明原因22.5注意位运算返回 32 位整数超过2147483647的数值会被截断为负数22.6布尔转换用Boolean(age)或!!ageno-new-wrappers。十一、命名、访问器与事件11.1 命名约定23.1避免单字母命名用描述性名称id-length23.2对象/函数/实例用 camelCasecamelcase23.3构造函数/类用 PascalCasenew-cap23.4不用前后缀下划线no-underscore-dangle——JavaScript 没有真正私有性下划线前缀是伪私有约定会误导对公共 API 契约的理解需要私有数据可考虑WeakMap23.5不保存this到self/that用箭头函数或Function#bind23.6文件名与默认导出名完全一致PascalCase 类、camelCase 函数23.7默认导出函数用 camelCase23.8导出构造函数/类/单例/函数库/裸对象用 PascalCase23.9缩写要么全大写要么全小写如SMSContainer/httpRequests23.10常量大写仅限已导出 const 可信不变三者兼备时文件内常量不要大写。11.2 访问器24.1属性访问器函数非必需24.2不用 JS getter/setter副作用难测改用getVal()/setVal(hello)24.3布尔属性/方法用isVal()/hasVal()前缀24.4如用get()/set()要保持一致。11.3 事件与 jQuery25.1事件负载传对象字面量而非原始值后续加字段不破坏既有 handler$(this).trigger(listingUpdated, { listingID: listing.id });26.1jQuery 对象变量加$前缀$sidebar26.2缓存 jQuery 查找结果避免重复查询26.3DOM 查询用级联选择器$(.sidebar ul)或父子选择器$(.sidebar ul)26.4作用域查询优先$sidebar.find(ul)。十二、标准库、测试与 ES6 选型12.1 标准库的坑29.1用Number.isNaN而非全局isNaNno-restricted-globals——全局isNaN会把非数字强转成数字isNaN(1.2.3)返回true而Number.isNaN(1.2.3)为false29.2用Number.isFinite而非全局isFinite全局版本同样存在强转问题。12.2 测试与工程实践30.1/30.2 明确主张无论用哪个测试框架Airbnb 主要用mocha、jest小模块偶尔用tape都必须写测试多写纯函数、少做变更谨慎使用 stub/mock以 100% 覆盖率为目标修复 bug 时必须补回归测试。12.3 ES6 风格选型28.1 汇总了箭头函数、类、对象简写/计算属性、模板字符串、解构、默认参数、rest、数组展开、let/const、幂运算符等 ES6 特性的指南章节入口28.2 规定不要使用未进入 TC39 Stage 3 的提案——提案尚未定稿随时可能变更或撤销。十三、ESLint 配置包结构规范如何落地为可执行规则本仓库不只是文档仓库还配套发布两个 npm 包packages/eslint-config-airbnb/package.json 与 packages/eslint-config-airbnb-base/package.jsoneslint-config-airbnbv19.0.4完整版包含 React 相关规则。入口 index.js 通过extends依次引入eslint-config-airbnb-base、./rules/react、./rules/react-a11y还提供base.js仅基础、hooks.jsReact Hooks、legacy.js、whitespace.js等子入口见 package.json 的 exports 字段eslint-config-airbnb-base纯 JS/ES6 版本不含 React入口 index.js 聚合 rules/best-practices.js、rules/errors.js、rules/node.js、rules/style.js、rules/variables.js、rules/es6.js、rules/imports.js、rules/strict.js 八组规则文件并设置parserOptions: { ecmaVersion: 2018, sourceType: module }。规则配置采用 ESLint 标准格式规则名: [error, 选项]示例见 rules/es6.jsarrow-parens: [error, always]、arrow-body-style: [error, as-needed, { requireReturnForObjectLiteral: false }]。React 侧 rules/react.js 引入eslint-plugin-react开启 JSX 解析ecmaFeatures: { jsx: true }并调整no-underscore-dangle规则放行__REDUX_DEVTOOLS_EXTENSION_COMPOSE__这类实际需要的下划线前缀。使用方式标准 npm 安装后在.eslintrc中 extends{ extends: [airbnb] }不含 React 的项目可改用extends: [airbnb-base]对应eslint-config-airbnb-base。测试方面两个包各自在 test/ 目录维护test-base.js、test-react-order.js等用例配合npm test验证规则文件能被正确加载、规则顺序正确。十四、结语Airbnb JavaScript Style Guide 的价值不在于每条规则本身而在于它把可读性、可维护性、避免反直觉行为的工程原则逐条翻译成了带正反例的规范文本并沉淀为可安装的 ESLint 配置包。阅读本指南时建议结合配置包源码对照学习文档里每条规则标注的 ESLint 规则名如prefer-const、no-param-reassign、comma-dangle都能在 rules/ 目录中找到对应实现。若团队需要定制指南结尾的 Amendments 章节也鼓励 fork 后按团队风格增删规则。赞分享Lint代码质量前端文档【免费下载链接】javascriptJavaScript Style Guide项目地址https://gitcode.com/GitHub_Trending/javascript12/javascript点击查看免费下载相关推荐Nuxt 代码风格实战nuxt/eslint 与 Flat Config 的规范落地全解Nuxt 代码风格实战nuxt/eslint 与 Flat Config 的规范落地全解 本篇围绕 Nuxt 官方的代码风格Code Style指南展开前端后端Web框架SSRcraft-agents-oss v0.7.3 版本深度解析OAuth 稳定性修复、后台任务 UI 与跨语言会话标题生成craft agents oss v0.7.3 版本深度解析OAuth 稳定性修复、后台任务 UI 与跨语言会话标题生成 导读 本文基于开源仓库 craftLint代码质量前端文档Compressorjs代码风格指南遵循Airbnb JavaScript规范的实践Compressorjs代码风格指南遵循Airbnb JavaScript规范的实践 引言为什么代码风格对Compressorjs至关重要 你是否曾在协作开图像处理前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考