I'm editing an HTML file from my Jekyll blog:
When I save the file, Visual Studio Code puts the layout reference in one line, breaking page's layout:
Is this a way to avoid this?
Disable auto formatting when saving the file in settings:
"editor.formatOnSave": false
My issue was I have installed this extension: JS-CSS-HTML Formatter.
So, the solution is edit the formatter.json file and set the onSave property to false.
To do this, I have followed these steps:
1 - Press CTRL+SHIFT+P and type Formatter:
2 - Change the value of the property onSave to false:
After editing the file, is necessary to restart Visual Studio Code.
This answer helped me to solve the problem.
Related
My vscode editor is set to automatically add closing brackets/parenthesis but does not add them. This is a new issue that only recently began. Has anyone else experienced this issue with global vscode settings?
This may be caused by the new vscode extension GitHub Copilot.
Update your settings.json like the following...
// Must specify rule by language
"[typescript]": {
"editor.autoClosingBrackets": "always"
}
This can become an issue as the new GitHub Copilot will override some settings in settings.json file. In order to take back control from the GitHub Copilot extension you must specify some rules like editor.autoClosingBrackets on a per lang basis.
I am learning to build a Website on Python Django, but when I create a HTML file in VS code, this Editor don't recognize this file. You can see in following picture. I don't know how to solve this problem. Pls help me if you know, thank you very much
Try to install any HTML extension
Turn on HTML5 suggestion in settings.json file:
"html.suggest.html5": true
Follow this post
No HTML suggestions in Visual Studio Code
Note that in the bottom right-hand corner of your screen, the document language is Python Django, but if you click that and change the language to HTML, you will get HTML language features.
if necessary, sometimes it can be useful to compose a document in a side-by-side window that has the language type you need, to get the hinting and auto completion features, and then copy that into the adjoining document.
After installing and activating Django extension;
File - Preferences - Settings
Then find "Emmet:Include Languages" (You can use CTRL + F for that)
After that arrange "Item" and "Value":
Item = django-html
Value = html
Then click OK
In this way, it will be solved I guess
I am trying Visual Studio Code lately and i've noticed that when i try to add a line comment in an HTML file (using Ctrl+/ or Ctrl+K Ctrl+C) instead of this: <!-- -->, i get this {# #}.
In JS or CSS files the key bindings work just fine and produce the expected result.
So how can i get the proper type of comments in HTML files?
Finally i found what the problem was. I had installed the twig plugin (for the Twig php template engine) and that was causing the comments issue.
I've just installing VSCode 1.1.1 and try to put a comment in an new html file
To do so, your new file must be,first, save in .html format and after that, you can use CTRL-K CTRL-C to put a comment and it works.
Hope that help you
If you don't want to disable/uninstall any plugin, you can create a snippet to put a comment. For example, I create a snippet that add HTML comments in a PHP file:
"comment HTML": {
"prefix": "chtml",
"body": ["<!-- $1 -->"],
"description": "Comment HTML line"
}
You can insert that right after the comment in File > Preferences > User Snippets > {YourExtension}
Then, when you start typing 'chtml' in that kind of files, IntelliSense will prompt that snippet.
Maybe this is a workarround, but it works excellent for me. Hope it helps!
https://code.visualstudio.com/docs/customization/userdefinedsnippets
For me, it was the (Djaneiro) extension, it made the html files default to django template, so it caused the comments to be wrong in HTML (when pressing ctrl + / )
(commenting them with {% comment %})
List of extensions known to cause this unwanted behavior (Based on my own experience and other answers):
Hugo Language and Syntax Support
Djaneiro
Nunjucks
Tornado
Sublime Babel
Babel
Twig
Django by Baptiste Darthenay (v1.0.0)
(Feel free to edit this answer and add yours)
You may need to restart code after disabling your extension (I did).
In your Visual Studio Code windows, go to File->Preferences->Keyboard Shortcut
This will open two files beside each other like in the screenshot below:
here you can change or create your own shortcuts.
Like I just replaced Ctrl+KU to Ctrl+/
Hope this will work for you !!
For me, the offending extension was Nunjucks (the templating language plugin assumes every .html file is a nunjucks html template)
For others having the problem, the Tornado extension is also a culprit. I had to "disable (workspace)" one by one to find it.
Try uninstalling any python extension packs you may have installed! You can then reinstall the python extension you need individually.
Chances are one of the extensions in the bundle of that extension pack is causing the issue
Click (Ctrl + K C) to comment the html.
Click (Ctrl + K U) to uncomment html.
For me, this was caused by the Sublime Babel extension. Disabling it and restarting VS Code fixed the issue: Cmd+K, Cmd+C works again, as does Cmd+/ for toggling. Also, HTML comment blocks are now correctly styled again.
You can configure the file type at the bottom right corner. you probably are on Django HTML. you can set it to HTML.
In Sublime text cmd+shift+v will paste and indent the code. Can this be done in visual studio code?
Workaround
I've made an extension that will let you paste and format with cmd/ctrl+shift+v.
Search for pasteandformat
https://marketplace.visualstudio.com/items?itemName=spoeken.pasteandformat
Currently, Visual Studio Code doesn't provide this specific functionality.
We could vote for this feature at Visual Studio's UserVoice website.
There's already a ticket open for this feature: Paste and auto align code. If you've got an account, you can vote for this feature so it gets more attention. If it has enough attention, Visual Studio Code's developers could take notice of this and maybe develop it.
Current workaround
After pasting the code,
You could use CTRL+E, CTRL+D for windows or ALT+SHIFT+F for mac.
But note that this will reformat the whole document, indenting according to the available rules for the source type.
If you only want this to be applied to the pasted code, select the code after pasting and then use CTRL+E, CTRL+D for windows or ALT+SHIFT+F for mac. Now the indenting/formatting is only applied to the pasted lines.
Since version 1.9.0, editor.formatOnPaste landed in VSCode.
Open settings.json via Code -> Preferences - Settings and search for formatOnPaste
// Controls if the editor should automatically format the pasted
content. A formatter must be available and the formatter should be
able to format a range in a document.
"editor.formatOnPaste": true,
Modify false to true since the default value is false
Source: Changelog update 1.9.0
There seems to be a lack of formatting settings for vscode.
I want to be able to format html such that my html shows up as:
<div attrib1=value1
attrib2=value2
attrib3=value3>
Content
</div>
This is one functionality that I'd really love to have!
VSCode added a way to do this now.
You can edit your settings.json (ctrl+shift+p) and then add the following for the desired effect:
"html.format.wrapAttributes": "force-aligned"
--or--
"html.format.wrapAttributes": "force"
force-aligned will also add indents to align it with the attribute on the line where tag was opened.
Visit this link for more details or updates.
My extended html was being limited by the "Prettier: Print width" setting, I thought I'd put a random value as 0, but then all the tags start breaking the attributes. So he put 10,000. This solved my problem.
There are differnt "formatter" extensions, but one I found does a decent job of this exact formatting that you are looking for.
It's called "vscode-tidyhtml".
https://marketplace.visualstudio.com/items?itemName=anweber.vscode-tidyhtml
Click on the Extensions icon on the left hand side
Search for and install "vscode-tidyhtml", reload Visual Studio Code
Hit the "F1" key, and then type "TidyHtml", hit enter
It should format HTML so that attributes are on different lines. I am not sure if it works well for other file types.
I know this is late, but I came here searching for an answer too. As #adi518 mentioned, the vscode automatic formatting for this might not be a great idea.
So, to do it where you'd like it, this extension might help:
https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes
You should open the settings.json file (shift+cmd+p for mac) and click on Open Preference: Open Settings (JSON)
add the following line at the beginning of the JSON file:
"html.format.wrapAttributes": "force-aligned",
In case formatting still does not work (this is a different issue), search for HTML and add the following lines
"[html]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Close and Open vscode then format by using (option+Shift+F)