Visual Studio 2017 TypeScript代码格式化：JSX大括号空格设置求助

I’ve dealt with this exact formatting mismatch in older Visual Studio versions before! Here’s how to align your VS 2017 formatting with the team’s TSLint rule (jsx-curly-spacing": [true, "always"]) and keep spaces around JSX curly braces:

Step-by-Step Visual Studio Settings Adjustment #

1. Open the Options window: Go to Tools > Options (use the shortcut Alt+T, O if the menu is hidden).
2. Navigate to TypeScript formatting spacing settings: Expand Text Editor > TypeScript > Formatting > Spacing in the left sidebar.
3. Find the option labeled Insert space after opening and before closing non-empty brackets and check the box next to it.
4. Click OK to save changes. Now when you hit Ctrl+E, Ctrl+D to format your document, you’ll get the desired <div className={ classes.root }> instead of <div className={classes.root}>.

Fallback for Older VS Versions (If the Setting Is Missing) #

If your 15.5.3 build doesn’t have that specific formatting option (older TypeScript tooling can be limited), add an .editorconfig file to your project root to enforce the spacing rule across all editors:

[*.tsx]
space_in_paren = true
indent_style = space
indent_size = 2
# Add other team-standard formatting rules here if needed

This file will override local editor settings and ensure consistent formatting for all team members. You might need to install the EditorConfig for Visual Studio extension from the Marketplace for this to work properly.

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