WebStorm 2016.1 Help

Using Language Injections

On this page:

See also:

Prerequisites

Before you start working with language injections, make sure that IntelliLang plugin is enabled. The plugin is bundled with WebStorm and activated by default. If it is not, enable the plugin as described in the section Enabling and Disabling Plugins.

Overview

WebStorm makes it possible to work with islands of different languages embedded in the source code. You can inject other languages into string literals. This can be done within the source code written in most (but not all) of the supported languages. The typical examples are HTML fragments injected into JavaScript code, SQL statements in XML, and so on.

WebStorm supports full coding assistance for CSS and JavaScript in an HTML or XML file.

When the editor recognizes a string as a language injection:

  • Syntax and error highlighting and coding assistance are extended to this string.
  • You can open and modify it in a separate tab in the editor, as if you were working with the source code in the corresponding language.

    To open an injection in the editor, use the Edit <Language> Fragment intention action.

Injecting a language into the source code and cancelling language injection

To tell WebStorm that certain text should be treated as an embedded source code fragment, you can use:

  • The Inject Language/Reference intention action, which is applied to a particular string:
    inject_language

    After that, you have to select the desired language from the menu:

    ij_inject_language

    Note that if you use this method, it’s possible that the string literal will stay marked as a language injection only within a limited period of time. That is, WebStorm, at a certain moment, may "forget" that the corresponding literal is a language injection. The period of the injection "persistence" will depend on the language, context and the modifications that you make in other parts of your source code.

  • The Language Injections page of the Settings dialog. By creating new language injection configurations on that page, you can specify that a certain method parameter, text in an XML tag, or XML attribute should always be treated as an embedded source code fragment in another language.

To cancel language injection, choose the intention action Un-inject Language/Reference.

Moving injections between the IDE and the project levels

User-defined injections are assigned either to the IDE or the project level. The IDE-level injections are available in all of your projects. The project-level injections can be used only in the project in which they are defined.

To move the injections between the IDE and the project levels, use the Move to Project/IDE Scope icon  icon_injection_move_to_project_make_global  on the Language Injections page of the Settings dialog.

The built-in injections are the IDE-level ones, and their scope cannot be changed.

See Also

Last modified: 11 July 2016