Is there a way to make VS Code stop breaking HTML tags before > on a new line? As you can see on the picture the tag is breaking/wrapping on a next line just after the > . I'm Using Prettier - Code formatter.
You could try adding this line to your settings.json file
{
"html.format.wrapAttributes": "force-aligned"
}
I know this is old, but for those who have the same problem, have you checked to ensure that your document is being treated as HTML rather than something else? I've seen this happen when I format my HTML code in a Javascript document.
On the bottom-right of the VS Code window, after Tab Size, UTF-8, and CRLF (your options may be different) you should see HTML. If you see Javascript, CSS, or some other code language, you'll need to click it and change it to HTML.
Related
Is there a way to do so? I find a lot of my time is taken up correcting indentation formatting in VSCode after pasting, because it seems to sometimes take the source indenting and apply it at the destination (so the entire pasted code block is at the wrong indent level) or worse, just mess up indents entirely (no idea what's going on here) and I need to manually fix every line.
Example use case, for single PHP files which contain PHP, HTML, and Javascript, I often only want the pasted Javascript block to format nicely. Turning on "paste on format" will format the entire document, often times making the PHP sections awkwardly arranged.
I know that VSCode has "format on paste" in settings, but this formats the entire document. How can I format only the pasted code? Is this even possible?
Thank you
I am not certain whether you're fine with this roundabout solution, but you can format selection with Ctrl+K Ctrl+F (see official vscode site for more detail). So rather than turning on format on paste you can paste and then reselect it and do the shortcut above.
If you're not satisfied with this method, you can try using a vscode extension that was given here under a somewhat similar copy and paste problem
I'm working with ejs files, but in order to reuse some code, I'm using the includes feature. Given that some opening/closing html tags are placed in other files, after I save my changes, something (I don't know if prettier extension or VS code editor) is including the closing tags into my code, causing several problems when I running it.
An other solution is to use a .prettierignore file and put in :
*.ejs
in your settings.json you should add these settings.
just instead of "[css]" type what you want. (the format of the file)
and just please ignore line 2 :) that's not related to this answer.
Edit
as #aegatlin said use this: "[html]".(if "[ejs]" didn't work for you)
I don't use EJS myself, but after playing around with it in VSCode, I noticed that my .ejs files were being treated as HTML files. You can see how your VSCode is interpreting the file by looking in the bottom right corner of the editor. You could search for EJS extensions as well.
You likely have the "Editor: format on save" option enabled. To disable that setting, go to Preferences, and in the search bar type "format on save". Find the setting. Uncheck the box. That should fix the problem.
If, as you mentioned, your closing HTML tags are in other files, then you have invalid HTML and the formatter (both Prettier's and the default one) will autocomplete the closing tag. (I would wager EJS also wouldn't like the lack of closing tags, but since I don't use it I'm not so sure, maybe it's fine.)
Zulhilmi Zainudin has the solution
https://medium.com/#zulhhandyplast/how-to-disable-vs-code-formatonsave-for-specific-file-extensions-c60e8f254243
In vscode setting file, associate ejs extentions files to a « language ». Then you can specify different rules for this that language :
.vscode/settings.json file content :
{
"files.associations": {
"*.ejs": "ejs" // this create the language « ejs » which refers to any .ejs file
},
"[ejs]": { // custom settings for the language « ejs »
"editor.formatOnSave": false
}
}
I use VSCode and I think its a great editor, but when I write a comment in html it drops to a new line under what I'm commenting which is really irritating.
If I comment a closing div I want it next to the closing div not under it.
I have uninstalled prettier but that made no difference.
Is what I want even possible in VSCode?
Any advise would be appreciated because I am so irritated that I am considering using a different editor (I'm on a Mac just in case it matters).
Thanks in advance.
This was a problem for me too, as were other new line / white space related HTML issues.
Assuming you are not using any formatters besides the native VSCode HTML language features (you said you uninstalled prettier, but you didn't mention whether you were using something else),
there is a setting HTML white space which you can set to preserve to leave your comments untouched.
Note that you may need to go into settings and check what is being used as the HTML default formatter
I'm using TinyMCE's codesample plugin. It works the first time and saves correctly into the database, but when opening the editor again, it either strips the code sample content (if it's "illegal") or places it outside of the codesample tags.
Saved Code:
<pre class="language-markup"><code><!DOCTYPE html></code></pre>
When loading the editor again:
<pre class="language-markup"><code></code></pre>
Should the content somehow be filtered before returning it to the editor? I assume it's because the editor is converting the escaped HTML back to normal tags first...seems a bit silly really.
Anyone know a workaround for this or encountered this before?
Thanks in advance
See this TinyMCE Fiddle:
http://fiddle.tinymce.com/ITfaab
It seems to load your example code back into the editor just fine. What are you doing differently?
I've just about had as much as I can stand with Brackets, and NPP isn't much better. I'm so used to coding in Dreamweaver that I have become very accustomed to Adobe's auto tag completion - for example -
When I type
<div>
div content
misc. stuff
etc
</ (at this point, dreamweaver will complete the </div> tag)
In brackets, as soon as I type
<div>
it will automatically turn it into:
<div></div>
with the cursor in the middle, to insert content between the opening and closing tags.
Notepad++ will do neither of the above, unless I go into settings>preferences and turn on tag autocomplete, where it will do the exact same thing as brackets.
I absolutely hate this, I love the way Dreamweaver completes their tags but I don't like Dreamweaver in general. Is there a setting for this type of auto-completion in Brackets or Notepad++ that I may have overlooked? I've spent literally hours looking for a solution to this, everything from editing backets' JSON file to trying different HTML editors to almost throwing my G** D*** laptop against a wall from infuriation.
Is there a setting I can change, or a specific line of code I can add to Brackets' config.json file? If not, if you know of another program that has dreamweaver style tag closing, please please PLEASE let me know, I've been desperately looking for something to replace it!
Thank you very much in advance.
Yes, in Brackets you can get that behavior by adding this line to your preferences JSON file:
"closeTags": {"whenOpening": false, "whenClosing": true, "indentTags": [], "dontCloseTags": []}
To edit your preferences file, choose Debug > Open Preferences File from the menu. If the file is currently blank, be sure to wrap the above line in {}s.
For more details, check out the full list of Brackets preferences.