Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

syntax highlighting for react code in sublime

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]

like image 285
noi.m Avatar asked Dec 25 '16 07:12

noi.m


People also ask

How do I enable syntax highlighting in sublime?

To enable Syntax Highlighting click on “View” in the top bar, then hover your mouse over “Syntax”, and select your programming language from the list. Alternatively, if you save a document with a supported file extension, Sublime Text 3 will automatically apply the Syntax Highlighting for that language.

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 ...


1 Answers

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

like image 128
Mohammad Yusuf Avatar answered Oct 08 '22 03:10

Mohammad Yusuf