javascript-崇高反应代码的语法突出显示

我开始用崇高的文字编写一些基本的React代码。 这是我的语法突出显示的样子。 其部分突出。 我可以使用任何建议的Sublime插件来查看完整的语法突出显示吗?

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);

编辑:[修复了一些不正确的语法,添加了代码文本]

3个解决方案
97 votes

安装babel可修复语法突出显示。

在Sublime 3中安装babel的步骤:

  1. Windows:按Ctrl + Shift + P Mac:Cmd + Shift + P
  2. 然后输入Babel并选择Babel
  3. 然后键入Babel,然后选择Babel。它将在几分钟后安装babel。
  4. 然后在Sublime3编辑器中从以下位置设置Babel语法:Babel

对于某些用户,步骤4中缺少Babel。他们可以通过执行相同的步骤并这次选择Babel代替步骤3中的Babel,来另外安装Babel

检查我测试过了:

enter image description here

MYGz answered 2020-02-20T23:38:18Z
5 votes

您需要安装package control插件。

您可以从package control sublime安装它。

这是链接-[https://github.com/babel/babel-sublime]

Prakash Sharma answered 2020-02-20T23:38:46Z
0 votes

通过将语法设置为JSX,我能够解决此问题。 我不需要安装此插件。

DaveWoodall.com answered 2020-02-20T23:39:06Z
translate from https://stackoverflow.com:/questions/41319547/syntax-highlighting-for-react-code-in-sublime