Dealing with backticks in PhpStorm / WebStorm

Question

We recently changed our project boilerplates for using single quotes to using backticks. Working with backticks in *Storm on OSX is not as convenient as working with single quotes, thus we tried to come up with some solutions which still lack some convenience. We're looking for further ideas to find better solutions now.

How single quotes work in *Storm on OSX

• typing one single quote results in two single quotes with the cursor in between ('|')
• typing afterwards results in text between the single quotes ('what has been typed')
• if 'surround selection on typing quote or brace' is true, selecting some text and typing a single quote results in the text being wrapped in single quotes ('some text')

How backticks work in *Storm on OSX

• typing one backtick results in one backtick (`), when pressing space you get two backticks with the cursor in between (`|`)
• when typing a letter, you get two backticks with the cursor in between (`|`) except if the letter is a, e, o, u, i, then you'll get (à, è, ò, ù, ì) which is quite disturbing
• when pressing space, you get two backticks with the cursor in between (`|`)
• selecting some text and typing a backtick results in a backtick (`), which is also not what we'd like to have

Answer 1

Since a backtick is a dead key by default, I am struggled with the same issue.

Live Template

Currently I created a live template named it -- (double-dash) for a quick which prepares a backtick-surrounded string. Below you can find the settings I used for the template:

---

Abbreviation: --

Description: Backticks

Template text:

`$0$`$END$

Apply: JavaScript

---

Unfortunately PHPStorm/Webstorm does not provide a way to toggle the quote style. Similar to the case toggler (Edit -> Toggle Case)

Answer 2

Concerning the typing

Just use keystrokes <backtick> + <space>and type a text and you'll get `a text`.

Concerning surrounding

Create a Live Template called backticks with a content of `$SELECTION$`$END$, set the context to Javascript. Go to the keymap and search for 'Surround with Live Template'. Assign a key combination. Go back to the editor, select some text, press the just assigned combination and press 'ENTER' to confirm selecting your 'backticks' template. This will wrap your text in backticks.