Commenting out JSX in Sublime Text 3

Commenting out JSX in Sublime Text 3.md

This is a short post to show you how to enable JSX commenting in Sublime Text 3. At the end of this post you will be able to comment and uncomment JSX by pressing CMD + / or Ctl + /

Overview

Here are the steps we will be taking. First we will install the ‘Babel’ package to add support for JSX. Then we will disable the ‘JavaScript’ package so it’s settings don’t override Babel’s settings. Finally we will modify the Babel package to add support for JSX commenting. Lets get started!

Install Babel Package

1. Open Sublime and in the menubar select Tools->Command Palette.

2. Type ‘install’ in the command palette and select ‘Package Control: Install Package’

3. Type ‘babel’ and select the Babel package to install it.

Disable JavaScript Package

1. In the Sublime menubar select Sublime Text->Preferences->Browse Packages…

2. Expand the User folder and open the file Preferences.sublime-settings.

3. Add the line "ignored_packages": ["JavaScript"]
   An example of what your file might look like is:

{
    "ignored_packages":
    [
        "Vintage",
        "JavaScript"
    ]
}

Props to Andres Suarez’s for his comments in this GitHub issue.

Edit Babel Package Settings

Finally, you’ll notice that you can now comment JSX code, but you can’t uncomment it with the keyboard shortcut. to uncomment it you need to make a change to the Babel package code.

1. In the Sublime menubar select Sublime Text->Preferences->Browse Packages…

2. Open the Babel folder and open the file JavaScript (Babel).sublime-syntax.

3. Do a search in that file for ‘jsx-evaluated-code’. You should find a section that looks like the one below around line 1187:

jsx-evaluated-code:
  - match: \{
    scope: punctuation.section.embedded.begin.jsx
    push:
      - meta_scope: meta.embedded.expression.jsx
      - match: \}
        scope: punctuation.section.embedded.end.jsx
        pop: true
      - include: expression

Delete that code and paste the following there instead:

jsx-evaluated-code:
  - match: \{/\*
    scope: punctuation.definition.comment.begin.js
    push:
      - meta_scope: comment.block.js
      - match: \*/\}
        scope: punctuation.definition.comment.end.js
        pop: true
  - match: \{
    scope: punctuation.section.embedded.begin.jsx
    push:
      - meta_scope: meta.embedded.expression.jsx
      - match: \}
        scope: punctuation.section.embedded.end.jsx
        pop: true
      - include: expression

Thanks to Leopold Joy for explaining this in this Stack Overflow post Commenting out JSX in Sublime Text 3?.

Reference: https://programmingliftoff.com/enable-jsx-commenting-sublime-text-3/