I'm new to VS. I've looked around, and can't find anything about this:
When typing an html tag, typing the start of a valid attribute name such as href correctly hints it, but does not add the ="" after the attribute, and I always have to type it myself.
Coming from other editors where it add the equal and quotes and places the editing caret between the quotes, this is annoying.
Am I missing the proper way to do this? Or is there anything I need to do, customization-wise?
I think it has something to do with the way you should use VS, in general you don't have to press enter or tab to complete your keyword(like some of the other editors), you can for example do this:
begin writing href and when you find that it is the one hilighed in the autocompletion window press =
similarly for Tags, begin wirting with < and when you find what you search press > and the requiered tags would be created.
I hope this helps you.
Make sure the 'Insert attribute value quotes when typing' option is selected in Tools -> Options -> Text Editor -> HTML -> Formatting.
Once selected, your attribute name and quotes will automatically be inserted whenever you type the start of an attribute followed by the = key. Your cursor will be positioned within the quotes so that you can type the value.
Example
Type <a hr and press =.
The attribute name will be completed for you, double quotes will be appended, and your cursor will be positioned within them so that you can start typing the value immediately.
Related
Whenever I add attributes to html elements like 'class' or 'id', VSCode automatically input two double quotes right after I type '=':
<div class='modal-header' id=""></div>
As you can see from the 'class', I prefer single quote, so I had to delete the automatically added double quotes.
Where can I tweak this feature?
Thanks!
Lubbie
Seems like vscode has recently implemented a feature that auto-inserts quotes into html if you type something=.
I was struggling the last few days over and over again because my finger memory is so used typing in the opening quote manually. I always ended up with something like class=""button or id=""stuff"". Not cool.
Anyways, I found the setting that can control it.
Search for html.autoCreateQuotes and disable it.
Then you'll have to type the opening quote manually and it will work with single quote too.
If you actually like the feature and want it to insert single quotes, change the setting html.completion.attributeDefaultValue.
You can change it to single quotes in >File >Preferences >Settings >Search
html.completion.attributeDefaultValue
and set the dropdown to
singlequotes
Did you ever find a solution? When I type <div className= and then hit tab, it autocompletes like this...
This is in a .tsx file, and I have the following configuration...
html.completion.attributeDefaultValue "doublequotes"
and I use prettier for formatting, with singlequote set to true.
I would like all my javascript/typescript code to use single quotes, but html attributes to be double quotes. For some reason VS Code is not inserting double quotes on the tab completion.
When I save (auto formatting), the single quotes in the html attributes are correctly replaced, but I would like them to be inserted correctly on tab completion.
How can I find and delete all occurrences of an html tag using Visual Studio Code.
As an example, I am trying to parse a page that is riddled with SVG tags. I don't want the tags, nor the contents of those tags in the file.
If you are opening the "Find and Replace" popup in VS-Code (Windows: CTRL + H, Mac ⌥ + ⌘ + F), then inside the "Search" input field there are three icons on the right side.
Press the right one .* in order to activate regular expressions.
After it's activated you can search for SVG tags like so:
<\s*svg[^>]*>(.*?)<\s*\/\s*svg>
Leave the replace input empty and press enter in order to replace it with "nothing" and therefore removing the HTML-Tag and it's inner text.
But be careful, this will really delete everything between those matched tags.
So for example if you are looking for <a> tags, even this String will be completely removed: Some <span>special</span> formatted link
You can find an example with it here: https://regex101.com/r/ewEttF/1
You can use Regex Search and Emmet.
Use regex search to find the start tags: <svg[^>]*>
While the focus is still in the find dialog: Alt+Enter
this will select all matching cases and put focus on the editor
Move cursors after the opening tag: RightArrow
Use Emmet: Balance outward to select content of tag
Use Emmet: Balance outward to select content and tag start and tag end
Delete selected stuff with: Delete
End Multi Cursor with: Esc
This is very basic but I just could not find an easier way of doing it.
I have an html file and I want to wrap <strong></strong> around some part.
So, I go to visual mode. Select the text. Do Control Y - ,. It asks for Tag. I enter strong and it wraps the tags as expected.
But this is way too long for vim IMHO.
Is not there a quicker/ easier way to get this done? May be an abbreviation attached to a keystroke?
So, I select the text in visual mode, press a key and there --- <strong> </strong> appear around it?
With the surround plugin it's select the text in visual mode, press S<, tag name, <cr>.
Or ys, motion or text object, <, tag name, <cr>.
< can be replaced by t, attributes can be appended to the tag name, and <cr> can be replaced by >.
In my project we are using Resource files and i am calling the resource file by the following syntax:
#HttpContext.GetGlobalResourceObject(CustomersResource, "t_GoBackCustomer")
where CustomersResource is the Resource file name and t_GoBackCustomer is the key name. The value of the key will be like "Go Back to Previous Page". The whole value is rendering for labels and other places without any problem.
But when i use
<a title=#HttpContext.GetGlobalResourceObject(CustomersResource, "t_GoBackCustomer")>
only the first word is coming as title. i.e while pressing F12 I can see as
`<a title="Go" Back to Previous Page></a>'
Only "Go" is coming as title. The words after space is not considered as title. The same is the case for Placeholder. Can anyone say what is the mistake i am doing here?
I have found solution to my problem. I have to use the following syntax to get words with spaces.
<a title='#HttpContext.GetGlobalResourceObject(CustomersResource, "t_GoBackCustomer")'>
The single quotes did the magic. For labels and controls we no need to use single quotes. But while using for html parameters like Title and PlaceHolder we must need to use Quotes.
Every time I type an opening html tag (like <div>) then press the Enter key, the cursor automatically inserts an indention on the next line. However I don't want it to be indented since I still have to write the closing tag (actually I press the enter twice and write the closing tag in the third line so I can have an empty line in between). Now I have to press the back button to align the cursor with the opening tag.
I am aware of Sublime Text 2's autocomplete like when you type '<' and Ctrl + Space, a list
of available elements would appear. And when you select one item from the list, the editor would
provide you of both the opening and the closing tag. However, I'm not used to that kind of typing.
So is there a way to turn off this annoying feature of Sublime Text 2
You can disable auto-indentation by setting auto_indent to false.
In order to do this for the HTML syntax only, go to Preferences/Settings – More/Syntax Specific – User and insert the following contents:
{
"auto_indent": false
}
This will make the cursor to jump back at column 0 after hitting return.
To make it stay at the column of the opening tag, re-enable auto_indent and tweak the indentation settings in Packages/HTML/Miscellaneous.tmPreferences. If you aren’t into regular expressions, try to get rid of this file completely.
You can also just type the closing </div> tag and sublime text will automatically un-indent it for you.