语法高亮显示sublime中的反应代码 [英] syntax highlighting for react code in sublime

问题描述

我开始在sublime文本中编写一些基本的React代码。这是我的语法高亮显示。其部分突出显示。是否有任何建议的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?

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

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

[Fixed some incorrect syntax, Added code text]

推荐答案

安装babel修复语法高亮。

Installing babel fixes the syntax highlighting.

1. 对于Windows：按 Ctrl + Shift + < kbd> P 对于mac： Cmd + Shift + P


2. 然后键入 安装并选择 包控制：安装包


3. 然后输入 Babel 和选择 '巴贝尔-片断'。它将在短时间内安装babel。
   


4. 然后在Sublime3编辑中设置Babel语法 ：查看>语法> Babel> Javascript

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

对于某些用户， Babel 是他们可以另外安装 Babel ，按照相同的步骤选择 Babel 这一次，而不是步骤3中的 Babel-Snippets 。

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.

检查我测试了它：

这篇关于语法高亮显示sublime中的反应代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！