How to define comment characters for React JSX in Sublime Text? - sublimetext

Question

In OSX, in Sublime Text 3 (build 3065), with syntax set as JavaScript(JSX) or just JSX, I'm hitting the usual
cmd+/ to comment out the selected text.
However, ST3 is defaulting to the // comment chars, when I want to wrap selection like this:
{/* foobar selected text */}
I'm looking in here, but can't figure out what to edit:
/Users/admin/Library/Application Support/Sublime Text 3/Packages/User/JavaScript (JSX).tmLanguage
Thanks in advance! :)

Answer 1

Create an XML file in Packages/User called Comments.tmPreferences with the following contents (I'm assuming the base scope of your language is source.jsx - you can find this in the .tmLanguage file):
<?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>name</key>
<string>Comments</string>
<key>scope</key>
<string>source.jsx</string>
<key>settings</key>
<dict>
<key>shellVariables</key>
<array>
<dict>
<key>name</key>
<string>TM_COMMENT_START</string>
<key>value</key>
<string>// </string>
</dict>
<dict>
<key>name</key>
<string>TM_COMMENT_START_2</string>
<key>value</key>
<string>{/* </string>
</dict>
<dict>
<key>name</key>
<string>TM_COMMENT_END_2</string>
<key>value</key>
<string> */}</string>
</dict>
</array>
</dict>
<key>uuid</key>
<string>F9BFFF1F-1999-4722-B094-52E8AFD234D1</string>
</dict>
</plist>
// will remain the default comment prefix when you hit ⌘/, but when you select some text and hit ⌘Shift/ you will wrap it in {/* blahblahblah */}.
If you want to completely get rid of //, use the following instead:
<?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>name</key>
<string>Comments</string>
<key>scope</key>
<string>source.jsx</string>
<key>settings</key>
<dict>
<key>shellVariables</key>
<array>
<dict>
<key>name</key>
<string>TM_COMMENT_START</string>
<key>value</key>
<string>{/* </string>
</dict>
<dict>
<key>name</key>
<string>TM_COMMENT_END</string>
<key>value</key>
<string> */}</string>
</dict>
</array>
</dict>
<key>uuid</key>
<string>F9BFFF1F-1999-4722-B094-52E8AFD234D1</string>
</dict>
</plist>

Answer 2

While the previous answer solves the problem partially, it doesn't remove the comments correctly.
I added a plugin to https://github.com/borela/naomi which correctly detects the required comment type to use, it works for line and block comments.