How can I extend existing tmLanguage Colorizer/ Syntax highlighter?

Question

I'm trying to extend https://github.com/dzannotti/vscode-babel/blob/master/syntaxes/Babel%20Language.json but all my attempts just result in a complete override, leaving the text blank. I'd rather not be a jerk and just copy the code into my highlighter.

I want to extend the colorizer and just add my patterns ontop of it.

Here's my current attempt:

   <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
       <key>fileTypes</key>
       <array>
          <string>js</string>
       </array>
       <key>name</key>
       <string>Handlebars (Ember.js)</string>
       <key>patterns</key>
       <array>
          <dict>
             <key>actions</key>
             <string>actions</string>
             <key>match</key>
             <string>actions</string>
             <key>name</key>
             <string>keyword</string>
          </dict>
          <dict>
         <key>include</key>
         <string>text.javascript.basic</string>
      </dict>

   </array>
   <key>scopeName</key>
   <string>source.js.jsx</string>

I was trying to do what's in this thread but it doesn't work

Answer 1

You should probably at least look at the Babel JavaScript syntax definition to see what its base scope is. In this case it's source.js.jsx, not text.javascript.basic. Programming languages generally use the source scope, while text and markup languages (Markdown, HTML, XML, etc.) use text. If you're going to be developing syntax definitions, I highly recommend using the ScopeAlways and/or ScopeHunter plugins for determining the scopes active at the current cursor location.