I find on sublime 3 that if I autocomplete code I sometimes get an extra angular bracket.
for example, If I start writing "<ht", I get an option to autocomplete the html tag, but the code produced looks like this:
<<!DOCTYPE html> <!-- Extra angle bracket here -->
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Which is quite annoying. How do I fix this? I'm not sure on what other autocompletion it does this. I'd like to start using the feature more once I know how it works and if I can adjust it to my style
Don't start off the tag with <. Just type ht and then press Tab, and you'll have your desired result. The same goes for any other tag.
p + Tab will create <p></p>, etc.
It may be that you have a conflicting package. I had this issue with the "HTML5 Bundle" but as soon as i removed it the problem went away. Hope that helps
I just uninstall the HTML5 package from Package Control (Ctrl + Shift + P)/ Type "Remove Package" and select the packages related to HTML and it works!
Okay, so I found your solution, but keep in mind, it might bug in the coming updates.
First goto your installation destination and open the folder Packages, in there open HTML.sublime-package as archive and copy all the content in a seperate folder on your desktop. In that new folder, edit the file html.sublime-snippet and change
<content><![CDATA[<!DOCTYPE html>
To
<content><![CDATA[!DOCTYPE html>
This should solve your problem.
Related
Dev Ed has a number of courses on YouTube. I have been viewing on named HTML and CSS Tutorial.
I have Visual Studio Code installed and added the packages suggested in the Tutorial. I get to the point where the <!DOCTYPE html> tag has been created and on a new line the tag <html> has been typed. This automatically completes the end tag, hence <html></html>. If I am understanding this correctly, Ed then says hit the Tab key but it just produces spacing as you would normally expect with a Tab.
My expectation is that it formats the code as follows:
<html>
</html>
This does not happen.
According to VSCode release notes, such a feature has been removed from the IntelliSense and replaced with </.
In order to autocomplete your tags you can do either of these:
Use ctrl + space to select from provided items in the suggestion list.
Use third party plugins like this.
Save your file as .html or if already have done that, click on the text between CRLF and smiley face and select HTML
I am starting to use Visual Studio Code for my web projects and I cannot live without Emmet, but I have a problem when I try to expand the abbreviations in HTML tags with attributes.
Just an example. If I write html:5 and press TAB key it expands all the HTML5 template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
And writing tags with id and class, like p#id.class, it generates properly next piece of code
<p id="id" class="class"></p>
But when I want to expand same tag with other attributes inside of square brackets, it doesn't work. Just add a tab space in the code.
p[align="center"]
And same thing if I try to add text in the tag using curly brackets
p{Test}
Can you help me to know how to configure it, or if it is a problem with my software / extensions?
Regards,
After few days, investigating in the Emmet in Visual Studio Code webpage I found the solution.
You need to add next line to the User Settings file for expanding the Emmet abbreviations with Tab key:
"emmet.triggerExpansionOnTab": true
This is because by default is disabled on Visual Studio Code.
In Visual Studio Code:
File > Preferences > Settings > Extensions > Emmet > Edit in settings.json file
Add the below code which worked for me.
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html":"html"},
I hope it helps someone.
I don't think square brackets work anymore in emmet...
However, you should use p>{text} for the curly brackets.
From what I understand, it is used to add text within an element.
So p>{text here} will produce <p>text here</p>
If you still need more help, please take a look at the emmet abbreviations syntax docs: The Emmet Docs - Abbreviations Syntax
Had the same problem but with typescript.
Adding "typescript": "typescriptreact" to settings.json helped.
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact",
"razor": "html",
"plaintext": "pug"
}
Apparently typescript is not default for emmet.
Further to the above/below answers that describe how to configure your settings.json file to enable / configure Emmet:
If you are trying to use Emmet in a new, unsaved document... you must choose a (supported) language for Emmet to be activated. (You can also just save the document and VSCode will know from the extension what language you are using.)
When you launch a new editor tab (Ctrl+N or etc) -- at the very top left of the empty page you may see: "Select a language to get started". CLICK on the bolded "Select a language" and choose one of the languages that is configured for Emmet in the Settings.json file as described in several of the other answers above/below.
Now, try again: type .test and press Tab and you should see Emmet expand your abbreviation.
In Visual Studio Code: File > Preferences > Settings > Extensions > Emmet > Edit in settings.json file
remove following line and save.
"emmet.triggerExpansionOnTab": true,
For what it's worth, I had the same issue but fixed it by force quitting the application after adding the code snippets above to Settings.json
Edit the file settings.json the path in Visual Studio Code
File > Preferences > Settings > Extensions > Emmet > Edit in settings.json
find file settings.json
Edit file settings.json
I am looking for the shortcut keys that I should use to autocomplete the structure of the HTML.
So for instance, when I type html and press a few keys the following structure should appear:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Note: I am using a MAC
"!" After typing, press the "TAB" key on the keyboard.
Perhaps you should look into templates for your IDE, for example in Sublime Text you have snippets which I would recommend looking into.
However, there is another workflow that you are able to use using a toolkit such as Emmet. The feature that you specifically want in Emmet is called "Expand Abbreviation". Essentially, you type out "CSS like" strings, put your caret at the end of the string and hit tab and Emmet will parse it into HTML. For example, the following string:
!doctype>html>(head>title)+(body)
will compile to the above (with a trailing closing tag of </!doctype> which is a bit awkward. However Emmet is quite clever and we can go one step further.. so expanding:
html:5
Will actually give you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Which is pretty much what you were looking for! And if you want to take it another step further, Emmet also supports expanding ! which is an alias for html:5. Only one character.
Check out Emmet's cheat sheet for more little bits.
In TextMate these are called snippets and they can easily be assigned a tab completion shortcut;
Select Bundles » Edit Bundles… in the TextMate 2 menu.
Select the bundle you want to add a snippet to, e.g. HTML. Press Cmd-N to create a new bundle item, and select Snippet.
Select Menu Actions
Press Command + N to create a new item, select snippet.
In the text area copy and paste your template.
On the drawer there's a field for "Tab Trigger", enter "html" there.
Save.
Now when you type "html" and press tab, your snippet will be inserted.
More info about creating a snippet.
Note: I've added "$0" in between your body tags. This is a tab stop and your cursor would appear at the $0. You can read more about advanced Snippet features here.
In My Humble Opinion;
html doesn't tab complete already because there's no good way to anticipate what you would want in your html template.
Sure, Emmet (as #bitten suggests in his answer) gives you something, but html:5 does too much; HTML5 does not mandate a html, head, or body tag. See this Stack post about HTML5's optional tags. Please see bitten's comment for some warranted concerns with this approach.
That said, I do use Emmet and it is worth investigating.
As for just inserting the doctype for HTML5 in TextMate, just type doctype and Tab.
click ! and after tab and you'll get the structure.
I have recently downloaded sublime text 3 and installed emmet. The issue that I am having is that when I write the short code for HTML 5 and press tab, it doesn't work. This method was used in sublime text 2 and it worked. Does anyone have any solutions to this issue?
type ! and then press Tab.
found the answer on cheatsheet
Text editor doesn't know what shortcut to expand until you save new file as *.html or change the syntax (bottom/right), because new document starts in plain text.
I guess that you are looking for something like Html Boilerplate. This package generates a full html5 structure just by typing
htmlboiler
and pressing TAB
EDIT: Just found the answer in the Emmet official cheatsheet; just type
!
And hit TAB (Yes, just the exclamation character).
You don't need an extension. Just either open an html file, save it as an html file, or hit ctrl + shift + P then type "html" and hit enter to select "Set Syntax: HTML"
Then, simply type "HTML" followed by either tab or ctrl+space.
#ayek is correct, all you need to do is set the document type to HTML; once you do, you can then type "html" and hit tab. Good luck, and happy coding. -KW
Create a new file (no need to save or type anything yet). From the menu, View > Syntax, then select HTML. Now type 'html' and press TAB.
The following appears:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
This didn't need any extra plugins - standard out-of-the-box Sublime 3 functionality :)
The above answer was the unique correct, that worked:
Create a new file (no need to save or type anything yet).
From the menu, View > Syntax, then select HTML.
Now type 'html' and press TAB.
I've been editing a lot of HTML pages with basic text editor, notepad.
When I went to validate them the validation service is saying there's a div tag that is not closed. I tend to find automatic error reports such as these don't tend to be too reliable, i.e they will give you a line number and the error but often times the error is actually in another part of the file entirely.
I'm just wondering if there is a way to find the closing tag for an opened HTML tag. For example, you click on a tag then click a shortcut, and the program will jump to the closing tag. I know this functionality is in homesite, but I don't have homesite, and its a bit of a bulky program anyway.
To sum up, I would like to know how to find html tags that don't have closing tags.
If you save your HTML as page.xhtml (instead of page.html), the browser (Firefox/Chrome or Opera) should find the un-closed tags for you without the need for a validator. Just remember to rename them .html before serving them online - IE doesn't support .xhtml files yet.
Edit (3 years later): This post's still getting comments/upvotes so a slight amendment. IE9 and IE10 do now support xhtml files.
Use the firefox view source - wrong code will be in different color
Notepad++ - never had any problems with it and also never had any unclosed html tag with it.
You can just click on any element and see if it has a closing tag. Also you can do this: click on "TextFX"(left from plugins in navigation) -> click on "Text FX HTML Tidy" -> click on lets say hmm "TiDy clean Document - wrap". That should fix your html document, aka close all unclosed elements.
http://validator.w3.org/
Does more than just unclosed tags. Should be used by all front-end developers, IMO.
I am using two online-tool, which work very fine.
jona.ca and tormus.com
CSE HTML Validator Lite is a free lightweight editor (for Windows) that will check your HTML (just press F6) and find missing end tags and other problems. You can also press Ctrl+M on a start tag or end tag and it will take you to the matching start or end tag.
A simple online service that will also do this (and more) is OnlineWebCheck.com. There are other online services but in my opinion the one I just mentioned is the simplest one to use and understand.
Full disclosure: I am the developer of CSE HTML Validator Lite and http://www.OnlineWebCheck.com/ which is based on CSE HTML Validator.
If your code is very messy, not prettified nor indented, v.Nu (as seen at https://validator.w3.org/nu/) will often get confused (for instance if there's an extre closing tag, it may not manage to select the one which is really wrong).
One solution is code folding: by collapsing all the code which is marked as a child of a certain node, you can often easily spot some incorrect hierarchy.
An example of editor which supports code folding is Kate editor: see the arrows on the left in their screenshot.
free lightweight html editors ... online html validation services that can highlight unclosed tags?
Use linter-vnu.
linter-vnu is a package for the Atom editor that uses the Nu Html Checker (v.Nu) to validate HTML or XHTML documents.
Disclosure: I am the developer of linter-vnu.
linter-vnu uses another Atom package, linter, to integrate v.Nu and Atom.
For example, if you open the following test.html file in Atom:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML document</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>
(with a deliberately missing closing </div> tag)
then Atom (or rather, linter-vnu, thanks to linter and v.Nu) displays the following error messages:
Unclosed element “div”. at line 8 col 1 in test.html
End tag for “body” seen, but there were unclosed elements. at line 10 col 1 in test.html
and marks those lines in the editor with red dots.
If you click the "at..." (hyperlinked text) in the error message, the editor insertion point moves to the corresponding line, and a popup appears under the line, with the error text ('Unclosed element "div".').
If you save your HTML document with the file extension .xhtml, and open it in Atom, then v.Nu validates your document as XHTML (XML) rather than HTML, with slightly different messages. In this case, just one error message:
required character (found “b”) (expected “d”) at line 10 col 3
where line 10 contains the closing </body> tag. v.Nu was expecting a </div> tag instead; it was happy with </ - it was expecting a closing tag - but it was expecting the element name to begin with "d" for "div", not "b" for "body".
I make the following claims, as of November 2016:
v.Nu is the best option for validating (X)HTML(5).
linter-vnu is the best option for interactively harnessing v.Nu in an editor. linter-vnu itself is trivial; it's just a few lines of "glue" code. What makes it the best option is the Atom editor and the Atom linter package.
I welcome counterclaims and questions about these claims. I'd be happy to be proven wrong and be shown something better. Especially if, like v.Nu and linter-vnu, it's free.