VS Code中TypeScript长类型列表保存时无法自动换行格式化求助

问题 #

我的TypeScript类型导出保存后一直是单行：

export type { IRegister, ILogin, IActivation, UserExtended, SessionExtended, JWTExtended }

我想要保存后自动变成这种多行格式：

export type {
  IRegister,
  ILogin,
  IActivation,
  UserExtended,
  SessionExtended,
  JWTExtended
}

我没装Prettier，想问是不是只有Prettier能实现这个？以下是我当前的VS Code配置：

"js/ts.suggest.paths": false,
"js/ts.format.semicolons": "remove",
"[javascript][javascriptreact][typescript][typescriptreact]": {
  "editor.tabSize": 2,
  "js/ts.suggest.enabled": true,
  "js/ts.preferences.quoteStyle": "single",
  "editor.defaultFormatter": "vscode.typescript-language-features",
  "js/ts.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "js/ts.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
}

答案 #

当然不是只有Prettier能做到，VS Code内置的TypeScript语言服务本身就支持这个格式化规则，你只需要在现有配置里添加几个设置项：

需要添加的配置 #

在你的[javascript][javascriptreact][typescript][typescriptreact]配置块里，加入以下内容：

"typescript.format.placeOpenBraceOnNewLineForObjectLiteral": true,
"editor.wordWrapColumn": 80,
"typescript.format.insertSpaceAfterCommaDelimiter": true

更新后的完整配置 #

"js/ts.suggest.paths": false,
"js/ts.format.semicolons": "remove",
"[javascript][javascriptreact][typescript][typescriptreact]": {
  "editor.tabSize": 2,
  "js/ts.suggest.enabled": true,
  "js/ts.preferences.quoteStyle": "single",
  "editor.defaultFormatter": "vscode.typescript-language-features",
  "js/ts.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "js/ts.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "typescript.format.placeOpenBraceOnNewLineForObjectLiteral": true,
  "editor.wordWrapColumn": 80,
  "typescript.format.insertSpaceAfterCommaDelimiter": true
},

配置说明 #

• typescript.format.placeOpenBraceOnNewLineForObjectLiteral: 控制对象字面量（包括类型导出的大括号）的左大括号换行，同时让每个成员单独占一行
• editor.wordWrapColumn: 设置行宽阈值，当单行代码超过这个宽度时，内置格式化器会自动触发换行
• typescript.format.insertSpaceAfterCommaDelimiter: 确保每个逗号后有空格，让多行格式更整齐

保存配置后，下次保存TS文件时，类型导出就会自动变成你想要的多行格式了。

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