title: How to colorize specific React.Js syntax on vscode?
body: <p>I'm trying to figure out how to get a specific color syntax with vscode in a declaration of a class in <code>React</code>.</p>
  
  <p>These are the colors I want to get:</p>
  
  <p><a href="https://i.stack.imgur.com/LQtVK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LQtVK.png" alt="enter image description here"></a></p>
  
  <p>As you see, the name of the class <code>StorePicker</code> is a <em>purple</em>, and the React method <code>.Component</code> (including the dot) is a  <em>pale grey</em>.</p>
  
  <p>As far as I know, to play with color syntax on vscode, it needs to be with the <code>TM Scope</code>. So to make this, on my code file where I have the class declaration, I press <code>Ctrl+Shift+p</code> and search for <code>Inspect TM Scopes</code>, and click on the specific elements to get their respective scopes.</p>
  
  <hr>
  
  <p>In my specific case, I got these scopes for the elements I need to colorize:</p>
  
  <ul>
  <li>The class Name <code>StorePicker</code> (<code>entity.name.class.js, source.js</code>)</li>
  <li>The <code>React</code> keyword (<code>entity.name.class.js, source.js</code>)</li>
  <li>The <code>.</code> (<code>keyword.operator.accessor.js, source.js</code>)</li>
  <li>The method <code>Component</code> (<code>entity.name.class.js, source.js</code>)</li>
  </ul>
  
  <p>As you can see, the <code>StorePicker</code> (class name), the <code>React</code> keyword and the method <code>Component</code> share the same Scope: <code>entity.name.class.js</code>.</p>
  
  <p>So let's say I want to colorize only the <code>.Component</code>. So I put this on my theme's config:</p>
  
  <pre><code>{
      "name": "[JAVASCRIPT] - Operator Accesor + Method",
      "scope": ["keyword.operator.accessor.js", "entity.name.class.js", "source.js"],
      "settings": {
          "foreground": "#c2cacf"
      }
  }
  </code></pre>
  
  <p>but <code>StorePicker</code> and <code>React.Component</code> are also colorized with the same color:</p>
  
  <p><a href="https://i.stack.imgur.com/ckN2l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ckN2l.png" alt="enter image description here"></a></p>
  
  <p>And I also want to colorize only the <code>StorePicker</code> (class name):</p>
  
  <pre><code>{
      "name": "[JAVASCRIPT] - Only Class Name",
      "scope": ["entity.name.class.js", "source.js"],
      "settings": {
          "foreground": "#d393e9"
      }
  }
  </code></pre>
  
  <p>Again not only is <code>StorePicker</code> colorized, but <code>React</code> and <code>Component</code> are colorized with the same color too:</p>
  
  <p><a href="https://i.stack.imgur.com/0DrYC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0DrYC.png" alt="enter image description here"></a></p>
  
  <p><strong>My question:</strong></p>
  
  <p>How I can get them colorized separately like in the first image (taken from a Screencast), if they share the same <strong>Scope</strong>?</p>