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
Related
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 use custom code snippet for Sublime Text like custom comments, function, reusable block code, CDN and more.. but I could not do that in WebStorm and PhpStorm IDE.
Here is my building block code snippet (comments) for Sublime Text:
/*============================
comments
============================*/
and this code blocks for HTML5 comments
<!-----------------------
comments
----------------------->
Moreover I'm new user for JetBrains software. Can I use custom code snippet above in JetBrains software ?
It's called Live Templates in JetBrains IDEs.
Available at Settings/Preferences | Editor | Live Templates.
You can use existing Live Templates as is, alter them to your needs or create your own.
Creating own is better be done in own group -- they will be stored in separate config file so easier to share, no possible conflicts with built-in ones (easier to update between versions etc.). It also makes perfect sense to use separate group per language -- the same abbreviation can be used for different languages/context but abbreviation within the same group must be unique.
BTW -- I'd say -- do not edit built-ins at all -- just disable specific built-in template and create your own version of it in separate group. This way you can always see what fix/change devs have made in new IDE version etc.
Full official tutorial/how-to is available here: https://confluence.jetbrains.com/display/PhpStorm/Live+Templates+%28Snippets%29+in+PhpStorm
You may also be interested in other articles:
https://confluence.jetbrains.com/display/PhpStorm/Tutorials
in particular (since you have used Sublime in the past): https://confluence.jetbrains.com/display/PhpStorm/PhpStorm+for+Users+of+Text+Editors
Finally I get a tips ! PhpStorm allows you to create your own live templates (code snippets) to optimise your workflows.
Open the settings dialog and head into Editor | Live Templates, you can see the available live templates grouped by language. To add a new template click the + (plus) button and select Live Template. Specify the abbreviation (the short bit of text you type that will be expanded to the full code snippet) and a description.
Then provide the full code snippet in the Template text field. You can include variables in the template in the format $<variable name>$, which will allow you to provide values when the template is expanded. PhpStorm recognises $END$ as a special variable indicating the final position of the cursor after the template has been expanded and values have been provided for all variables.
Next click the Define warning text to specify which language the template is for and optionally the context it is available in.
Now the template is ready to be used. Open a file and type the abbreviation that was specified earlier, then hit Tab to expand the template. The cursor will be positioned on the first variable, provide a value then hit Tab to keep moving through all available variables. The final position of the cursor will be the location of the $END$ variable.
Further Reading
Creating & Editing Live Templates
I don't think you can do this, however you can add custom tags in Settings > Editor > TODO.
//TODO & //FIXME are already implemented.
But this custom tags are not working for HTML.
Maybe you can find an extension to do that in Settings > Plugins.
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).
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).
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