◆

WebStorm 设置方法多参数换行对齐方式

2023-07-19 06:120

函数参数一多,一行放不下就得换行,这时候换行的方式直接决定可读性。WebStorm 默认倾向于把参数对齐到左括号后面,也就是所谓的「续行对齐」,写出来是这样:

someFunction(paramOne, paramTwo, paramThree);

这种排法在参数名长、函数名也长的时候会把内容推得很靠右,一旦重命名函数,整块参数的缩进都得跟着变,diff 里就是一大片无意义的改动。我更想要的是每个参数占一行、统一缩进一层的写法。这篇记的就是控制这个对齐方式的设置位置。

设置位置

打开设置面板,进入 Editor → Code Style → JavaScript(TS 项目改 TypeScript,两边选项一样),切到 Wrapping and Braces 标签页,找到 Function declaration parameters 和 Function call arguments 这两个分组。每组下面的选项含义是:

  1. 换行策略下拉框:Do not wrap 不换行、Wrap if long 超出行宽才换、Chop down if long 超长就每个参数各占一行、Wrap always 总是每个参数一行。
  2. Align when multiline:这就是控制「是否对齐到左括号」的开关。取消勾选后参数只按正常缩进层级排,不再追着括号走。
  3. New line after '(' 和 Place ')' on new line:让左括号后立刻换行、右括号单独成行,配合 Chop down if long 能得到最整齐的多行参数样式。

行宽阈值在同一个 Code Style 页面的 Wrapping and Braces 顶部(Hard wrap at)设置,默认 120。

下图是这个面板,重点看 Wrapping and Braces 列表里 Function call arguments 分组的展开项,以及 Align when multiline 的勾选状态,右侧预览区会同步显示排版结果。

WebStorm 设置面板 Code Style 的 Wrapping and Braces 标签页,函数参数换行与 Align when multiline 对齐选项

注意事项

  1. 参数声明和参数调用是两组独立配置,只改一边的话另一边行为不变,通常要一起调成同样的策略。
  2. 项目里接了 Prettier 的话,这些设置在保存时会被 Prettier 覆盖,应该改 .prettierrc 而不是这里。
  3. 建议把 Code Style 的 Scheme 切到 Project 再改,配置进 .idea/codeStyles/ 后可以随仓库共享,避免团队成员格式化结果互相打架。
💬留言板0

还没有留言,来发表第一条吧~

PAGE LOAD / LIVEWebStorm 设置方法多参数换行对齐方式加载中