CODEWITHSUNDEEP
phpstormwebstormjetbrains-ide
Alex Tumanov
Alex Tumanov

Reputation: 500

Changing code autocomplete in WebStorm

WebStorm have specific JSX code autocomplete for React.js. It goes like this:

div. + Tab => <div className=""></div>

But I'm using SCSS, so I need to change autocomplete from className to styleName:

div. + Tab => <div styleName=""></div>

Upvotes: 3

Views: 278

Answers (1)

Juice
Juice

Reputation: 56

You can override this default behavior by creating what Jetbrains calls a "Live Template" (this feature exists in other Jetbrains products as well).

First navigate to the Webstorm Preferences. On the left you'll see a tree structure showing the preferences listed by category. Expand "Editor" to find "Live Templates".

Once you select Live Templates you're presented with a tree structure on the right that displays the Live Templates currently enabled. On the far right side of this table you'll find a small + button which allows you to create your own Live Template.

After you select + -> Live Template you'll need to fill in the Abbreviation, Description, and Template text at the bottom.
The Abbreviation is the characters that you type in to activate this template. In this case enter div. The Description field can be whatever you'd like to describe this template, it has no functional impact.
The Template text section is the replacement text. In this case I would use

<div styleName="$END$"></div>

Note that $END$ is a variable that puts the cursor in that spot after the live template is activated.

Lastly you need to specify which file types the Live Template should work against. Notice the phrase "No application contexts yet. Define" at the bottom of the page. Click on the word Define, in the popup menu that appears expand Javascript to find the option for JSX HTML and check it. If you'd like the Live Template to work in other cases feel free to select additional file types.

Upvotes: 4

Related Questions