在IntelliJ WebStorm中配置Angular/TypeScript编辑器格式化样式

Got it, I totally get what you're asking for—you want WebStorm's Ctrl+Alt+L formatting to keep spaces around braces (like between method parentheses and curly braces, or inside object literals) instead of stripping them all out. Let's walk through the exact configuration steps, covering both the IDE's built-in formatter and ESLint (the recommended approach for Angular projects).

Option 1: Use WebStorm's Built-in TypeScript Formatter #

This works if you prefer relying on the IDE's native rules instead of project-level linters:

1. Open WebStorm Settings: Press Ctrl+Alt+S (Windows/Linux) or Cmd+, (Mac)
2. Navigate to Languages & Frameworks > TypeScript > Code Style > TypeScript
3. Switch to the Spaces tab and enable these key options:
   • Under Within:
     • ✅ Braces of object literals (ensures spaces inside object braces: { key: value } instead of {key:value})
     • ✅ Braces of blocks (adds a space between method parentheses and curly braces: foo() { ... } instead of foo(){ ... })
   • Under Around (optional, if you want empty objects to have space):
     • ✅ In empty object literal (makes empty objects { } instead of {})
4. Head to the Wrapping and Braces tab to confirm your brace placement style (like K&R style: End of line)—this keeps formatting consistent without breaking your space preferences
5. Hit Apply then OK. Now test with Ctrl+Alt+L—your spaces should stay intact!

Option 2: Use ESLint (Recommended for Angular Projects) #

Angular CLI sets up ESLint by default these days, and using it ensures your formatting matches project-wide rules. Here's how to configure the space rules:

1. Open your project's root .eslintrc.json (or .eslintrc.js) file
2. Add these rules to the rules section to enforce your space preferences:

   {
     "rules": {
       "space-before-blocks": "error", // Mandates space before curly braces for blocks/methods
       "object-curly-spacing": ["error", "always"], // Requires spaces inside object literals
       "space-in-parens": ["error", "never"], // Optional: No spaces inside parentheses (adjust if you prefer otherwise)
       "func-call-spacing": ["error", "never"] // Optional: No space between function name and parentheses
     }
   }
   

3. Go back to WebStorm Settings: Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
4. Make sure Enable is checked, and toggle on Run eslint --fix on code reformat—this tells WebStorm to use ESLint's rules when you hit Ctrl+Alt+L
5. Save your config and restart WebStorm if needed. Now formatting will align with your ESLint space rules.

Test the Result #

Before formatting:

const user={name:"Klaus"};
function greet(){return "Hello Angular!";}

After formatting (with either setup):

const user = { name: "Klaus" };
function greet() { return "Hello Angular!"; }

If you need to tweak other space behaviors (like around operators or commas), you can adjust more options in the Spaces tab (for built-in formatter) or add additional ESLint rules.

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