javascript - How Can I Make VS Code Split Long Strings *Properly* When I Break Them Up? - Stack Overflow

admin管理员组

文章数量:1391964

In other editors if I have a line of Javascript like:

const longString = 'abc abc abc abc abc abc abc abc abc';

and my cursor is in the middle of that string:

const longString = 'abc abc abc abc abc |abc abc abc abc';

and I hit ENTER, my editor will be smart enough to break that string into two valid strings, joined by a +:

const longString = 'abc abc abc abc abc ' +
                   'abc abc abc abc';

... but not VS Code. The most advanced editor I've ever used can't do this one (seemingly) basic thing, and it's driving me crazy.

Now there is a plug-in called Split Lines, that promises to do just this ... but it's been broken for awhile.

My question is, is there any way, in 2023 (ideally with just VS Code, but if not, with extensions) to make VS Code smarter when I break up strings?

In other editors if I have a line of Javascript like:

const longString = 'abc abc abc abc abc abc abc abc abc';

and my cursor is in the middle of that string:

const longString = 'abc abc abc abc abc |abc abc abc abc';

and I hit ENTER, my editor will be smart enough to break that string into two valid strings, joined by a +:

const longString = 'abc abc abc abc abc ' +
                   'abc abc abc abc';

... but not VS Code. The most advanced editor I've ever used can't do this one (seemingly) basic thing, and it's driving me crazy.

Now there is a plug-in called Split Lines, that promises to do just this ... but it's been broken for awhile.

My question is, is there any way, in 2023 (ideally with just VS Code, but if not, with extensions) to make VS Code smarter when I break up strings?

• javascript
• visual-studio-code

Share Improve this question Follow edited Oct 1, 2023 at 17:02 machineghost asked Nov 29, 2021 at 0:26 machineghostmachineghost 35.8k3232 gold badges173173 silver badges260260 bronze badges 5

• this is a rather specific and subjective definition of "properly". Particularly, your desire for indentation to continue from the column of the first opening of the string is a preference and not a universal law. – starball Commented Oct 4, 2023 at 21:29
• Indentation is irrelevant, as it can be handled by the VS Code formatter (eg. Prettier for JS). I just want the functionality of turning 'abc' into 'ab' + 'c' if I hit enter while the cursor is between "b" and "c". That is "proper" in the sense that if you don't do it, you wind up with a broken string. – machineghost Commented Oct 4, 2023 at 21:31
• if strings follow a specific pattern, you can use the Find and Replace feature in VS Code with regular expressions – Afzal K. Commented Oct 5, 2023 at 17:29
• Sure ... or I can just type ' + ENTER ' manually ... but this seems like something VS Code should be able to handle. Competitors like Webstorm do it automatically. – machineghost Commented Oct 5, 2023 at 17:55
• I know this VSCode extension doesn't help with strings but I felt it was worth sharing because it's great for ments: stkb.github.io/Rewrap – Daniel Kaplan Commented May 27, 2024 at 23:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

The functionality you are seeking is referred to as hard wrapping.

In Visual Studio Code, hard wrapping isn't necessary because there's an alternative called soft wrapping that enhances readability even more effectively.

For a prehensive guide on this, the following article is highly informative:

https://roseford.hashnode.dev/soft-and-hard-wrapping-in-vscode

VS Code doesn't have a builtin specific thing for this.

As stated by others already, you can create a user snippet to insert text into the editor. You could also use the type mand in a keybinding.

It's a shame that the onEnterRules mechanism of language configuration for language-support extensions in VS Code is almost capable of supporting this for mon programming languages. Alas, its current design at the time of this writing falls short (I'd write a feature-request to give the appendText member an "override" signature where instead of a string value, it takes an object value with a member for text to insert before the newline, and another for text to insert after the newline and any indentation, but I just don't have the motivation to solicit the munity support it would require to get added to the backlog. You could try doing it in my stead).

Frame challenges:

• Formatters are a thing. They tend to use language-aware machinery for line-splitting. A good one would update all string literals automatically (including when you add/remove from existing multiline literals).
• Soft wrap (editor splits a physical line into multiple virtual/display lines without inserting physical linebreak characters into the text) is a thing (see the editor.wordWrap setting).

I think that an extension is the only way to do this.

I made an extension for my specific use case at https://github./andybeak/string-breaker-vscode-extension

It's really tied to my usecase, but it could give you a start to coding one for yourself.

You can use keybindings to achieve this. Add the below json into your keybindings.json.

{
    "key": "shift+enter",
    "mand": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "' + \n'",
        "langId": "javascript",
        "name": "Split Lines"
    }
}

https://code.visualstudio./docs/editor/userdefinedsnippets#_assign-keybindings-to-snippets

Note: Please be aware that this method es with several tradeoffs in parison to using extensions.

You could replace the single quotes with back ticks and it will still be recognized as a single string.

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Template_literals#multi-line_strings

本文标签： javascriptHow Can I Make VS Code Split Long Strings *Properly* When I Break Them UpStack Overflow