如何在VSCode的Angular项目中配置Prettier实现构造函数注入参数逐行排版

依赖安装 #

• 打开项目根目录终端，执行命令安装最新版Prettier及配套插件：
  npm install --save-dev prettier@latest prettier-plugin-organize-imports
• 打开VSCode扩展面板，搜索安装Prettier - Code formatter扩展，安装完成后重载VSCode。

VSCode基础配置 #

• 按下快捷键Ctrl+,（Windows）/Cmd+,（Mac）打开设置面板：
  • 搜索Default Formatter，下拉选择Prettier - Code formatter作为默认格式化工具
  • 搜索Format On Save，勾选对应选项，实现文件保存时自动触发格式化
• 如果要让配置仅在当前Angular项目生效，可以把上述规则写到项目根目录的.vscode/settings.json文件中，配置内容参考：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Prettier格式化规则配置 #

在项目根目录新建.prettierrc配置文件，写入如下规则，核心开启函数参数强制换行配置，实现构造函数依赖注入参数自动每个单独占一行的效果：

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 120,
  "bracketSameLine": false,
  "wrapFunctionParameters": "always",
  "plugins": ["prettier-plugin-organize-imports"]
}

注意：wrapFunctionParameters是Prettier 3.1.0及以上版本支持的规则，设置为always后，所有普通函数、类构造函数的参数都会强制按单个参数一行排版，完全匹配Angular依赖注入场景的格式化需求。

效果验证 #

测试时可以先写一个所有参数挤在同一行的Angular构造函数：

constructor(private userSvc: UserService, private authSvc: AuthService, private router: Router, private fb: FormBuilder) {}

按下格式化快捷键Shift+Alt+F（Windows）/Shift+Option+F（Mac）后，代码会自动排版为如下格式：

constructor(
  private userSvc: UserService,
  private authSvc: AuthService,
  private router: Router,
  private fb: FormBuilder,
) {}

如果配置后不生效，先执行npx prettier -v查看本地Prettier版本，版本号低于3.1.0时重新执行最新版安装命令即可。

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