How to configure CSS shortcuts?
I can't find this anywhere in the documentation but I desperately want to change the shortcuts PHPStorm uses for CSS property completion. For example, if I type in fs I want it to default to "font-size" but the top suggestion is always "font-style" which I hardly ever use. Similarly, if I type in bi I want to see "background-image" appear but instead the suggested property is always "bikeshedding", which from a quick Google isn't even in the CSS spec any more.
How do I set these shortcuts manually?
Please sign in to leave a comment.
Hi there,
In addition to what Elena said.
Use fz for that (standard Emmet abbreviation for font-size). https://docs.emmet.io/cheat-sheet/ . In PhpStorm (and other IDEA-based IDEs) standard abbreviations are implemented using Live Templates functionality.
Or fsi (a simple fuzzy property match):
If you need that to be the actual fs -- you will have to EDIT a Live Template body for fs to suit your needs. (NOTE: It will not focus the font-size property but will select that Live Template... that once expanded makes such a property/snippet). Obviously, this will not be an Emmet any more but your custom (ordinary) Live Template.
This can be done at "Settings (Preferences on macOS) | Editor | Live Templates" -- look for entries under Zen CSS group.
For this one you can enable "Settings (Preferences on macOS) | Editor | Emmet | CSS | Enable fuzzy search among CSS abbreviations" option. When enabled this focuses the bi entry in the code completion popup for me (that once expanded inserts "background-image:")
This can't be configured, the completion suggest exact matches first (fs Emmet abbreviation for fs, a property whose name starts with entered substring for bi)