Search code examples
cssintellij-ideaidephpstormeditor

How to add curly brackets and indent after element in CSS through autocompletion?

Is it possible to configure the editor that when you type a tag like:

body

and hit enter/tab, the editor will autocomplete it to:

body {

}

and indent the selection to where the first property would be typed?

I've looked into Editor/Codestyle/Stylesheets/CSS but found nothing.

Solution

  • Yes. A few different options:

    1. Type body { and hit Enter. With default settings the IDE will insert missing }, add a new line and auto indent.

      This is controlled by options at "Settings/Preferences | Editor | General | Smart Keys".

    2. Type body and hit Ctrl + Shift +Enter (or whatever other shortcut you may have there in your Keymap for Code | Code Completion | Complete Current Statement action).

    3. Write your own snippet (using Live Templates) that once expanded will replace the trigger code by inserting the snippet instead.

      Lets assume that you have selected bb as the abbreviation for this snippet. Then typing bb and hitting Tab (or whatever other expand key you may select for this) will inert the whole block at once.