Code formatting doesn't seem work in Visual Studio Code. I have tried with shift+alt+f, but it wouldn't format html code. I run ctrl+shift+p and type Format and only option I have is Format Document(shift+alt+f) and Format Selection (don't have Format code). I don't understand what I' doing wrong? Do I need to install some kind of extension in order for this formatting to work on html files?
This worked for me:
Right click inside html file that is being edited.
Select "Format Document With...".
Selected "Configure Default Formatter ...".
Changed from "Prettier - Code formatter" to "HTML Language Features".
This worked for me in Visual Studio 2015 (VS2015):
Right-click on the code window with the HTML you want to format
Click 'Un-minify" in the popup menu.
That worked for me when Format Document (Ctrl-K, Ctrl-D) and Format Selection (Ctrk-K, Ctrl-F) failed to format HTML that I pasted into a Visual Studio HTML document.
There are two scenarios here
You are editing an html file with a non-standard html extension. Find fix #1 below.
You are editing a non-html file with html embedded. For this scenario find fix #2.
Both fixes involve installing the Beautify extension so do that first.
Fix 1
To fix this issue, you will need to update your js-beautify extension properties to include those types. From the Beautify documentation:
You can contol which file types, extensions, or specific file names should
be beautified with the beautify.language setting.
{
"beautify.language": {
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautifyrc"]
// "ext": ["js", "json"]
// ^^ to set extensions to be beautified using the javascript beautifier
},
"css": ["css", "scss"],
"html": ["htm", "html"]
// ^^ providing just an array sets the VS Code file type
}
}
Fix 2
In this case when you run the beautify command (after installing the extension) it will prompt you for the language type. Select html and voila.
You might have some error in your html document like maybe you forgot to close a tag. I had the same problem but after fixing that error code formatting works well. If you have a large file then try pasting your code here and validating it here
Related
Is there a way to make Visual Studio Code Word-Wrap only specific files (.py, .cpp, etc) and not utilities formats such as .txt, .json, etc?
I just started working on a project and I need to process a lot of txt files and it's annoying not seeing how the content of the file is structured because of the Wordwrap setting.
Yes, this can be done by customizing your settings.json. The quickest way is to use the command palette (CTRL or CMD)+P and begin typing configure language
followed by the file type you are specifically looking to alter
you can then customize the settings as needed. The code below can be added to your settings.json file to make JSON and .txt files always use word wrapping by default
{
...
"[plaintext]": {
"editor.wordWrap": "on"
},
"[json]": {
"editor.wordWrap": "on"
}
}
more information can be found in the official docs
I guess there's some built in snippets because I used to be able to do stuff like type: h2 + tab and get <h2>|</h2>. However my language snippets weren't working, so I switched the file language type to HTML (EEx), for .html.eex files. Now my language snippets work (from a package), but now I don't get any HTML snippets. Is there a way to tell VSCode to treat .html.eex files as if they were HTML files? I sort of want to merge the HTML and HTML (EEx) language file types into one. What's the best way to fix this?
Add this to your settings.json
"files.associations": {
"*.html": "html",
"*.html.eex": "html"
}
I got it working with:
"emmet.includeLanguages": {
"HTML (EEx)": "html"
},
This is my problem - its unreadable
In order to get .ejs working in general, I've so far added the following. I also have format on save and prettier. I'm looking for proposals to get better formatting of this so that I can read it.
"files.associations": {
"*.ejs": "html",
"*.css": "postcss"
},
"emmet.includeLanguages": {
"postcss": "css",
"ejs": "html"
},
"emmet.syntaxProfiles": {
"postcss": "css",
"ejs": "html"
}
I know that's an old question, but working with .ejs in VSCode is still a problem. But I found the solution (for ? delimeter)
Install EJS language support plugin
Now you have ejs support, highlighting, and snippets, but some tags like
<? for( let item of array ) { ?>
(some data)
<? } ?>
are formatted incorrectly (at least with default html formatter).
To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation with <? ... ?> tags.
To use the snippets with our custom delimeter, you need to edit extension snippets (or add your own): install Snippets Ranger plugin, then find needed extension and edit its file. The Snippets Ranger is very handy tool.
I hope I helped somebody to setup VSCode for .ejs files
I would suggest using
EJS language support
which is according to them
Syntax highlighting for EJS, Javascript, and HTML tags. Includes
javascript autocompletion.
and if you are interested in a Linter you should check out
EJS-Lint
which according to them
EJS-Lint parses scriptlet tags (<%, %>, <%_, _%>, and -%>). It ignores
all other tags (i.e. <%=).
Note: This linter does not attempt to check for unclosed EJS tags, so
if you get an error Unexpected token with a line number that doesn't
contain any scriptlets, you most likely forgot to close a tag earlier.
It also is set up to handle old-style includes (<% include filename
%>) by ignoring them. It does not lint included files regardless of
the method of inclusion.
It can work with custom delimiters, just pass it in the options (if
using the API) or pass the --delimiter (-d) flag on the CLI.
I am using visual studio code for writing html but it doesn't have the feature of identifying closing tag for the current selected one.
How can I achieve the same?
Here is how it looks on VS Code:
Can you suggest any extension or how can I achieve this?
VS Code 1.7.1
install this extension
highlight-matching-tag
and change the settings.json to
"highlight-matching-tag.leftStyle": {
"borderWidth": "0 0 0 3px",
"borderStyle": "dotted",
"borderColor": "red",
"borderRadius": "5px"
},
I think you chose PHP or something else for "language mode", change it on HTML
I'm not sure if you have any extensions installed that break the highlighting? If I use your example, it highlights the closing tag fine by default:
Additionally, there is a builtin Emmet command that jumps between the beginning/closing tag. In the command palette, you can search for 'Emmet: Go to Matching Pair".
If you bind it to a shortcut, you can press that for example twice to see the cursor jumping between your tag. The name of the command to bind is editor.emmet.action.matchingPair
I was having the same issue and HTML snippet extension solve it. Just install it Html snippet
and just do some changes in setting, goto file->preferences->setting,
you can now see User settings in the right hand side, add the following code
,"files.associations": {
// extension name : html
"*.php": "html",
"*.html": "html"
}
and you are ready to go. Enjoy :)
The best visual way that i found to do this is with a plugin highlight-matching-tag
"highlight-matching-tag.styles": {
"opening": {
"full": {
"highlight": "rgba(165, 153, 233, 0.3)"
}
}
}
VSCode now supports matching tag highlighting by default:
Install "Bracket Pair Colorizer" extension.
File -> Preference -> Settings -> User Settings(Text Editor). You can edit in json view.
first confirm your visual studio have this extension it install default but for safe side you can check and solve highlight problem with matched div with this steps:
Go to the visual studio and type Ctrl+P
Make sure
Open preferences > setting
Paste this:
"editor.occurrencesHighlight": false,
"highlight-matching-tag.styles": {
"opening": {
"name": {
"underline": "red"
}
}
}
first line for disabled highlights.
you can choose color : red or anything else
may be it's help to you
#thank you
I was having this issue too. If you click and drag it selects all words with that text highlighted, but if you just single click it seems to select the closing tag. So yeah just single click a tag to get the pair, don't double click or click and drag.
I was having this same issue with Some Tags matching and highlighting while others don't.
The Weird thing was if I created a new file, and put a bunch of tags in they all highlighted correctly.
Turns out that that the person that created the original page used </br> for line breaks. This broke the highlighting of open and closing tags where a </br> happened between them. I changed the </br> to <br /> and everything is happy now.
It also happened with <link></link>, that I fixed by removing the closing tag.
I would suggest that if you are having this issue to look for closing tags that are not needed/ required.
I created a language extension for Visual Studio Code and I would like to change the comment block characters, but I couldn't find a way to do so..
How can I do it?
OK, I finally figured out what the problem was.
There are two ways you can change the comment blocks:
1. Configuration file
I don’t know why it's not in the documentation (or at least I couldn't find it), but there is an optional property you pass to the object inside the contributes.languages array in the package.json file named configuration.
The description found on the Visual Studio Code source code:
A relative path to a file containing configuration options for the
language.
In those files you can create an object like this one and it's going to overwrite the default comment characters
{
"comments": {
"lineComment": "//",
"blockComment": [ "<!--", "-->" ]
}
}
You can see this properties on the API references: CommentRule
Note: That comment block command is triggered with a different shortcut. You can overwrite it though (in a general or even for a specific language using the property when on the key binding object).
⇧⌥A - Toggle Block Comment - editor.action.blockComment
Key Bindings for Visual Studio Code
2. "Syntax" file .tmLanguage
Yes, you can do it from there too and you can make it even better.
You can see an example on vscode-handlebars/syntaxes/handlebars.tmLanguage.
Try deleting the Babel extension if you are using the Visual Studio Code editor. It worked for me.