WebStorm中Prettier格式化后函数展开问题求助

你遇到的是编辑器代码折叠状态被格式化操作重置的问题，Prettier本身不会把函数体改成...，你看到的折叠是WebStorm的自带功能，以下是几种解决方式：

• 保留格式化前的折叠状态
  打开WebStorm设置（快捷键Ctrl+Alt+S/Cmd+,），进入Editor > General > Code Folding，勾选「Preserve code folding on reformat」选项。这样不管是Prettier还是编辑器自带格式化，都不会自动展开你之前折叠的代码块。

• 调整Prettier配置减少换行
  部分函数被展开是因为Prettier格式化时自动换行了，你可以在项目的.prettierrc配置文件里增大换行阈值，让短函数尽量单行显示：

  {
    "printWidth": 120,
    "bracketSameLine": true
  }
  

  这样短函数会呈现类似const func = () => {...}的单行格式，长函数配合上一个方法的折叠保留设置即可。

• 给特定函数加强制折叠标记
  对于需要始终保持折叠的大型函数，用WebStorm的注释标记手动指定：

  //<editor-fold desc="计算账户余额并打印">
  const calcPrintBalance = function (account) {
    account.balance = account.movements.reduce((acc, mov) => acc + mov, 0);
    labelBalance.textContent = `${account.balance} EUR`;
  };
  //</editor-fold>
  

  添加后这个代码块会被WebStorm自动折叠，格式化操作也不会影响它的折叠状态。

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