Airbnb JavaScript Style Guide：前端团队绕不开的编码规范

airbnb/javascript 在 GitHub 上已经拿到 148,090 Star 了。

Airbnb 开源的这份 JavaScript 编码规范，覆盖了从变量声明到模块导入的方方面面。38 个章节，每条规则都配了 ESLint 插件，可以直接在项目里跑起来。

1、 它到底规范了什么

一句话：把 JavaScript 代码怎么写这件事定死。

变量用 const 还是 let，对象字面量怎么缩进，函数参数能不能用 arguments，箭头函数什么时候该用什么时候不该用，模块导入的顺序怎么排……你能想到的编码细节，它都管。

举几个例子：

用 const 声明所有引用，需要重新赋值的场景才用 let，var 直接禁掉。对象创建用字面量语法，不用 new Object()。简写属性放前面，长属性名放后面。字符串统一用单号，模板字符串用反引号。函数参数带默认值，放在最后。

每条规则后面都挂着对应的 ESLint 规则名，比如 prefer-const、no-var、object-shorthand，装上 eslint-config-airbnb 就能自动检查。

2、 为什么这么多项目在用

做前端的人都知道，团队协作里最头疼的不是技术选型，是代码风格不统一。有人用 var 有人用 let，有人加分号有人不加，有人缩进用空格有人用 Tab。Code Review 的时间全耗在这些事上了。

Airbnb 这份规范把争议点全部拍板了。你不需要在团队里讨论"到底用不用分号"，规范说了用就用。不需要争论"箭头函数和普通函数怎么选"，规范里写了明确的适用场景。

它还有一个优势：配套工具链完整。eslint-config-airbnb 这个包在 npm 上每周下载量过百万，装上之后写代码时编辑器实时提示，不用等到提交才发现问题。

3、 覆盖了哪些内容

规范分成 38 个章节，大致可以归成几类：

基础类型和变量：原始类型和引用类型的区别，const/let/var 的使用场景，变量提升的行为。

对象和数组：字面量创建、解构赋值、简写语法、属性排列顺序。

函数：箭头函数、默认参数、rest/spread 参数、构造函数的写法。

模块和类：import/export 的规范，类的继承和方法定义。

代码风格：缩进、空格、逗号、分号、注释、命名规则。

还有一块是 ES5 兼容性说明，列出了哪些 ES6+ 特性需要 polyfill，哪些在旧环境里跑不了。

4、 怎么接入项目

安装：

npm install eslint-config-airbnb eslint@^8 eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks --save-dev

在 .eslintrc 里加上一行：

{
  "extends": "airbnb"
}

如果项目不用 React，可以只装基础版：

npm install eslint-config-airbnb-base eslint@^8 eslint-plugin-import --save-dev

配置改成：

{
  "extends": "airbnb-base"
}

想调整个别规则，在 rules 字段里覆盖就行。比如项目里允许 console.log：

{
  "extends": "airbnb",
  "rules": {
    "no-console": "off"
  }
}

5、 适合什么场景

• 新建前端项目，想从第一天起就保持代码风格统一
• 团队人数超过 3 个人，不想在 Code Review 里反复讨论格式问题
• 已有项目想逐步规范代码质量，需要一套成熟的 ESLint 配置作为起点
• 开源项目想降低贡献者的上手门槛，用行业通用规范减少沟通成本

Code Review 里反复讨论格式问题

• 已有项目想逐步规范代码质量，需要一套成熟的 ESLint 配置作为起点
• 开源项目想降低贡献者的上手门槛，用行业通用规范减少沟通成本