syntax highlighting for react code in sublime

JavascriptReactjsSublimetext3Syntax Highlighting

Javascript Problem Overview


I'm started writing some basic React code in sublime text. Here is what my syntax highlighting looks like. Its partly highlighted. Is there any suggested sublime plugin i can use to see a complete syntax highlight?

enter image description here

import React, { Component } from 'react'
import { connect } from 'react-redux'	// <-- is the glue between react and redux
import { bindActionCreators } from 'redux'
import { selectBook } from '../actions/index'

// there is no intrinsic connection between React and Redux
// they are two seperate libraries
// they are connected using a seperate library called ReactRedux

// container? its a React component that hasa direct connection to state managed by Redux
class BookList extends Component {

	constructor(props) {
		super(props)
		//this.props = props;
	}

	renderList() {
		return this.props.books.map((book) => {
			return (
				<li key={book.title} className="list-group-item">{book.title}</li>
			)
		})
	}

	render() {
		return (
			<ul className="list-group col-sm-4">
				{this.renderList()}
			</ul>
		)
	}

}

// function is the glue between react and redux
function mapStateToProps(state) {
	// Whatever gets retrieved from here will show up as props inside
	// of book-list

	return {
		books: state.books
	}
}

// anything returned from this function will end up as props on the BookList container
function mapDispatchToProps(dispatch) {
	return bindActionCreators({selectBook: selectBook}, dispatch)
}

// Promote BookList from a component to a container - it needs to know
// about this new dispatch method, selectBook. Make it available as a prop
export default connect(mapStateToProps, mapDispatchToProps)(BookList);

EDIT: [Fixed some incorrect syntax, Added code text]

Javascript Solutions


Solution 1 - Javascript

Installing babel fixes the syntax highlighting.

Steps to install babel on sublime3:
  1. For windows: Press Ctrl+Shift+P For mac: Cmd+Shift+P
  2. Then type install and select Package control: Install Package
  3. Then type Babel and select 'Babel-Snippets'. It will install babel in few moments.
  4. Then set the Babel syntax in Sublime3 Editor from: View > Syntax > Babel > Javascript

For some users, Babel was missing in step 4. They can additionally install Babel by following the same steps and selecting Babel this time instead of Babel-Snippets in step3.

Check I tested it:

enter image description here

Solution 2 - Javascript

You need to install babel-sublime plugin.

You can install it from package control of sublime.

Here is the link - https://github.com/babel/babel-sublime

Solution 3 - Javascript

  • Step 1 - Go to Package Control ( ctrl + shift + p)
  • Step 2 - Select install package
  • Step 3 - Search for JSX plugin and install it.
  • Step 4 - Then set the JSX syntax in Sublime3 Editor from: View > Syntax > JSX.

Use filename with .jsx extension

Solution 4 - Javascript

1- Go to package control 2- Search for naomi-syntax and install it. 3- Then set the naomi-syntax syntax in Sublime3 Editor from: View > Syntax > naomi-syntax.

Solution 5 - Javascript

I was able to solve this by setting the syntax to JSX. I didn't need to install this plugin.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionnoi.mView Question on Stackoverflow
Solution 1 - JavascriptMohammad YusufView Answer on Stackoverflow
Solution 2 - JavascriptPrakash SharmaView Answer on Stackoverflow
Solution 3 - JavascriptRahul RajView Answer on Stackoverflow
Solution 4 - JavascriptRahul RajView Answer on Stackoverflow
Solution 5 - JavascriptDaveWoodall.comView Answer on Stackoverflow