syntax highlighting for react code in sublime
Solution 1
Installing babel fixes the syntax highlighting.
Steps to install babel on sublime3:
- For windows: Press Ctrl+Shift+P For mac: Cmd+Shift+P
- Then type
install
and selectPackage control: Install Package
- Then type
Babel
and select'Babel-Snippets'
. It will install babel in few moments.
- 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:
Solution 2
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
- 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
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.
noi.m
Updated on July 08, 2022Comments
-
noi.m almost 2 years
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?
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]