After searching for a while as I couldn't find a way to achieve what I want posting the question here. I want to format the angular HTML file in a way that is explained below.
There was enough way to format. Using extensions or overwriting the vscode settings by "html.format.wrapAttributes": "force"
This is how the file is formatted after pressing Ctrl+Shift+Enter
I want only the angular component selectors' attributes to be formatted as shown below.
Any extensions or customizations or any better way to do that is appreciated?
I had the same issue and found a solution.
Install Beautify plugin for vscode and it will solve your issue.
You can use the following option in VS Code settings:
"html.format.wrapAttributes": "preserve-aligned"
If you split the angular components' attributes into different lines (and keep the remaining HTML attributes in a single line), it will correctly format you document without breaking the "rules" you defined.
Yes, it has a bit of manual work, but is the best alternative I've found.
I used Ctrl + K + S for the first time and after that it continued saving withoud reformatting
Related
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
Currently, I am working on a program that converts an html page into a PDF using the iText Library.
The Checker that I am using is PAC3 -->PDF Accessibility Checker 3 which is described by the following link (https://section508.gov/blog/check-pdf).
One of the issues is the “Alternate description missing for an Annotation”
An excerpt from the following link explains it:
http://www.uottawa.ca/respect/sites/www.uottawa.ca.respect/files/fss-fixing-accessibility-errors-in-pdfs.pdf
Alternative description missing for an annotation This usually happens when the link is not clear enough. To fix this error, add alternative text to the link tags. To add the alternative text, please do the following;
In the tag tree, select the tag for the link, and select Properties
from the options menu.
In the Touchup Properties dialog box, select
the Tag Tab.
Type alternate text for the link, and click close
I have been trying to use iText to fix this problem, but googling, looking at the source and reading the documentation does not help.
Does anybody have any suggestions on how to either write the HTML or use the itext problem to get rid of the “Alternate description missing for an Annotation”
Thank you for your help
You did not specify whether you using old code (XMLWorker, HTMLWorker) or new iText code (pdfHTML).
This of course impacts the proposed solution.
In my answer I am going to assume you are using pdfHTML
There are several options:
edit the incoming HTML using a library like JSoup
convert the incoming HTML to iText IElement objects, and edit those, setting properties where needed
write your own custom TagWorker that handles all instances of a specific tag, and write custom logic to deal with the missing annotations.
An example of a custom tag worker can be found here:
https://developers.itextpdf.com/content/itext-7-examples/converting-html-pdf/pdfhtml-custom-tagworker-example
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)
I just started to use the trial of Sublime text 2 and was wondering if there is any function or plugin for me to convert block of HTML to javascript string ?
I have try to search but couldn't find anything. Thanks!
Sublime text doesn't perform any parsing/converting functions, it's just a very pretty and useful text editor with various syntax highlighting, and as far as I'm aware most plugins for it are either for visual styles/highlighting or version control, not converting from one thing to another.
Saying that, if you want to convert HTML to a Javascript style string try this: http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
K. L., I am also reading this book and I gone through the same situation. I am using Notepad++ and could not find a way of doing this conversion directly from the editor. Then, I decided to download and install the vim editor (http://www.vim.org/download.php) and I made the configuration suggested by the authors on pages 73-74. It worked fine. Maybe I will try to make it work on Notepad++ in the future, but, for now, I can continue my reading. Hope this helps.
I write an application and inside of HTML code I have custom tags (of course these tags are parsed on server side and end user gets them as valid HTML code). Example of custom tag usage:
<html>
<body>
...
<Gallery type="grid" title="My Gallery" />
...
</body>
</html>
1.) How can I have eclipse recognize my custom tags inside of HTML code and add syntax highlighting to them?
2.) How can I add auto-suggestions to my custom tags? For example if I type "<Gallery " press "Ctrl+Space" - in the list of available attributes it shows me "type" and "title" and if I type "<Gallery type=" press "Ctrl+Space" I would see list of available values only for tag "Gallery" and its attribute "type".
Thanks in advance!
Not really what you want, but maybe it helps you:
You can try the Aptana Plug-in for Eclipse. It allows to write your own regular expression for HTML validation, so a custom tag would be ignored by the validator.
E.g.:
.gallery.
Eclipse allows you to add simple auto-suggestions via Templates. On
Eclipse 3.7.1 (Indigo) + PHP Dev Tools (PDT) 3.0.0: Window > Preferences > Web > HTML Files > Editor > Templates
Sadly, there is no easy way: you have to roll your own parser for this, and then add both your extra elements and the base grammar (HTML) to it.
If you have your parser, you could use it to do syntax highlighting (strictly speaking, for that simple lexing is enough); and a good parser can support content assist (auto-suggestions in your terminology).
Caveats:
Creating a parser for HTML is not an easy task. Maybe by aiming at a more often used subset is feasible.
If a parser exists, the editor parts are still hard to get well.
Some help on the other hand: you could use some text editor generators to ease your work:
Eclipse IMP http://www.eclipse.org/imp/ can in theory handle any type of parser, but currently it is most optimized for LPG. The documentation is scarce, but the developers are helpful in the forums.
Xtext http://www.eclipse.org/Xtext/ got quite a hype for creating text editors for DSLs. The generated editors are quite nice out of the box, but is not the best solution for large files. Has a really helpful developer community.
EMFText http://www.emftext.org/index.php/EMFText is a lesser known entity - I don't know it in details, but I guess, it is similar to Xtext.
I know its been a long time since this Q was asked,
but I hope this might help others like myself that reach this in search of a solution.
So, When using Eclipse (Mars.1 Release (4.5.1) - and possibly earlier - I did not check).
Go to Window - Prefrences
Then in the dialog that opens go to Web - HTML Files - Editor - Validation.
On the right side:
under Ignore specified element names in validation and enter the list of custom elements you use. (e.g. Gallery,tab,tabset,my-element-directives-*)
you might also like to go under Ignore specified attribute names in validation do the same for your custom attributes.(e.g. ng-*,my-attr-directives-*)
Two things to note:
After letting eclipse do a full validation you must also close the file and reopen it to have the warnings removed from the source code.
Using this method would ignore those attributes under any element. I don't think there is a simple way to tell it to ignore some-attribute only if its a child of some-element.
I find templates are an ok alternative but let's see if we can encourage a more robust solution; please take a moment and vote for this: https://bugs.eclipse.org/bugs/show_bug.cgi?id=422584
You need to add a new HTML template.To add a new template, complete the following steps:
1) From the Window menu, select Preferences.
2) In the Preferences page, select Web and XML > HTML Files > HTML Templates.
3) Click New.
4) Enter the new template name and a brief description of the template.
5) Using the Context drop-down list, specify the context in which the template is available.
6) In the Pattern field, enter the appropriate tags, attributes, or attribute values (the content of the template) to be inserted by content assist.
7) If you want to insert a variable, click the Variable button and select the variable to be inserted. For example, the word_selection variable indicates the word that is selected at the beginning of template insertion, and the cursor variable determines where the cursor will be after the template is inserted in the HTML document.
8) Click OK to save the new template.
You can edit, remove, import, or export a template by using the same Preferences page.
Reference : http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.wst.sse.doc.user%2Ftopics%2Ftsrcedt024.html