In JSX does not create new line between tags with right indentation after heating enter - visual-studio-code

In .js or .jsx I have strange behaviour. When I have cursor between tags and press enter the vscode does not create empty line between tags and put cursor back to empty line with right indentation. It moves tag to new line. Then I have to create manually empty line between tags and indentation.
Actually is does behave as it should when tag does not have any attributes. But when ever I pass any attribute to tag it start to behave as I mentioned above. Have to mention that in .html files it behaves as expected even with attributes in tags.
I have tried to disable all extensions, install insiders versions but getting the same behaviour.

Related

How to prevent VS Code from deleting the next word characters on IntelliSense auto-completion?

This question is analogous to How to keep Visual Studio autocomplete from overwriting the next word,
but targeted at Visual Studio Code instead of Visual Studio.
When a completion suggestion is selected from the list, it is inserted, but all characters from the word after the cursor are deleted. (So, nothing happens if there is a whitespace after the cursor. But if autocompletion is triggered while the cursor is placed at the beginning of a word, said word will be deleted).
Is there a way to disable this deletion behavior and get it to add the selected suggestion without deleting text to the right of the caret?
Check your settings.json files (your user settings.json and your workspace .vscode/settings.json).
You probably have a line that says:
"editor.suggest.insertMode": "replace"
You can either delete it to get the default behaviour, which is "insert" instead of "replace", or just change it to "insert".
The setting's description says:
Controls whether words are overwritten when accepting completions. Note that this depends on extensions opting into this feature.
The "insert" value's description says:
Insert suggestion without overwriting text right of the cursor.
The "replace" value's description says:
Insert suggestion and overwrite text right of the cursor.
For some languages, the default might be changed. You can check all default settings by viewing the defaultSettings.json file using the Preferences: Open Default Settings (JSON) command.
To set settings per-language, enclose them in blocks like this (example for C++):
"[cpp]": {
"editor.suggest.insertMode": "insert"
}

How can I make Visual Studio Code suggest tab-completions for any previous line in the file?

I want visual studio code to suggest an autocompletion for an entire line if I start typing the first few characters of any line already in the file, regardless of the content of the existing line. So if this is the content of my file:
this is a line with whitespace
this,is,a,comma,separated,list
And I type this on a new line, I would get a pop-up like any other autocomplete suggestion and I could fill in either of the lines above. How can I do this (and if I can't, is there another editor that has this ability)?
The extension Line Completion does what you want.
You have to configure for which files (language identifiers) it should perform these suggestions. (To prevent to much calculation on large files where you don't use it. See the README page.

Content of tags is not getting on the same line after certain point & it is getting added to the next line . How to get that content on the same line?

I am coding HTML & CSS in VS Code IDE. I have installed & enabled the prettier extension for better readability of the code & auto-indentation. but my content of tags is not going beyond that certain point on the screen & it is getting added to the next line whenever I save my code by Ctrl +S (example: see the last paragraph tag). How to get that content on the same line?
You shouldn't use Prettier if you don't need this behavior. That's what Prettier does: splits lines that are too long. See here https://prettier.io/docs/en/index.html

VSCode will copy full line when only a word is selected (single click)

I'm on OSX and running Version 1.42.0 of Visual Studio Code. I have noticed that when I single click a word it will highlight. But if I copy CMD + c and then paste CMD+v, the full line will be in the clipboard. This causes problems from time to time, when the screen has given me every indication that I have only selected a single word. Is there some setting that I can set that will make the default behavior to select a word on a single quote and never ghost select a full line?
What it looks like when I single click a word:
And what it looks like after I've copied and pasted:
After filing an issue, it turns out that this behavior is by design.
The word the cursor is on (from a single click) is highlighted along with every occurrence of that word. The word is not selected (that would be a deeper blue).
By default copying without a selection copies the current line.
This in my opinion is an Accessibility issue, as there are strong visual clues that a word is selected. I have found that the behavior can be made more intuitive if you set these to settings.
// Controls whether copying without a selection copies the current line.
"editor.emptySelectionClipboard": false,
// Controls whether the editor should highlight semantic symbol occurrences.
"editor.occurrencesHighlight": false
With these two settings the word the cursor is on will not be highlighted (nor any other occurrences of that word). And if you do happen to copy, with an empty selection, the editor will behave similar to how other applications behave and not copy the current line.

How do I modify the EL opening template in Eclipse?

Whenever I am working in a JSP file and I type ${ to start an el (Expression Language) tag, Eclipse will automatically add } (with a space before the closing brace) after the cursor so that I get ${ } instead of ${}.
Is there a code template in Preferences that I can modify to change this behavior, or is it beyond user preference control?
I have checked in Preferences: Web: JSP Files: Editor: Templates, but none of those templates match. I've also looked in several other sections in Preferences but haven't found anything promising.
What #Mero provided (see comments on answer above) might not be an exact answer, but creating a JSP Template probably the closest thing that I've found.
A few notes for anyone that wants to go that route:
Create a new template through menu Window->Preferences, then in the drill down menu navigate to Web->JSP Files->Editor->Templates. Click New.
Name is a shortcut you can type (the same way typing sysout ctrl+space in Java is a shortcut for System.out.println()). I suggest something simple like el. This allows you to type e l ctrl-space instead of $ { ctrl-space to pull it up.
Context tells it when it should appear in intellisense. I suggest creating two of this template where one has a context of JSP Attribute value and the other has a context of All JSP.
Description is just informative. Put whatever you want. I put 'EL Script' myself.
Pattern is where you put what will be inserted. Put $${${cursor}} or $${${script}}, depending on preference. See below for explanation on the differences.
In Eclipse Templates ${} is how you put variables in the template, so to make it actually print ${} you have to escape the $ with a $$ leading to $${}.
The predefined variable ${cursor} defines where the cursor is after intellisense replaces the el, so to have the cursor appear in between the curly braces you want to do this: $${${cursor}}.
Using any variable that is not predefined (in this case, ${script}) will simply put in that variable with a box around it and allow you to type over it and press enter when you're done, allowing you to move to the end of the closing curly brace.
Note: I understand that this is not an actual answer, but rather is a workaround. I'm putting it here simply so that those who are fine with a workaround can know how to go about doing it.
Edit
For those that don't like having to type ctrl-space, a workaround could be to have the template name start with< since on JSP pages, the < opens the intellisense, so for instance, you could have the name be <el or <$.
A workaround but not an answer:
Disable auto-close of EL tags. You type ${expression} and get ${expression}|, rather than typing ${expression and getting ${expression| }. (| denotes the cursor location)
See this answer, from when this same question was asked of Eclipse Kepler: https://stackoverflow.com/a/20258401/1021426