Sublime Forum

ReactJS syntax highlighting in SublimeText

#1

Hi, few days ago I’ve started using reactjs and I’ve tested this package called babel-sublime… by default it installs version Version: v8.6.3 but if you add "install_prereleases":["Babel"] to the package control settings you’ll get the latest version which is Version: v10.0.0-beta2.

It seems latest prerelease version is much better than the previous one but it still has some very basic bugs such as comments, (opened issue about it https://github.com/babel/babel-sublime/issues/390

Thing is, I’ve installed VsCode specifically to see how that looked over there with reactjs syntax and that tool does a perfect job out of the box… Obviously I’m not gonna start using vscode for this reason alone but I was wondering what’s my best chance to work properly with ReactJS in Sublime.

Is babel-sublime the “state of the art” reactjs package to work with or is there anything better? From what i’ve read it seems latest version of this one works on top of customjs…

Anyway, hopefully you pro reactjs sublime coders could advice here (also advices about any other packages you use would be awesome for reactjs development)… I’d like to find a nice workflow for reactjs+sublimetext here without being forced to use VsCode :wink:

Thanks in advance!

0 Likes
#2

ST 4 has a built-in JSX syntax but I didn’t write in JSX so I have no idea how good it is. Is VSCode still using .tmlanguage-like syntax definition? If yes, I would expect it can be easily ported to ST.

0 Likes
#3

I use JSCustom for syntax highlighting JSX in Sublime Text 3. I have had no problems so far.

0 Likes
#4

Wow, that’s awesome, can’t wait for ST4 been released, do we have any estimated release date so far? About VSCode using .tmlanguage I’ve got no idea… I don’t know anything about that editor or how it works… only little test i’ve done was installing it and realized the whole highlighting reactjs was working out of the box with no issues :slight_smile:

0 Likes
#5

@UltraInstinct05 Does jscustom work ok with toggle comments? ie: this https://github.com/babel/babel-sublime/issues/390 wouldn’t be an issue with that package? I’ll try again… few hours ago i’d installed that one but nothing was happening when opening js files… i guess it needs to be configured somehow :slight_smile:

0 Likes
#6

Yup. I can toggle comments just fine.

0 Likes
#7

ST 4 JSX doesn’t seem right :thinking: ?
image

0 Likes
#8

I’ve removed babel-sublime and decided to give it a shot to JSCustom so I’ve cloned the repo as JSCustom in the Packages directory. It seems the first step you need to do is building the jsx highlighting syntaxes and theorically they will be stored in the User directory problem is when I run JS Custom: Rebuild syntaxes I’ll get this error:

Traceback (most recent call last):
  File "D:\software\sublimetext3\sublime_plugin.py", line 1052, in run_
    return self.run()
  File "D:\software\sublimetext3\Data\Packages\JSCustom\src\commands\build_syntaxes.py", line 51, in run
    replacement = get_syntax_for_scope(replacement[6:])
  File "D:\software\SUBLIM~1\Data\Packages\SUBLIM~1\st3\sublime_lib\syntax.py", line 96, in get_syntax_for_scope
    for syntax in reversed(list_syntaxes())
  File "D:\software\SUBLIM~1\Data\Packages\SUBLIM~1\st3\sublime_lib\syntax.py", line 83, in list_syntaxes
    for path in syntax_definition_paths
  File "D:\software\SUBLIM~1\Data\Packages\SUBLIM~1\st3\sublime_lib\syntax.py", line 86, in <listcomp>
    and path.with_suffix('.sublime-syntax') in syntax_definition_paths
  File "D:\software\SUBLIM~1\Data\Packages\SUBLIM~1\st3\sublime_lib\syntax.py", line 55, in get_syntax_metadata
    **SYNTAX_TYPES[path.suffix](path)
  File "D:\software\SUBLIM~1\Data\Packages\SUBLIM~1\st3\sublime_lib\syntax.py", line 26, in get_tmlanguage_metadata
    tree = plistlib.readPlistFromBytes(path.read_bytes())
  File "./python3.3/plistlib.py", line 104, in readPlistFromBytes
  File "./python3.3/plistlib.py", line 76, in readPlist
  File "./python3.3/plistlib.py", line 378, in parse
xml.parsers.expat.ExpatError: not well-formed (invalid token): line 16, column 4

Which JSCustom version you’re using over there? Over here after cloning it’s on master (v2.4.1 v3.0.0-alpha1)

0 Likes
#9

Not an expert on reactjs yet… but i’d say is not… ie: in VSCode will look like this:

showcase

0 Likes
#10

Worth filing an issue :smiley: If no one does it, I’ll create one later.

1 Like
#11

Mmmm… i’ve read a little bit the sources of JSCustom and its dependencies and i see a lot of unsupported python features by ST3’s python interpreter, ie: type hints… https://www.python.org/dev/peps/pep-0484/ . Not sure but it seems this package has been built specifically for ST4? :confused: … But @UltraInstinct05 said it should work on ST3… so i guess he’s using an older version. I’m confused

0 Likes
#12

Here is a screenshot :-

image
image.png694×517 38.3 KB

The single line comments (//) works fine but block comments (triggered by ctrl + shift + /) inserts /**/ and not {/**/} which I think is what you wanted ?

Plus not sure why clone the repo ? It should be available on PC. (and thats what I did, install it from PC)

0 Likes
#13

I’ve been using Naomi for a while now with no significant complaints.

1 Like
#14

Looks really good package… i’ve installed it and suddenly a lot of “Sublime has stopped working” dialog boxes started appearing… I’ve uninstalled that package and no more dialog boxes :open_mouth: . SublimeText3 3211 on windows over here

0 Likes
#15

@BPL The stable release of JS Custom is compatible with Sublime 3 and 4. The master branch requires Sublime 4, though it still runs in the Python 3.3 runtime.

That’s an odd error. It looks like something in the sublime_lib dependency is failing because a tmLanguage file somewhere isn’t a valid plist. The error handling there should probably be improved. You can probably avoid the problem by finding and removing/fixing the offending tmLanguage.

0 Likes