I am fairly new to VsCode and HTML. I have it set to save on format and when I do it automatically places all elements on a new line. First of all, is this good practice? If so that's fine. If not, how do I stop it?
So I type this:
<p> My name is <b>Bob</b></p>
But it gets formatted to this:
<p>
My name is
<b>Bob</b>
</p>
Is it good practice to format code like this?
Seems like if the paragraph was really long with multiple elements within it then it could get quite confusing having a bunch of new lines right in the middle of the code.
If not then how do I stop VScode from formatting like this?
I have installed the prettier extension so I am not sure if its VScode or prettier that is actually making these changes.
Any help appreciated!
Thank you!
When you are in VSC, go to...
File > Preferences > Settings > Text Editor
Scroll down until you find:
Auto Indent and change full to none
maybe consider using prettier extension for formatting your code it take the load out of such indentation tasks..
Link to prettier extension LINK
Related
I am trying to create a TOC for my Markdown blog.
The methods I am finding here... : Markdown to create pages and table of contents?
....do not work for me because I am naming all of my headers # _</>_ The Setup because I am using CSS on to style the "", giving each header a nice colored Icon next to it. If I simply use ```# The Setup ```` it works great.
This causes issues whenever I try to use [The Setup](#The-Setup).
I tried a few things like [The Setup](#_</>_-The-Setup) and other things, but I can not get it to work.
If someone can point me in the right direction I would greatly appreciate it. Also, if anyone has a better way of adding custom icons next to headers, I think that would be the better way to go about it.
As always, thanks in advance.
The general solution is to examine the rendered HTML output to see what the tool is converting the special characters to, in the HTML's element ID. Every tool could handle the conversion differently (it could convert special characters to -, _, or just remove special characters). Some examples:
<h1 id="_____the-setup">The Setup</h1>
<h1 id="-the-setup">The Setup</h1>
<h1 id="the-setup">The Setup</h1>
Once you have identified the exact id that the tool is using, then you use that value as the heading link in the markdown's table of contents. For example:
[The Setup](#_____the-setup)
Now, the tricky part is that not all Markdown tools will export the rendered HTML, including VS Code. The workaround for VS Code is:
Open the markdown preview mode (which renders to html internally).
Open the VS Code Developer Tools (Help > Toggle Developer Tools).
Use DevTools to inspect the element (in this case, the heading element for "The Setup").
I see that VS Code named the id as the-setup, so in the markdown's table of contents, I write [The Setup](#the-setup). Now the table of content hyperlink works in VS Code. Caveat: it might not work in other Markdown tools if they render a different HTML element ID!
Another shortcut now available in VS Code (1.70 July 2022), is that markdown can autocomplete the header ID. So you just type #, and it will list the valid IDs:
I've been trying to get Code Completion to work on the current version of WebStorm (2017.3), but to no avail.
Specifically when working with HTML code completion seems to only work when I press the shortcut ctrl+space. As far as I can tell I should be able to get the Code Completion look up table to pop-up automatically when I start typing by going to Preferences > Editor > General > Code Completion and checking the box for Autopopup code completion the thing is... I DON'T SEE THAT BOX!!!
This is driving me insane. I've looked under Code Completion in WebStorm 2017.3 Help and there are discrepancies between what the instructions say I should see, and what I actually see.
This is a picture of my Code Completion window in WebStorm 2017.3:
but it should look more like this (IntelliJ IDE 2017.3):
The Basic Completion box is missing in WebStorm. Not sure if that has something to do with it.
I've looked around and it seems like other people's Code Completion window looks like it's supposed to. For example in this Community Forum there is a post in 2015 and another in 2016 where the users show their Code Completion preferences and they look like they're supposed to.
I've tried re-installing WebStorm, deleting all preferences and the .plist but it hasn't worked.
I would like to note, that this issue seems to be affecting only my HTML documents, since the Autocomplete pop-up table for JavaScript works well.
Any ideas on what might be going on? Is there something on my end I can do to fix this?
In short: it works as intended.
Thing is: it's HTML context ... where everything is a plain text with HTML tags inside (despite the fact that whole HTML document starts with <html> tag and stuff).
In this regard HTML context is not that strict/obvious as JavaScript/PHP/etc is. There is no way to guess if you are trying to write a word strong or a HTML tag <strong> .. hence you see no completion popup when you just typing any word. But .. if you type < before starting typing strong it will be a hint for IDE that you are typing a HTML tag (which means HTML context)... and completion popup will appear as usual (no need to invoke it manually).
If it would work as you are expecting/proposing (having completion popup for each word) then I would see it for every word in Any ideas on what might be going on? sentence. It will be supper annoying to see that popup appearing/disappearing for no reason for each word (when I'm clearly typing a plain text). Some people get mad even for much smaller things (like highlighting a matching brace or tag when you move caret left/right)...
Related subject: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000719050-Autopopup-completion-works-inside-php-tag-but-doesn-t-work-outside-of-it-Is-there-any-fix-
If typing < is a problem (not convenient or any other "religious" reasons (e.g. "why should I type it -- IDE should do that for me" etc)) -- consider speed up even more with Emmet (IDE supports basic abbreviations as well as expanding sequences) or Live Templates (basic Emmet abbreviations are handled with Live Template under the hood anyway).
https://www.jetbrains.com/help/webstorm/emmet.html
https://www.jetbrains.com/help/webstorm/live-templates.html
WordPress 3.7.1, one of the pages contains a lot of code looking like this:
...
<td>
<strong>Text</strong><br/>
Text<br/>
Text
</td>
I know, not the best HTML, however, changes of the HTML structure are not possible due to various reasons. I can save the page and it works fine, however, when I try to edit the page again (no TinyMCE or similar installed) WP stripped all the br tags without even asking (no, I've not even switched to the visual editor, HTML edit only).
I've searched the WWW, but couldn't find a working solution yet. Most fixes are TinyMCE-related.
Also the very high voted Removing <p> and <br/> tags in WordPress posts didn't change a thing.
Anyone knows a solution or on which part of WP I have to look to find the problem? I'm unfortunately far away from being a WP expert.
Edit: Installing the Text Control plugin and setting everything to "No Formatting" didn't help either,.
It seems that we destroyed it by using the Visual Editor in a previous version of the document which generated some invalid HTML which in turn confused the HTML editor thus removing all br tags completely.
After making the HTML valid again it does not strip the br tags anymore, still, weird behavior.
Try disabling the 'visual' tab from the editor via your user profile. That would stop it defaulting to 'visual' and overwriting the changes made on the text tab during those subsequent edits, and the text tab accepts html just fine!
Actually, I was also very frustrated trying to find a solution to this problem.
Realised that the solution was a simple one.
The editor.js and editor.js.min files have preg_match and replace functions to replace <p> tags with "".
Separate <div> containing <p>
//content = content.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
comment the above line
Similarly
// Remove <p> and <br />
//content = content.replace( /\s*<p>/gi, '' );
//content = content.replace( /\s*<\/p>\s*/gi, '\n\n' );
The explaination given in the documentation is that it is for Prettying up the source editor, so doesnt look harmful to remove it.
Thanks
I am using MonoDevelop on Mac to write MonoTouch apps. Automatica code indenting/formatting works great while I am typing.
The problem is that when I copy and paste code snippets, in many cases I lose the formatting and lines are combined together, indenting is lost, and it is a huge pain to implement the tabs, spacing, and line breaks manually. Is there anyway I can use a command in monoDevelop to automatically indent and apply the formatting to existing code.
I thought maybe Edit|Format|Format Document/Selection would work, but these commands don't have any affect on the code at all.
Any help?
To format the entire document in one keystroke: control-I
To format a selection: Edit->Format->Format Selection
To customize the formatting: MonoDevelop->Preferences->Source Code->Code Formatting
You actually need to select all your text, and then go to Edit->Format->Format Document. It doesn't seem to work otherwise.
For me on macOS, the shortcut for "auto-format" is CTRL + i.
You can change the shortcut if you want. To change it, go to Preferences -> Key Bindings, then type "format" in the search box and edit the "Format Document" shortcut/key binding.
Does anyone know how i can get better formatting for Razor/HTML (with CTRL K+D or another Shortcut) ?
I want it to be nicely intended, every tag be in a new line, every attribute inside a tag should also get a new line.
Tools -> Options -> TextEditor -> HTML does not give these options no matter how configure it.
I also could not find an extension to do this.
Resharper has some nice options for organising your code
EDIT: although it looks like there isn't a lot of support for HTML formatting more for the C#/VB code side of things