ES6 template syntax-highlighting in Atom

ES6 template syntax highlighting Template strings don't normally get syntax highlighting, but Atom's language-babel plugin got us covered.

# Initial setup

  1. install Atom editor
  2. install language-babel plugin

# Add grammar extensions

  • Navigate to Atom > Preferences > Packages > language-babel > settings.
  • Scroll down to where it says "JavaScript Tagged Template Literal Grammar Extensions"
  • The format for this is {tag_prefix}:{grammar_scope}. To find the grammar_scope of the language, navigate to Atom > Preferences > Packages and then search "language css" (this is an example search). If you scroll down a bit you'll see this:

atom screenshot

With that information, we can make a template definition /* @css */:source.css and use it like so:

es6 tagged template css language

Thats it! Let me know in the comments if you have any questions or suggestions.

fetching pluses ...
More Articles

Subscribe to the newsletter

No spam. Unsubscribe any time.