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?

2 comments
Comment actions Permalink

Hi there,

In addition to what Elena said.

For example, if I type in fs I want it to default to "font-size"

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.

 

Similarly, if I type in bi I want to see "background-image" appear but instead the suggested property is always "bikeshedding",

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:")

2
Comment actions Permalink

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)

0

Please sign in to leave a comment.