Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React.js files syntax in sublime text 3

i am using sublime text 3 as my code editor,i have written a basic hello world example in React.but the coloring is improper on the code ,i have tried installing Babel plugin but even after that also the coloring doesn't seem to work ,as you can see the image below

enter image description here

like image 863
yasar Avatar asked May 11 '16 06:05

yasar


People also ask

Can we use Sublime Text for React?

In order to install it, go to Sublime Text and open the console by pressing (ctrl + `) (regardless if you are on Windows, Linux or OS X), or go to View > Show Console then (update: 06/07/18) go to the official installation page, and copy the Sublime Text 3 version of the code, then paste it into the Sublime Text ...

What syntax does React use?

Most React developers use a special syntax called “JSX” which makes these structures easier to write.


3 Answers

Just installing it isn't enough, you have to also tell SublimeText to use it.

Either do

a) Ctrl-Shift-P, type "Babel" and select Set Syntax: Javascript(Babel)

or

b) Go to the menu and do View->Syntax->Open all with current extension as...->Babel->Javascript(Babel).

like image 74
ivarni Avatar answered Oct 27 '22 00:10

ivarni


You could follow the below mentioned steps:-

Setting babel as the default syntax

To set it as the default syntax for a particular extension:

  1. Open a file with that extension,
  2. Select View from the menu,
  3. Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
  4. Repeat this for each extension (e.g.: .js and .jsx).

Setting a Color Scheme

Babel comes bundled with Next and Monokai from Benvie/JavaScriptNext.tmLanguage. Select one from Preferences -> Color Scheme -> Babel

Courtesy: https://github.com/babel/babel-sublime

like image 9
a3.14_Infinity Avatar answered Oct 27 '22 02:10

a3.14_Infinity


This might possibly help you out...follow below steps

  1. press Ctrl + Shift + P
  2. Doing so, Command Palette pops up and there type : Package control . And then select the option Package Control: install package
  3. Now typein and select 'Babel'
  4. Now open 'View' menu and Navigate to Syntax, Open all with current extension as…, Babel, Javascript (Babel).
like image 1
Robin Avatar answered Oct 27 '22 01:10

Robin