javascript - sublime 中 react 代码的语法高亮显示

Question

我开始用 sublime text 编写一些基本的 React 代码。这是我的语法突出显示的样子。它部分突出显示。有什么建议的 sublime 插件可以用来查看完整的语法高亮显示吗？

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

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

Answer 1

安装 babel 修复语法高亮。

在sublime3上安装babel的步骤:

1. 对于 windows: 按 Ctrl+Shift+P 对于 mac: Cmd+Shift+P
2. 然后键入 安装 并选择 包控制:安装包
3. 然后键入 Babel 并选择 'Babel-Snippets'。稍后它会安装 babel。
   
4. 然后在 Sublime3 编辑器中设置 Babel 语法来自:View > Syntax > Babel > Javascript

对于某些用户，Babel 在第 4 步中丢失。他们可以另外安装 Babel，方法是按照相同的步骤并选择 这次 Babel 而不是步骤 3 中的 Babel-Snippets。

检查我测试过它: