如何配置Prettier，为无大括号的if/else if/else语句添加换行

当前用Prettier格式化无大括号的if/else代码时，会被格式化成一行：

if (condition) console.log('1');
else if (otherCondition) console.log('2');
else console.log('3');

但我需要每个分支的语句单独换行并缩进，格式如下：

if (condition)
  console.log('1');
else if (otherCondition)
  console.log('2');
else
  console.log('3');

解决方法 #

Prettier本身没有专门的选项强制无大括号if/else换行，不过可以通过两种方式实现需求：

• 调整printWidth配置：在Prettier配置文件（如.prettierrc）里把printWidth设为一个很小的值，比如20。当if条件加语句的长度超过这个值时，就会自动换行。示例配置：

{
  "printWidth": 20,
  "tabWidth": 2,
  "singleQuote": true
}

注意：这个设置会影响所有代码的换行逻辑，可能导致其他不需要拆分的代码也被拆成多行。

• ESLint配合自定义规则：如果不想影响其他代码风格，可以用ESLint强制无大括号语句换行，再结合Prettier保持格式统一。
  1. 安装依赖：eslint、eslint-plugin-prettier、eslint-config-prettier
  2. 在ESLint配置文件（如.eslintrc.json）中添加规则：

{
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "tabWidth": 2,
        "singleQuote": true
      }
    ],
    "curly": ["error", "multi-line"],
    "nonblock-statement-body-position": ["error", "below"]
  },
  "extends": ["plugin:prettier/recommended"]
}

其中nonblock-statement-body-position规则会强制无大括号的if/else语句主体放在条件下方并缩进，ESLint自动修复后就能得到想要的格式。

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