CODEWITHSUNDEEP
javascriptsublimetext3syntax-highlightingjsx
saawsann
saawsann

Reputation: 685

How to use different syntax for same file extension on Sublime Text? (JS/JSX)

With Sublime Text, is it possible to use different syntax for a same file extension depending on the currently opened project ?

Example :

How can I obtain JavaScript syntax for project A and Babel syntax for Project B?

Upvotes: 2

Views: 465

Answers (1)

OdatNurd
OdatNurd

Reputation: 22791

Just for background (which you likely already know), Sublime Text applies a syntax via the extension of the file, and overriding that requires you to use View > Syntax > Open all with current extension as... from the menu. This creates a syntax specific override which appears in a specific file name and is thus not directly overrideable on a per project basis.

That said, it is possible to swap the syntax on your own (e.g. via the command palette) which opens the possibility of a plugin being able to do this for you. There may be an existing plugin that does this in PackageControl, but for reference purposes, here is an example based on something I'm using for a similar purpose.

The following assumes that you're using the Babel plugin to get your syntax highlighting, since you mention Babel. This would need to be modified if this is not the package you're using. This could also be modified to similarly do a swap for a different type of file if desired.

To use this, select Tools > Developer > New Plugin from the menu and replace the entire contents of the sample file with the code below, and then save it as a python file in the directory that Sublime suggests (which should be in Packages\User). I named mine js_syntax_swap.py, but the name doesn't matter as long as the extension is .py:

import sublime, sublime_plugin

# Standard Sublime JavaScript syntax file is:
#     'Packages/JavaScript/JavaScript.sublime-syntax'
#
# The Babel package syntax is:
#     'Packages/Babel/JavaScript (Babel).sublime-syntax'
class JavaScriptSyntaxSwap (sublime_plugin.EventListener):
    def modify_syntax (self, view):
        if view.window () == None:
            return

        swapSyntax = view.settings ().get ('using_babel_js', False)
        curSyntax  = view.settings ().get ('syntax')
        variables  = view.window ().extract_variables ()
        extension  = variables['file_extension']

        if swapSyntax is True and extension == 'js' and "Babel" not in curSyntax:
            view.set_syntax_file ('Packages/Babel/JavaScript (Babel).sublime-syntax')

    def on_load (self, view):
        self.modify_syntax (view)

    def on_post_save (self, view):
        self.modify_syntax (view)

With this in place, if you choose Project > Edit Project from the menu, you can include a using_babel_js setting to enable the plugin for JavaScript files in that project. An example might be:

{
    "folders":
    [
        {
            "path": "."
        }
    ],
    "settings":
    {
        "using_babel_js": true
    }
}

What this is doing is checking every time you load or save a file to see if it should swap the syntax from the default to the Babel JSX syntax, which it does only for files with the extension .js that are not already using Babel as the syntax.

Upvotes: 3

Related Questions