VSCode中Prettier格式化JavaScript代码问题求助

首先明确：Prettier是「固执己见」的格式化工具，它的换行逻辑基于预设的可读性规则，即使调大printWidth，只要它判断参数内包含复杂逻辑（比如你的异步回调函数），就会自动拆分行。所以靠Prettier本身无法实现你要的格式，以下是可行替代方案：

1. 用Prettier忽略单行格式化 #

如果只是个别代码段需要这种格式，可以直接在代码前加忽略注释，跳过Prettier的格式化：

// prettier-ignore
app.post("/campgrounds",validateCampground,catchAsync(async (req, res, next) => {
        const newCampground = new Campground(req.body.campground);

        // console.log(newCampground.title)
        await newCampground.save();
        //
        res.redirect(`/campgrounds/${newCampground._id}`);
    })
);

2. 改用Beautify插件自定义规则 #

Beautify支持高度自定义的格式化规则，可以满足你的需求：

• 在VSCode中安装Beautify插件
• 在项目根目录创建.jsbeautifyrc配置文件，加入以下规则：

  {
    "js": {
      "function_call": {
        "arguments": "sameLine"
      },
      "indent_size": 4
    }
  }
  

• 在VSCode设置中将默认格式化器改为Beautify（可通过右下角状态栏的格式化器切换按钮操作）

3. ESLint配合自定义规则 #

如果需要全局统一这种格式，可以用ESLint的规则控制：

• 安装ESLint后，在.eslintrc中启用function-call-arguments-newline规则：

  {
    "rules": {
      "function-call-arguments-newline": ["error", "never"]
    }
  }
  

  这个规则会强制所有函数调用的参数放在同一行，如果你只想针对特定函数（比如app.post），需要编写自定义ESLint规则，相对复杂一些。

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