Setting up Sublime Text for React (JSX) Development

Sublime setup for React(JSX)

You’ve probably heard about the popular JavaScript framework by Facebook – React. It is used by many popular websites, including Facebook itself and Instagram. You must give it a try, if you have not yet.

This post is a guide to set up Sublime Text 3 for React Development. To be precise, setting it up for JSX.

Packages to Install

You should install following packages to make your development peaceful.

  • sublime-react – Snippets and syntax highlighting for React.js / JSX
    • Open the command palette: ⌘+shift+p on MacOS/Linux, ctrl+shift+p on Windows
    • type install, select Package Control: Install Package
    • type React, select ReactJS
  • SublimeLinter-jsxhint – SublimeLinter 3 plugin for JSX (React.js), using jsxhint.
    • install jsxhint on your system
      npm install -g jsxhint
    • Open the command palette: ⌘+shift+p on MacOS/Linux, ctrl+shift+p on Windows
    • type install, select Package Control: Install Package
    • type jsxhint, select SublimeLinter-jsxhint

Get Emmet working

These two package are enough to get started. However, if you also use Emmet, then you would surely miss it while writing React Component. So now the problems are

  • Using emmet in jsx files
  • Emmet expands text when js autocomplete needed
  • Using className instead of class

How it works

  • Install plugin RegReplace
  • Install plugin Chain Of Command
  • Add following code in your KeyBinding – Users. Default (OSX).sublime-keymap

    [
      {
        "keys": ["tab"],
        "command": "chain", 
        "args": {
          "commands": [
            ["expand_abbreviation_by_tab"],
            ["reg_replace", {"replacements": ["js_class"]}]
          ]
        },
        "context": [
          {"operand": "source.js", "operator": "equal", "match_all": true, "key": "selector"}, 
          {"key": "preceding_text", "operator": "regex_contains", "operand": "(\\w+>\\w+|\\s(\\.?|a|div|span|p|button)\\.\\w+)", "match_all": true},
          {"key": "selection_empty", "operator": "equal", "operand": true, "match_all": true}
        ]
     
      }
    ]
  • Add following code in you reg_replace.sublime-settings

    {
        "replacements": {
            "js_class": {
                "find": " class=\"",
                "replace": " className=\"",
                "greedy": true,
                "case": false
            }
        }
    }

Now Emmet expansions would also be working.

Happy hacking 🙂

5 Responses

  1. Mars #

    you’re awesome man, thanks for putting this together I would’ve never figured this out.

    Reply
  2. Ollie #

    I believe sublime-react is now deprecated for babel-sublime now.

    Reply
  3. andresn #

    SublimeLinter-jsxhint is deprecated in favor of SublimeLinter-ESLint.

    Reply
  4. Adrian #

    Thanks, this was very helpful! However, to get Emmet working, I had to use this in my key bindings instead of what you have posted above. (found it stackoverflow here: http://stackoverflow.com/a/31767887/2356383)

    { “keys”: [“tab”], “command”: “expand_abbreviation_by_tab”, “context”:
    [
    { “operand”: “source.js”, “operator”: “equal”, “match_all”: true, “key”: “selector” },
    { “match_all”: true, “key”: “selection_empty” },
    { “operator”: “equal”, “operand”: false, “match_all”: true, “key”: “has_next_field” },
    { “operand”: false, “operator”: “equal”, “match_all”: true, “key”: “auto_complete_visible” },
    { “match_all”: true, “key”: “is_abbreviation” }
    ]
    }

    Reply

Leave a Reply