PhpStorm has great code folding features, but I need to know:
If there is any way to fold html classes names in code like style inline attribute values?
Because, If I'm going to use some libs like MDL, it could be alooooooot of unnecessary html class declarations and I want to keep it folded.
Like this one:
There is no such option for class attribute collapsing -- only for HTML's 'style' attribute.
All available option can be found in Settings/Preferences | Editor | General | Code Folding
Consider submitting new Feature Request ticket to the Issue Tracker at https://youtrack.jetbrains.com/issues/WEB (but check for existing tickets first).
Related
I am trying PhpStorm and I coming over from VS Code.
I am used to adding classes and ids to my html elements like this:
element.class or element#id. I got very used to it and now I very much miss it.
Is there any similar way to add classes and ids to html elements in PhpStorm?
It's called Emmet and it is supported in JetBrains IDEs (IDEA based at least).
Just press Tab (default shortcut, can be changed in Settings/Preferences | Editor | Emmet) to expand the sequence, e.g. p.red[TAB] to make <p class="red">[CARET]</p>
https://www.jetbrains.com/help/phpstorm/using-zen-coding-support.html
I am new to VS Code and using it for Html editing. Is there a way to have the IDE show me a list of the attributes available for an Html tag? I do get Intellisense when I am typing a tag name and it will auto-close the tag, but there doesn't seem to be support for displaying the attributes specific to the tag. I can use Ctrl-Space to display a universe of attributes, but I'm looking for a list of the attributes from the official Html reference. Or maybe a tag-level help pane where it would display the tag information, including purpose, usage, attributes, etc.
Without installing an extension, I am getting a list of attributes when I press Ctrl+Space while inside an open tag like this <p.
There must be a space after the <p, so the tag name must be complete and the cursor separated from it by a space. If the cursor is still on the tag name, VSCode tries to autocomplete the tag name when pressing Ctrl+Space.
In VS Code it is showing attributes available in an HTML tag but it fails when showing/suggesting values for a specific tag. For that purpose, I am using this extension called "HTML CSS Support" by ecmel. But for the scenario mentioned in this question, You can get it done with #C14L 's answer. There may be other good extensions but this is the one I have tried and it works perfectly.
I'm using PHPstorm 6.
When i try to format my code which contains french characters, i got a issue like you see on the pictures.
NB : i got this just when i put my text into a tag like :
<span>génie Informatique</span>
So before formatting i was this :
And after formatting i got this
Thanks
What kind of file is that -- HTML?
In any case: you do have light green background between the tags. This suggests that you have another language injected between those tags (Language Injection functionality), which may use completely different formatting rules (not HTML -- e.g. JavaScript or whatever you may have injected there).
Possible solution:
Place cursor somewhere between such tags, Alt+Enter (or click on light bulb icon) and use "Uninject Language" option.
Alternatively: Settings | Language Injections -- find and disable (or even delete) offending entry there (will be "global" or "project" type in last column).
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
I am seeing an anchor tag with a data-folder attribute. What is this for? I researched it but found no info on it.
Also, I see that it has a data-toggle="dropdown" attribute. I researched that and see that it is a HTML 5 attribute used with the Bootstrap jQuery plugin (dropdown.js). So it's: data-toggle="dropdown".
Departments<span class=" caret"></span>
data-folder is custom made data-* attribute that later is used by some other tool, like CSS or JS/jQuery.
By the name of this attribute folder we can tell that it's indicating some reference to folder on server system (maybe ID of departments group?). Not knowing more about what you use we can't tell exactly.
If you are using one of supportable libraries (like jQuery), than you can use Visual Events to check what events does this specific element has.
This is a Custom Data Attribute as specified in W3C HTML5 specification.
Some libraries have methods developed around these type of attributes for easy storing and retrieval of data. Look at the JQuery .data method. This method retrieves/stores values via data attributes.
In your case the the following statement will return the value 4590.
$('<a>').data('folder')