如何配置.prettierrc以匹配VSCode内置TypeScript格式化规则？

VSCode内置的vscode.typescript-language-features格式化工具基于TypeScript官方的代码格式化逻辑，没有对外暴露可自定义的明细配置项，但可以通过Prettier的配置来匹配它的核心行为，同时也有替代方案解决团队配置冲突问题。

一、核心Prettier配置（.prettierrc） #

以下配置能覆盖内置格式化的绝大多数规则：

{
  "printWidth": 80,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

关键规则匹配说明： #

• tabWidth: 4：内置格式化默认使用4空格缩进
• singleQuote: false：默认采用双引号
• trailingComma: "es5"：仅在ES5允许的对象/数组末尾添加逗号
• arrowParens: "always"：箭头函数参数始终保留括号
• bracketSameLine: false：JSX标签闭合括号单独换行（和内置TSX格式化逻辑一致）

二、TSX文件专属配置 #

如果需要针对React TSX文件做更精准的匹配，添加overrides配置：

{
  "overrides": [
    {
      "files": ["*.tsx"],
      "options": {
        "parser": "typescript",
        "jsxSingleQuote": false,
        "jsxBracketSameLine": false
      }
    }
  ]
}

三、替代方案：使用工作区级VSCode配置 #

若不想切换到Prettier，可通过项目工作区配置来避免修改全局settings.json，只作用于当前项目：

1. 在项目根目录创建.vscode/settings.json文件
2. 写入以下内容：

{
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

将该文件提交到Git仓库，团队成员拉取项目后，VSCode会自动加载工作区配置，不会影响其他项目的格式化规则。

四、验证效果 #

拿示例代码对比：
原代码：

const App = () => {
return <div className="app">Hello World</div>
}

内置格式化后：

const App = () => {
    return <div className="app">Hello World</div>;
};

配置后的Prettier格式化结果完全一致。

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