https://github.com/avin/vscode-split-spaced-strings
Toggle single-line to multi-line string formats
https://github.com/avin/vscode-split-spaced-strings
vscode-extension
Last synced: 18 days ago
JSON representation
Toggle single-line to multi-line string formats
- Host: GitHub
- URL: https://github.com/avin/vscode-split-spaced-strings
- Owner: avin
- License: mit
- Created: 2025-12-18T18:52:47.000Z (24 days ago)
- Default Branch: master
- Last Pushed: 2025-12-21T10:17:41.000Z (22 days ago)
- Last Synced: 2025-12-21T21:41:21.399Z (21 days ago)
- Topics: vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=c75.split-spaced-strings
- Size: 739 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Split Spaced Strings
Toggle between single-line and multi-line string formats with a simple keyboard shortcut. Perfect for working with CSS classes, particularly Tailwind CSS, and improving code readability.
## Features
- **Smart String Detection**: Automatically detects if your cursor is inside a string literal (single quotes, double quotes, or template literals)
- **One-Key Toggle**: Seamlessly switch between single-line and multi-line formats
- **Word-Per-Line Splitting**: Each word in the string gets its own line for better readability
- **Preserves Indentation**: Maintains proper code indentation when splitting strings
- **Reversible**: Toggle back and forth as many times as needed
- **Auto-Collapse on Save**: Optional feature to automatically collapse split strings back to single line when saving (disabled by default)
- **Visual Tracking**: Split strings are highlighted with a subtle background color to indicate they will be auto-collapsed on save
## Use Cases
Perfect for:
- **Tailwind CSS Classes**: Manage long className strings in React/JSX
- **CSS Classes**: Organize multiple class names
- **String Lists**: Any space-separated string that becomes hard to read when long
- **Code Review**: Make strings more readable before committing
## Usage
### Keyboard Shortcut
Press `Alt+Shift+S` with your cursor inside any string literal.
### Command Palette
1. Open Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`)
2. Type "Toggle Split/Merge String"
3. Press Enter
### Customizing the Keyboard Shortcut
1. Go to `File` → `Preferences` → `Keyboard Shortcuts` (or press `Ctrl+K Ctrl+S`)
2. Search for "Toggle Split/Merge String"
3. Click on the current keybinding and assign your preferred shortcut
## Settings
### Auto-Collapse on Save
By default, split strings remain in their multi-line format. However, you can enable automatic collapsing back to single line when saving the file:
1. Open Settings (`Ctrl+,` or `Cmd+,`)
2. Search for "Split Spaced Strings"
3. Enable "Auto Collapse On Save"
Or add to your `settings.json`:
```json
{
"splitSpacedStrings.autoCollapseOnSave": true
}
```
When enabled:
- Any string you split using `Alt+Shift+S` will be highlighted with a subtle yellow background
- When you save the file (`Ctrl+S`), all highlighted strings will automatically collapse back to single line
- This is useful for temporary formatting while editing, ensuring committed code stays compact
### Customizing Highlight Appearance
You can customize how split strings are highlighted in the editor. All color values support CSS color formats (hex, rgba, etc.):
```json
{
"splitSpacedStrings.highlightBackgroundColor": "rgba(255, 200, 0, 0.1)",
"splitSpacedStrings.highlightBorderColor": "rgba(255, 200, 0, 0.3)",
"splitSpacedStrings.highlightBorderWidth": "1px",
"splitSpacedStrings.highlightBorderStyle": "solid",
"splitSpacedStrings.overviewRulerColor": "rgba(255, 200, 0, 0.5)",
"splitSpacedStrings.overviewRulerLane": "right",
"splitSpacedStrings.highlightWholeLine": true
}
```
**Available Settings:**
- **highlightBackgroundColor**: Background color for highlighted split strings (default: `rgba(255, 200, 0, 0.1)`)
- **highlightBorderColor**: Border color for highlighted split strings (default: `rgba(255, 200, 0, 0.3)`)
- **highlightBorderWidth**: Border width (default: `1px`)
- **highlightBorderStyle**: Border style - `solid`, `dashed`, `dotted`, `double`, or `none` (default: `solid`)
- **overviewRulerColor**: Color for markers in the editor scrollbar (default: `rgba(255, 200, 0, 0.5)`)
- **overviewRulerLane**: Position of scrollbar markers - `left`, `center`, `right`, or `full` (default: `right`)
- **highlightWholeLine**: Highlight the entire line width or just the text range (default: `true`)
## Example
```tsx
// Before
// After splitting (Alt+Shift+S)
```
## Supported String Types
- Single quotes: `'string'`
- Double quotes: `"string"`
- Template literals: `` `string` ``
All string types work with both single-line and multi-line formats.
## Smart Quote Conversion
The extension intelligently handles quote types based on the programming language:
### JavaScript / TypeScript / JSX / TSX
- **On Split**: Converts `'` or `"` → `` ` `` (template literals) for proper multiline support
- **On Merge**: Restores original quotes (`'` or `"`) if no template features are used
- **Keeps backticks**: When template interpolation like `${...}` is detected
- **JSX Attributes**: Preserves double quotes in JSX attributes (multiline is allowed)
**Example:**
```javascript
// Original
const msg = 'hello world test';
// After split - uses backticks
const msg = `
hello
world
test
`;
// After merge - restores single quotes
const msg = 'hello world test';
// With template interpolation - keeps backticks
const msg = `hello ${name} test`; // Won't convert back to single quotes
```
### Python
- **On Split**: Converts `'` or `"` to `"""` for multiline strings
- **On Merge**: Restores original quotes if no interpolation features are used
### Go
- **On Split**: Converts `"` → `` ` `` (raw string literals)
- **On Merge**: Restores `"` if no special features used
### C#, Java, Kotlin
- **On Split**: Converts `"` to `"""` for multiline strings
- **On Merge**: Restores `"` if no special features are used
### PHP, Ruby
- Preserves original quote type
- Detects variable interpolation (`$variable`, `#{...}`) and maintains appropriate quotes
### Other Languages
- Works with any language
- Preserves original quote type by default