Configuring HTML Attribute Wrapping in VSCode Based on Line Length

The html.format.wrapAttributes setting in VSCode doesn’t have a direct “auto-expand-multiline” option, but you can achieve similar behavior using "aligned-multiple" which only wraps attributes when line length is exceeded while maintaining each attribute on a separate line. For PHP files specifically, you can configure language-specific settings or extensions that handle HTML formatting independently from your main formatter.

Contents

• Understanding Wrap Attributes Options
• Configuring Line Length Threshold
• PHP and DEVSENSE Specific Solutions
• Advanced Configuration Techniques
• Troubleshooting and Best Practices

Understanding Wrap Attributes Options

VSCode offers several values for the html.format.wrapAttributes setting, each controlling how HTML attributes are formatted:

• "auto": Wraps attributes only when line length is exceeded (controlled by html.format.wrapLineLength)
• "force": Wraps each attribute except the first one
• "force-aligned": Wraps each attribute except the first and keeps them aligned
• "force-expand-multiline": Wraps every attribute, regardless of line length
• "aligned-multiple": This is likely what you need - wraps when line length is exceeded, aligns attributes vertically
• "preserve": Preserves existing wrapping of attributes
• "preserve-aligned": Preserves wrapping but ensures alignment

For your case, try using "aligned-multiple" instead of "force-expand-multiline":

{
  "html.format.wrapAttributes": "aligned-multiple"
}

This setting will only wrap attributes to new lines when they exceed your specified line length threshold, but will maintain the vertical alignment when wrapping occurs.

Configuring Line Length Threshold

The html.format.wrapLineLength setting works in conjunction with wrap attributes to control when wrapping occurs. By default, this is set to 120 characters, but you can customize it:

{
  "html.format.wrapAttributes": "aligned-multiple",
  "html.format.wrapLineLength": 100
}

This configuration will:

• Only wrap attributes when the line exceeds 100 characters
• Place each wrapped attribute on a new line
• Keep the attributes vertically aligned

Note: The wrapLineLength setting counts from the start of the line, including indentation. So a line with 4 spaces of indentation and 96 characters of content would trigger wrapping at a 100-character threshold.

For more precise control over alignment when using "aligned-multiple" or "force-aligned", you can also configure:

{
  "html.format.wrapAttributesIndentSize": 2
}

This controls how many spaces are used for alignment when attributes are wrapped.

PHP and DEVSENSE Specific Solutions

Since you’re using DEVSENSE for PHP formatting but want HTML-specific behavior, here are several approaches:

1. Language-Specific Settings Configuration

You can create language-specific settings that only apply to HTML within PHP files:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "html.format.wrapAttributes": "aligned-multiple",
    "html.format.wrapLineLength": 100
  },
  "[php]": {
    "editor.formatOnSave": false
  }
}

This configuration:

• Uses VSCode’s built-in HTML formatter for .html files
• Disables auto-formatting for PHP files to preserve DEVSENSE’s behavior
• Allows manual formatting of HTML sections within PHP files when needed

2. Workspace-Specific Settings

Create a .vscode/settings.json file in your project directory with PHP-specific overrides:

{
  "html.format.wrapAttributes": "aligned-multiple",
  "html.format.wrapLineLength": 100,
  "files.associations": {
    "*.php": "html"
  }
}

Warning: The files.associations approach may interfere with PHP syntax highlighting and other language features, so use it cautiously.

3. Extension-Based Solutions

Consider using extensions that provide more granular control:

• Prettier with HTML-specific configuration: Configure Prettier to handle HTML formatting differently within PHP files
• Auto Rename Tag: Works well with various formatters and can help maintain consistency
• HTML CSS Support: Provides better HTML formatting capabilities within mixed files

Advanced Configuration Techniques

Working with Multiple Formatters

If you need to use both DEVSENSE and VSCode’s HTML formatter, you can configure them to work together:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "DEVSENSE.extension",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "html.format.wrapAttributes": "aligned-multiple",
  "html.format.wrapLineLength": 100
}

This setup:

• Uses DEVSENSE as the default formatter for most files
• Switches to VSCode’s HTML formatter for .html files
• Maintains your preferred wrap behavior for HTML files

Manual Formatting Control

For cases where you want to control formatting manually:

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.format": true
  }
}

This allows you to trigger formatting manually with Shift+Alt+F (Windows/Linux) or Shift+Option+F (Mac) when you want it, rather than having it happen automatically on save.

Troubleshooting and Best Practices

Common Issues and Solutions

Issue: Settings not working in PHP files

• Solution: Check if there’s a workspace-specific .vscode/settings.json overriding your user settings
• Solution: Verify that DEVSENSE isn’t intercepting the formatting commands

Issue: Attributes still wrapping too aggressively

• Solution: Increase the wrapLineLength value to a higher threshold
• Solution: Try different wrapAttributes values like "auto" for less aggressive wrapping

Issue: Alignment not working as expected

• Solution: Adjust html.format.wrapAttributesIndentSize
• Solution: Check for conflicting settings from extensions

Testing Your Configuration

Create a test HTML file to verify your settings work as expected:

<div class="container" id="main" data-test="some-value" aria-label="example">
  Content
</div>

Apply formatting with Shift+Alt+F and observe how the attributes are handled based on your configuration settings.

Recommended Final Configuration

Based on your requirements, here’s the recommended configuration:

{
  "html.format.wrapAttributes": "aligned-multiple",
  "html.format.wrapLineLength": 120,
  "html.format.wrapAttributesIndentSize": 2,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[php]": {
    "editor.formatOnSave": false
  }
}

This configuration:

• Only wraps attributes when line length is exceeded
• Maintains vertical alignment when wrapping occurs
• Preserves DEVSENSE’s behavior for PHP files
• Uses VSCode’s built-in HTML formatter for .html files

Conclusion

To configure HTML attribute wrapping in VSCode based on string length rather than attribute count:

1. Use "aligned-multiple" instead of "force-expand-multiline" to only wrap when line length is exceeded
2. Configure html.format.wrapLineLength to set your preferred character threshold (default is 120)
3. Set up language-specific settings to maintain DEVSENSE’s PHP formatting while controlling HTML behavior
4. Test your configuration with sample HTML code to ensure it behaves as expected

The key insight is that VSCode doesn’t offer a direct “minimum attribute count” parameter, but "aligned-multiple" provides the behavior you’re looking for by only triggering wrapping when the line length threshold is exceeded, while still placing each attribute on a separate line when wrapping does occur.

For PHP files specifically, the language-specific settings approach allows you to maintain DEVSENSE’s overall formatting control while still getting the HTML attribute wrapping behavior you prefer when needed.

Sources

1. HTML in Visual Studio Code - Official Documentation
2. Getting rid of VSCode’s attribute wrapping in HTML files
3. Visual Studio Code - Wrap HTML attributes each on their own line
4. VSCode settings ideal for Developers
5. Disable HTML attribute alignment in Visual Studio Code