Sublime Forum

Support for React/JSX

#1

Hello Sublime community,

Currently, my situation is similar to this issue at stackoverflow.

The workaround provided is good, but not enough. This is because it only works when the opening and closing tag are exactly identical – for example,

<div></div>

and does not work when otherwise –

<div className="xxx"></div>

The syntax highlighting for React/JSX has been provided by Babel (github:babel-sublime) but the need to type [return][return][up][tab][tab] or [return][shift+return][tab] and then some formatting is killing me.

Please, Sublime gods, help me and other React/JSX web developers. At least allow the auto indent after return inside a parentheses.

0 Likes
#2

Try this:

    {
        "keys": ["enter"],
        "command": "insert_snippet",
        "args": { "contents": "\n\t$0\n" },
        "context": [
            { "key": "selector", "operator": "equal", "operand": "source.js" },
            { "key": "preceding_text", "operator": "regex_contains", "operand": ">$", "match_all": true },
            { "key": "following_text", "operator": "regex_contains", "operand": "^<", "match_all": true },
        ]
    },

FYI, babel-sublime has not been actively maintained for some time, and it has a number of longstanding bugs. As a replacement, I suggest JS Custom, which is based directly on the core JavaScript syntax.

3 Likes
#3

Thank you!!! The snippet works wonderfully, you should submit it to Stackoverflow to help more others!

I also have swapped in your JS Custom package and yes indeed, not only weird bugs are resolved, I see syntax highlighting for yy in {xx.yy}. Noice!!

Thank you so much ThomSmith!

By the way, do you have any recommended package for React/JSX developer? I mean, what’s your current packages set for Sublime?

0 Likes
#4

I actually travel pretty light when it comes to packages, at least compared to some. For JS, I use SublimeLinter and SublimeLinter-eslint. My full installed list is as follows:

  • A File Icon
  • AutomaticPackageReloader
  • BracketHighlighter
  • CFML
  • ChannelRepositoryTools
  • ColorSchemeUnit
  • Indent XML
  • INI
  • JSCustom
  • OverrideAudit
  • Package Control
  • PackageDev
  • PackageResourceViewer
  • SaneSnippets
  • Sass
  • ScopeAlways
  • ShellCommand
  • SubLilyPond
  • SublimeLinter
  • SublimeLinter-eslint
  • SublimeOnSaveBuild
  • TerminalView
  • TypeScript Syntax
  • YAMLMacros

I also have a pile of user scripts and key bindings, including for indentation.

I deliberately do not use Emmet because it’s incredibly buggy and breaks things all the time.

2 Likes
#5

You cannot imagine how thankful I am.
Thank you. (´•̥̥̥ω•̥̥̥`̀ू๑)

0 Likes
#6

Thom, I have been trying to comment in JSX and I found your post over here. I do agree that a critical support for React/JSX is necessary for a big share of React developers and to be able to make improvements to the Default on issues like these will be helpful to all parties.

I mean, how would users feel if they can’t even comment with [ctrl+/]. After some time spending looking around we got a working hack here but it would be awesome for us to add this to Default so that users spend less time finding workarounds and more time on developing.

Also, is it possible for you to share some of your React/JSX-related snippets for this post?

0 Likes