WebStorm 2016.3 Help

Using Language Injections

You can inject a language (such as HTML, CSS, XML, RegExp, etc.) into a string literal in your code and, as a result, get comprehensive coding assistance when editing that literal.

WebStorm provides full coding assistance for CSS and JavaScript in HTML and XML files.

Prerequisite

For language injection features to be available, the IntelliLang plugin must be enabled. (This plugin is bundled with the IDE and enabled by default.)

Example: Injecting HTML. Opening a fragment editor

To get an impression of how language injections work:

  1. In the editor, add a code fragment containing a string literal.
  2. Place the cursor within the literal (between the quotation marks).
  3. Click /help/img/idea/2016.3/intentionBulb.png or press Alt+Enter, select Inject language or reference, and then select HTML (HTML files).
  4. Type:
    <body><h1>Hello, World!</h1></body>

    When typing, note that auto-completion for HTML tags is now available. Also note how the HTML code is highlighted.

  5. Let's now open a fragment editor for the injected HTML code: press Alt+Enter and select Edit HTML Fragment.

    You can use the fragment editor as an alternative (or in addition) to editing injected string literals in the "main editor".

  6. To complete the example, let's cancel the injection: switch to the main editor, press Alt+Enter and select Un-inject Language/Reference.

    Note that the text between the quotation marks has become green which is the default color for string values. This indicates that the value in the quotation marks is now treated simply as text.

    Don't close the editor yet. Later in this topic, we'll use our code for showing other language injection features.

Accessing language injection functions

Most of the functions related to language injections are accessed through intention actions (/help/img/idea/2016.3/intentionBulb.png or Alt+Enter).

Ways to inject a language

You can inject a language by using:

Using language injection comments

To inject a language by means of an injection comment, on a separate line preceding the one that contains the target string literal, add:

// language=<language_ID>

e.g.

// language=HTML

NOTE: The syntax of comments should be appropriate for the language that you are using. So you may want to use # language=... or -- language=... rather than // language=....

Example

  1. On the line preceding the one that contains your string literal, depending on the language, type // language=HTML or # language=HTML.
  2. Check the light bulb menu (Alt+Enter).

    The Edit HTML Fragment command is available which means that HTML has been injected into the string literal.

  3. Remove the commented line (e.g. Ctrl+Y) to come back to the previous state.

Language IDs

The language IDs, generally, are intuitive, e.g. RegExp, XML, HTML. If not sure about the language ID, use the suggestion list for the Inject language or reference command. What precedes the opening parentheses there is the language IDs.

See also, Using language injection prefixes and suffixes.

Accessing injection settings

To access the language injection settings:

  1. Open the Settings / Preferences dialog (e.g. Ctrl+Alt+S).
  2. Go to the Language Injections page: Editor | Language Injections.

For more info, see Language Injections page.

Using language injection prefixes and suffixes

Injecting a language may be accompanied with adding a prefix and a suffix. The prefix is added before the injected fragment, and the suffix - after the fragment.

Adding the prefix and the suffix is "imaginary". It doesn't change the actual string value. The prefix and the suffix act as a "wrapper" and their main purpose is to turn the injected fragment into a syntactically complete language unit. In this way, you give WebStorm a broader context for validating the injected code fragment.

When editing your code, you can see the prefix and the suffix only in the fragment editor; the prefix and the suffix are not shown in the main editor.

The prefix and the suffix can be included in the injection comment whose complete form is

// language=<language_ID> prefix=<prefix> suffix=<suffix>

where the prefix and the suffix are optional.

Example

In this example, we'll remove the opening and closing <body> tags from the injected code fragment and add these tags to the injection comment as the prefix and suffix.

  1. Remove the opening and closing <body> tags: e.g. place the cursor within the injected fragment, press Ctrl+Shift+Delete and select Remove Enclosing Tag body.
  2. On the line preceding the one that contains your string literal, depending on the language, type // language=HTML prefix=<body> suffix=</body> or # language=HTML prefix=<body> suffix=</body>.
  3. For the injected fragment, open the fragment editor.

    Compare the fragments shown in the main and in the fragment editors.

See Also

Last modified: 1 December 2016