14

I'm trying to set up my Sublime Text 3 for React like the screenshots in this link, didn't succeed to make it though.

Maybe I have some extra packages or settings that would show my index.js syntax like below:

enter image description here

sublime-settings:

{
    "auto_complete": true,
    "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
    "dictionary": "Packages/Language - English/en_US.dic",
    "ensure_newline_at_eof_on_save": false,
    "font_face": "MONACO",
    "font_size": 16,
    "show_line_endings": true,
    "show_panel_on_build": true,
    "spell_check": true,
    "theme": "Adaptive.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true
}

I also have these packages:

enter image description here

How do I do that?

(Thanks! I'm new to React/js/jsx)

Community
  • 1
  • 1
Emma
  • 27,428
  • 11
  • 44
  • 69
  • I was using ST as a main IDE until around 2017 and I still use ST3 for its speed, but only for quickly hacking some small snippets, text files, etc. For serious development I started using VSCode. The experience is much better, I suggest you to give it a try. The ecosystem is much more developed around VSCode. – Qwerty Jan 27 '22 at 23:01

3 Answers3

20

The best package I found for react/jsx on sublime was Naomi. It deals with syntax highlighting and has a lot of other features.

https://packagecontrol.io/packages/Naomi

cd3k
  • 719
  • 5
  • 8
  • 1
    No worries, if the syntax highlighting isn't working try removing some of the other packages, they can often conflict with each other. – cd3k Mar 14 '20 at 04:53
12

Use the Default JSX style of Sublime Text.

GoTo:

View -> Syntax -> Javascript -> JSX

Alternatively you can select the syntax from the bottom right status bar menu of Sublime text.

Jayesh
  • 1,511
  • 1
  • 16
  • 37
1

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

Axifive
  • 1,159
  • 2
  • 19
  • 31