VS Code与VS(Resharper)的TSX格式化对齐问题：return语句格式异常

我之前也跟你一样，为了让VS Code和装了Resharper的VS在TSX格式化上完全对齐折腾过一阵，大部分设置都搞定后，就卡在return语句的JSX格式上了——还好找到几个靠谱的解决办法：

方案一：用Prettier精准匹配（推荐） #

如果你的项目用Prettier做格式化工具，这是最省心的方式：

• 在项目根目录新建或编辑.prettierrc配置文件，加入这些参数：

  {
    "printWidth": 120, // 可以根据你Resharper里的换行宽度调整
    "bracketSameLine": true, // 核心配置！让JSX起始标签的闭合>和内容在同一行，和Resharper对齐
    "trailingComma": "es5",
    "arrowParens": "always",
    "jsxSingleQuote": false
  }
  

  其中bracketSameLine是关键，它会让<div>直接跟后续内容，而不是自动换行，完美匹配你想要的格式。

方案二：调整VS Code自带的TypeScript格式化设置 #

要是你没用Prettier，用的是VS Code内置的TypeScript formatter，可以直接改编辑器设置：

• 按Ctrl+,打开设置面板，搜索typescript.format，找到以下选项并开启：
  • TypeScript > Format: Place Open Brace On Same Line As Control Block
  • TypeScript > Format: Place Open Brace On Same Line As Function
• 再调整Editor: Word Wrap Column到和Resharper一致的数值，避免不必要的换行。

方案三：用ESLint强制格式规范 #

如果项目依赖ESLint，也可以通过规则来约束：

• 在.eslintrc文件里添加react/jsx-closing-bracket-location规则：

  {
    "rules": {
      "react/jsx-closing-bracket-location": [1, "line-aligned"]
    }
  }
  

  这个规则会强制JSX的闭合括号和起始标签保持在同一行，和Resharper的风格统一。

设置完后，按Ctrl+Shift+I格式化你的TSX文件，应该就能得到你期望的格式了：

public render() { 
  return <div> 
    <div>Test</div> 
    {this.props.Model.arr.map((value, index) => { 
      return <div className="test" key={index}> 
        <div>{value.test}</div> 
      </div>; 
    })} 
  </div>; 
}

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