I’m trying to learn ReactJS and it got tiresome for me to change my file type in Sublime Text from regular JavaScript to ReactJS > JavaScript (JSX) every time I opened a .js file. Fortunately, with a couple Sublime Text 3 plugins, I was able to get this happening for me automatically.

1. Install Sublime Text 3.
2. Install Package Control.
3. Via Package Control, install Project Specific Syntax Settings in Sublime Text.
4. Via Package Control, install ReactJS.
5. Open up your ReactJS files in Sublime Text. It’s easiest to do this by dragging and dropping a whole folder into Sublime Text. Save your open files and folders as a project if you haven’t already via Project > Save Project As.
6. Open your project settings via Project > Edit Project.

7. Within the curly braces after the “folders” section, add a new section:

    "syntax_override": {
      "\\.js$": ["ReactJS", "syntax/jsx/tmLanguage/JavaScript (JSX)"]
    }
   

   This is making use of Project Specific Syntax Settings and specifying that files ending in .js in this particular project should be syntax highlighted using the ‘ReactJS’ package, specifically the .tmLanguage file located at syntax/jsx/tmLanguage/JavaScript (JSX).tmLanguage within the package.

Now when you open .js files in your ReactJS project, they’ll be highlighted using JSX syntax instead of regular JavaScript. Change projects and open a .js file, and it will be opened as regular JavaScript.

Update: with the ReactJS package now deprecated, I switched to the Babel Sublime Text plugin. That means your syntax_override should be the following:

"syntax_override": {
  "\\.js$": ["Babel", "JavaScript (Babel)"]
}