Vscode: Expand selection and shrink selection in HTML

[oliverjanik]

Continuing from here: #495

Expand Select and shrink select work OK in typescript, json and JS. It seems it's not implemented for HTML.

[joaomoreno]

@jrieken ping

[esko]

Seconding this. It would be useful for both selecting content inside HTML element and selecting attribute values/names.

[oliverjanik]

And extending selection hierarchically up the element tree.

[sortegam]

+1

[JimNewkirk]

Let me upvote this as strongly as possible. HTML is so highly structured, and in such a variety of ways, that selection of specific tags and strings is really crucial to working quickly and well. Without this feature, editing becomes not just unhandy, but too error-prone for my purposes. It would transform the utility of the editor if the same selection abilities were present in HTML as in other languages.

[oliverjanik]

If anyone is looking for a reference Resharper for Visual Studio does this really well.

[bodiam]

IntelliJ is also quite at this, but Visual Studio code is quite lacking in this. I'm commenting on this because expand selection is my most used shortcut in IntelliJ, and I tried the same in Visual Studio Code, just to find out it's basically not working. I'm hoping someone might find the time to improve this feature.

[kaiwood]

Just in case it helps someone, I link to my answer to this topic from Stackoverflow a while ago: http://stackoverflow.com/questions/40949929/how-do-i-select-the-insides-of-div-in-visual-studio-code/40971959#40971959

It's not perfect, but with this keybinding setup, you basically use Emmet's selection / balancing commands in HTML files and standard shrink / grow for everything else. Works for me, the only caveat is that you can't "shrink back" to the selected attributes.

[JimNewkirk]

Very helpful, kaiwood - thanks.

[mtunad]

In case if anyone out there is still looking for this feature, see expand-region extension. It might help at the moment.

[Maxhodges]

+1 two years on and this feature still sucks. it skips many levels of hierarchy in HTML, going from current link to entire file instead of climbing nested levels of tags. IntelliJ (Webstorm) does this right.

[scottbickell]

Any updates on this? Expand selection is terrible. In an HTML doc, the selection goes from one word, one line, to entire document. As @Maxhodges said, IntelliJ IDEs do this right and it is one of the main reasons I continue to use their products instead of VS Code. Come on people, figure it out.

[TranMacTien]

nice!

[Maxhodges]

can I pay money to someone to make this happen?

[Maxhodges]

I documented the difference between webstorm and vscode expand select here in animated gifs

https://github.com/Microsoft/vscode/issues/4795#issuecomment-346622659
seems comment maybe be folded (expand hidden comments)

[anantoghosh]

@Maxhodges @scottbickell use emmet's balance in/out instead for html/jsx.
as mentioned in https://github.com/Microsoft/vscode/issues/1808#issuecomment-267956024
(balance in is still broken.)

Try it from the command menu.

You can add shortcut for it as required.

  {
    "key": "shift+alt+right",
    "command": "editor.emmet.action.balanceOut",
    "when": "editorTextFocus && editorLangId == html && editorHasSelection"
  },
  {
    "key": "shift+alt+left",
    "command": "editor.emmet.action.balanceIn",
    "when": "editorTextFocus && editorLangId == html && editorHasSelection"
  },
  {
    "key": "shift+alt+right",
    "command": "editor.emmet.action.balanceOut",
    "when": "editorTextFocus && editorLangId == javascriptreact && editorHasSelection"
  },
  {
    "key": "shift+alt+left",
    "command": "editor.emmet.action.balanceIn",
    "when": "editorTextFocus && editorLangId == javascriptreact && editorHasSelection"
  },
  {
    "key": "shift+alt+right",
    "command": "editor.emmet.action.balanceOut",
    "when": "editorTextFocus && editorLangId == typescriptreact && editorHasSelection"
  },
  {
    "key": "shift+alt+left",
    "command": "editor.emmet.action.balanceIn",
    "when": "editorTextFocus && editorLangId == typescriptreact && editorHasSelection"
  },

[Maxhodges]

@anantoghosh that's kind of rubbish for me. Try on something with quotes. It should do word, the string inside quotes, then string with quotes
and when retracting it resolves to another string entirely

[anantoghosh]

I have created an issue for this https://github.com/Microsoft/vscode/issues/49777
let's see if we make any progress.
Balance out selection should be improved as well. Maybe create a new issue for that.

[octref]

Currently, you can run "Emmet: Balance (ourward)" or "Emmet: Balance (inward)" command for this functionality.

There's plan to support Expand Selection for all languages, and we'll do it for HTML/CSS using emmet.

You can track the new feature in: https://github.com/Microsoft/vscode/issues/65925

[Maxhodges]

sorry @octref but you misunderstand. Emmet outward falls very short of a good solution. Can you jump on a conference call so I can demo what you are failing to understand? I've documented this over and over. Emmet only considers tags, not text elements. In Webstorm it will expand to the current word, then words within quotes, then include the quotes, then the tag. Emmet just grabs everything in the tag. Often we use this to grab a word, or a string with or without quotes.

here's how Webstorm does it. (as I've already documented elsewhere over a year ago, but clearly you're not paying attention to specifics.

Users shall be able to successively select expanding logical blocks of code so that you can easily select any expression in the code by placing the caret somewhere inside it and pressing a shortcut.

Extends selection to the next containing node (for example, an expression, a paired tag, an entire conditional block, a method body, a class, a group of vararg arguments, etc.)

In plain text, with the caret anywhere in a word, the selection would extend to to the word, the sentence, the paragraph

Shrink does the opposite.

[Maxhodges]

@octref try this with Emmet Balance in/out! It fails miserably. Please don't forget to reopen the issue when you are done.

[oliverjanik]

Thank you @Maxhodges for investing time into this. I too feel strongly about good syntax aware expand/shrink selection, but it seems mostly ignored brushed off by people who have not experienced the joy of using it.

[octref]

@Maxhodges JavaScript/TypeScript balance outward will be provided by TypeScript language service. See https://github.com/Microsoft/vscode/issues/4795.

I'll start with Emmet and improve it later to have more granularity.

[octref]

This will be available in tomorrow's insiders:

Feel free to open new issues if something doesn't work as expected.

[oliverjanik]

Fantastic news!

[Maxhodges]

looking forward to it!