告别丑陋生成器代码：js-beautify 格式化 function* 与 yield 完全指南

告别丑陋生成器代码：js-beautify 格式化 function* 与 yield 完全指南

【免费下载链接】js-beautify Beautifier for javascript 项目地址: https://gitcode.com/gh_mirrors/js/js-beautify

为什么生成器函数格式化如此重要？

在现代 JavaScript 开发中，生成器函数（Generator Function）凭借其独特的暂停/恢复执行能力，在异步编程、迭代器模式和状态管理等场景中发挥着关键作用。然而，这类函数的特殊语法（function* 声明和 yield 关键字）常常导致格式化工具处理不当，出现以下典型问题：

• function* 关键字与函数名之间的空格不一致
• yield 表达式缩进混乱，尤其在条件语句和循环中
• 生成器函数体与普通函数格式化规则混淆
• 复杂生成器逻辑的换行与对齐错误

这些问题不仅影响代码可读性，更可能隐藏潜在的逻辑错误。本文将深入解析 js-beautify 如何精准处理生成器函数，并提供完整的配置指南，确保你的异步代码既美观又可靠。

js-beautify 生成器函数处理机制

词法分析：识别生成器语法特征

js-beautify 的 JavaScript 解析器在词法分析阶段就对生成器函数进行了特殊处理。在 js/src/javascript/tokenizer.js 中，我们可以看到对 function* 关键字的识别逻辑：

// 简化的词法分析逻辑示例
function _read_word(previous_token) {
  var resulting_string = this.__patterns.identifier.read();
  if (resulting_string !== '') {
    // 检查是否为保留关键字
    if (reserved_word_pattern.test(resulting_string)) {
      // 特别处理 function* 关键字
      if (resulting_string === 'function' && this._input.peek() === '*') {
        this._input.next(); // 读取 '*' 字符
        return this._create_token(TOKEN.RESERVED, 'function*');
      }
      return this._create_token(TOKEN.RESERVED, resulting_string);
    }
    return this._create_token(TOKEN.WORD, resulting_string);
  }
}

这段代码确保解析器能够正确识别 function* 作为单个语法单元，而非普通的 function 关键字加乘号运算符，为后续格式化奠定基础。

语法格式化：生成器函数的特殊规则

在 js/src/javascript/beautifier.js 中，格式化器针对生成器函数实现了专门的缩进和空格规则：

// 函数名与参数列表之间空格处理
if (this._options.space_after_named_function && peek_back_two) {
  var peek_back_three = this._tokens.peek(-4);
  // 处理 function* name() 格式
  if (peek_back_two.text === '*' && reserved_array(peek_back_three, ['async', 'function'])) {
    this._output.space_before_token = true;
  }
}

这段逻辑确保 function* 关键字与函数名之间保持一个空格，同时避免在 * 前后产生多余空格，生成符合规范的 function* generator() {} 格式。

实战指南：完美格式化生成器函数

基础配置与快速上手

要启用对生成器函数的完美支持，首先需要确保你的 js-beautify 配置正确。创建或修改项目根目录下的 .jsbeautifyrc 文件：

{
  "indent_size": 2,
  "indent_char": " ",
  "space_after_named_function": true,
  "space_after_anon_function": true,
  "brace_style": "expand",
  "preserve_newlines": true,
  "max_preserve_newlines": 2,
  "operator_position": "before-newline"
}

关键配置项说明：

配置项	推荐值	作用
space_after_named_function	true	确保 function* name() 中间有空格
space_after_anon_function	true	确保匿名生成器 function*() 中间有空格
brace_style	"expand"	生成器函数体使用换行风格
preserve_newlines	true	保留 yield 语句间的空行

常见生成器场景格式化示例

1. 基础生成器函数

输入：

function*idGenerator(){let id=0;while(true)yield id++;}

格式化后：

function* idGenerator() {
  let id = 0;
  while (true) yield id++;
}

2. 带参数的生成器函数

输入：

function*rangeGenerator(start,end){for(let i=start;i<=end;i++){yield i;}}

格式化后：

function* rangeGenerator(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

3. 复杂控制流中的 yield

输入：

function*dataProcessor(data){if(data.filter)for(const item of data){if(item.valid)yield process(item);}else{yield*defaultProcessor(data);}}

格式化后：

function* dataProcessor(data) {
  if (data.filter)
    for (const item of data) {
      if (item.valid)
        yield process(item);
    }
  else {
    yield* defaultProcessor(data);
  }
}

高级技巧：自定义生成器格式化规则

对于有特殊需求的项目，可以通过修改源码实现自定义格式化规则。例如，要将 yield 关键字后的表达式强制换行：

// 在 js/src/javascript/beautifier.js 中修改
function handle_reserved_word(token) {
  if (token.text === 'yield') {
    this._output.space_before_token = true;
    this.print_token(token);
    // 强制在 yield 后换行
    this.print_newline();
    return;
  }
  // 其他保留字处理逻辑...
}

修改后，yield 表达式将自动换行：

// 修改前
function* generator() {
  yield computeValue();
}

// 修改后
function* generator() {
  yield
    computeValue();
}

常见问题与解决方案

Q: 为什么我的 function* 总是被格式化成 function *？

A: 这是由于早期 JavaScript 规范允许两种风格，但现代最佳实践推荐 function* 不带空格的形式。确保你的配置文件中没有设置 space_after_function 为 true，正确配置应为：

{
  "space_after_named_function": true,  // 确保 function* name() 有空格
  "space_after_anon_function": true    // 确保 function*() {} 有空格
}

Q: 如何让 yield* 表达式正确对齐？

A: js-beautify 对 yield* 有专门处理，确保其与普通 yield 保持一致的缩进。如果遇到对齐问题，检查是否使用了最新版本，或手动调整 indent_level 配置：

{
  "indent_size": 2,
  "indent_level": 0
}

Q: 生成器函数中的箭头函数格式化异常怎么办？

A: 当生成器函数内部包含箭头函数时，确保 arrow_parens 配置正确：

{
  "arrow_parens": "always"
}

这将确保：

// 正确格式化
function* generator() {
  const items = [1, 2, 3];
  yield* items.map(item => item * 2);
}

性能优化：格式化大型生成器项目

对于包含大量生成器函数的项目，可以通过以下配置提升格式化性能：

{
  "max_preserve_newlines": 1,
  "wrap_line_length": 120,
  "end_with_newline": false
}

通过限制保留空行数和设置合理的换行长度，可以显著减少 js-beautify 的处理时间。

总结与展望

生成器函数作为 JavaScript 异步编程的重要特性，其代码格式化质量直接影响开发效率和代码可维护性。通过本文介绍的配置技巧和最佳实践，你可以确保 js-beautify 完美处理 function* 和 yield 语法，生成整洁一致的代码。

随着 JavaScript 语言的不断发展，我们期待 js-beautify 未来能提供更多针对生成器函数的高级格式化选项，如：

• 生成器函数参数的特殊对齐方式
• yield 表达式的条件换行规则
• 与 TypeScript 生成器类型注解的更好集成

【免费下载链接】js-beautify Beautifier for javascript 项目地址: https://gitcode.com/gh_mirrors/js/js-beautify