I have a file with a lot of this kind of thing in it:
<asp:TableCell ID="TableCell9" runat="server">Company
Organization:</asp:TableCell><asp:TableCell ID="TableCell10" runat="server">
How can I get the formatter to change it to shows like this:
<asp:TableCell ID="TableCell9" runat="server">Company Organization:</asp:TableCell>
<asp:TableCell ID="TableCell10" runat="server">
What I have tried:
I opened Tools->Options then browsed to Text Editor. I got a list of Languages. I selected HTML because that is the language that controls formatting for aspx files.
I changed "tag wrapping" to not have "Wrap tags when exceeding specified length" checked.
I then pressed ctrl+k, ctrl+d (Format the document). This did not fix the problem.
What I don't want to have to do:
Edit the file manually to fix all the tags.
Any ideas?
I was having the same problem, and I found the answer on Scott Gu's blog.
The solution is to setup the formatting rules in Visual Studio (right click on any tag, click on Formatting and Validation, click on Tag Specific Options)
When press ctrl-k, ctrl-d the document will format as per your settings. If a closing tag does not move to a new line, it's because there is no space between the end tag and what is preceding it. This happens because Visual Studio is being careful to not change how the page is rendered.
For the full blog post checkout Scott Gu's blog post.
http://weblogs.asp.net/scottgu/archive/2006/07/07/Tip_2F00_Trick_3A00_-Custom-formatting-HTML-in-Visual-Web-Developer-and-Visual-Studio-2005.aspx
I found a way that works.
In the list with HTML there is a File Extension Option.
I added ASPX to that list and said to edit it with an XML editor (I suppose I could have just right clicked it and opened it with the xml editor, but I did not think of that till after).
Anyway, once it is open as an XML File I formatted it (ctrl+k, ctrl+d) and it formated the way I wanted it. I then removed the extension mapping and reopend the file again.
One last formatting adjusted the tab spacing and I was perfect!
Note: When I did this the top line had this change made: from Page Language="C#" to Page="" Language="C#" I changed it back manually and all seemed to be well.
Later Note: Sadly, Visual Studio messes up the formatting every time I run the solution. Note that pressing ctrl+k, ctrl+d is fine and keeps my nice formatting, but when I run, Visual Studio collapses it down to a very unreadable format. :( Don't know how to fix it....
The answer should be:
Tools-Options->Text Editor->HTML-Format->Tag Specific Options
Then in ASP.NET Controls look for your tag. If it's not there you might need to Add it (New Tag) and set the Line breaks as you want them.
However I've found that this does not always work.Visual Studio respects the per tag colorization but Line breaks are not always respected.
So if this doesn't work for you, you might need to do a Search-Replace hack (Look for and replace with a NewLine in the middle), thenk try Format document and that should work.
Related
In an HTML file, when I position the cursor at the beginning of element (example <div>), VS CODE select the closing tag correctly (</div>).
On the other hand, if I create a PHP file containing HTML this does not happen. If I position myself at the beginning of a tag (example <div>), VS CODE selects all the div tags for me, of any piece of code, making it impossible for me to understand where the tag (</div>) closes.
This also happens with other elements or attributes, such as: class, section, id, p etc.
As if it found all the characters identical to the ones I selected with the cursor.
The extensions I have are the following:
Autoprefixer
HTML Snippets
Live Server
Path Intellisense
PHP IntelliSense
Visual Studio IntelliCode
CodeSnap
Polacode
How can I solve? Thanks in advance.
You can install an extension for that. Go to extension and search "Highlight Matching Tag" and install it. It will underline the closing/opening tag for the tag that you choose. This seems to have already been solved in this post.
When I save my file, a block of code gets messed up and end up being indented to the right.
Here is a screenshot to demonstrate the problem:
The code works but it's just not visually pleasant.
I have tried to uninstall some extensions, but none of them had to do with HTML.
Fixed by removing the extra " from line 645 to 647 that was causing the right indention.
For Visual Studio Code, you can use the hotkeys to reformat your code. The following hotkeys is for formatting your document, it works for html and other kinds of files as well, such as javascript files, json files, etc.
Format Document
Note: Different computer may have different settings. To search for hotkeys, ctrl + shift + P.
Why not try "save as" and give the file a new name. It might just save the changes the way you want it to.
click this links to see the screenshots
full source code of the home page
source code of the external file
full source code of the home page (in google chrome inspect
view)
full source code of the home page (in google chrome page source
view)
I have been keeping the code indentation in that web pages from the beginning in my code editor. but when i see my site on google chrome, the indentation is not set properly. can I know why is this? I googled this, yet coudn't find an answer or a solution.
It is not Google Chrome's fault. Your files simply get compiled to this form, the browser displays them exactly as they look like.
But why they look like this? In your case PHP's include does only purely textual replacement, as in the picture bellow:
The effect is the same as if you copied the contents of the external file and pasted them to the main file, replacing the include tag.
If you would really insist on having the code indented properly after the include does its job, you would have to add new spaces at the beginning of each line (but first) of the included file. It would shift the text to the right (in this case 4 spaces) and in the result the indentation would be preserved.
However, I'd discourage you from doing so -- it is only the code that is generated, probably no one is going to work with the compiled result. Proper formatting of code is only meant to make the human work easier -- it has no effect on how the page will eventually look like, when rendered by browser. Thus, it probably would suffice if you kept the two source files formatted as they currently are and left the output as is, even though it is not indented well.
If you'd like to have the code properly formatted in the page source view, please remember that you can simply use the "pretty print" button in the lower left corner of the preview:
I am trying to use a text editor (without using an IDE e.g. eclise/IntelliJ) where I can analyse an HTML file e.g. which tags are unevenly used and also format HTML documents in a way that it picks up each tag and organises so that the document is more human-friendly.
I currently have notepad++ and Sumblime Text 2 on my machine. If there is any specific plugin that helps to do the job, could someone please advise?
** REASONING **
I have a messaging service that uses email templates and one of these has a bug somewhere. It's generating a misaligned (i.e. odd) tag which can be visible if I was to put it in some audit trail (gets picked up in a tabular view). I would like to use a text editor to check the buggy tag.
KR,
In notepad++ you can do that if your open and closing tags are below eachother for example
<div>
something here
</div>
but if you have it inline like this
<div>something here</div>
you cannot do much with it.
Is this what you are asking?
Also if you want the vertical tab lines to be visible click on the "show indent guide" in the top toolbar
There are several online tools that can format the HTML for you. Do a quick Google search for "online html formatter" and try a couple out. Some will provide more options than others. Once formatted properly, it'll be human readable and probably be pretty easy to spot the stray tag.
I am working with a MOSS 2007 site, the page I am currently trying to make additions/changes to specifically is a popup.
The page is an .aspx file and I know where it is located, but simply put I am trying to find and ultimately modify the original source html of this page(the html which shows up when you hit "view source" when brought up in my browser).
When i try to edit the page in sharepoint designer It only brings up a formatted view of the html code, I wish to see a much more complete version where i can edit the attributes of the tags and such.
Is there anyway to locate this original source html?
Try using CTRL + F to do quick find and then search your HTML tag id or any descriptive text you can find from viewing source or expecting the element. And then select Search Entire Solution or Current Project.
If the project is set up with a MVC structure, try finding
MainFolder/ProjectName_Web/Views
Alternately look in
MainFolder/ProjectName_Web/UserControls
If you are using Visual Studio, check out Kris Hollenbeck's solution.