VS Code中useCallback带参数时JSX格式化换行问题求助

问题重现 #

使用Prettier格式化JSX代码时，无参数的useCallback能保持紧凑格式，但带参数时回调函数和依赖数组会自动换行，示例如下：

// 带参数时自动换行（不符合预期）
const onSubmitEditing = useCallback(
 ({nativeEvent}) => {
     setSearchQuery(nativeEvent.text);
  },
  [setSearchQuery],
);

// 无参数时格式正常（符合预期）
const clearText = useCallback(() => {
  setSearchBoxText('');
}, [setSearchBoxText]);

当前.prettierrc.js配置：

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
};

解决办法 #

1. 增大printWidth阈值 #

Prettier默认的printWidth为80，当代码行长度超过该阈值时会自动换行。带参数的useCallback大概率是触发了这个长度限制，只需调大参数值即可保持紧凑格式：

修改.prettierrc.js：

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 120, // 增大宽度阈值，可根据实际需求调整
};

2. 临时禁用单行格式化（不推荐全局使用） #

如果不想全局调整宽度，可在特定代码行上方添加// prettier-ignore注释，强制Prettier跳过该行的格式化：

// prettier-ignore
const onSubmitEditing = useCallback(({nativeEvent}) => {
  setSearchQuery(nativeEvent.text);
}, [setSearchQuery]);

3. 调整arrowParens配置（仅适用于非解构参数场景） #

如果你的参数是单个非解构变量，可将arrowParens设为'avoid'，去掉不必要的括号来缩短行长度，但该配置不适用于解构参数（如({nativeEvent})）的情况：

module.exports = {
  // ...其他配置
  arrowParens: 'avoid',
};

说明 #

优先推荐调整printWidth，这是最通用的解决方案，既能保证代码整体风格一致，又能避免频繁使用注释禁用格式化。

内容的提问来源于stack exchange，提问作者Lucy