语法高亮显示sublime中的反应代码

时间:2016-12-25 07:55:16

标签: javascript reactjs sublimetext3 syntax-highlighting

我开始在sublime文本中编写一些基本的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);

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

5 个答案:

答案 0 :(得分:75)

安装babel修复了语法高亮。

在sublime3上安装babel的步骤:

  1. 对于Windows: Ctrl + Shift + P 对于mac: Cmd的 + + P
  2. 然后输入 install选择 Package control: Install Package
  3. 然后输入 Babel选择 'Babel-Snippets'。它会在短时间内安装babel。
  4. 然后在Sublime3编辑中设置Babel语法 View > Syntax > Babel > Javascript
  5. 对于某些用户,在步骤4中缺少Babel。他们可以另外安装 Babel,按照相同的步骤选择Babel而不是步骤3中Babel-Snippets

    检查我测试了它:

    After

答案 1 :(得分:4)

您需要安装babel-sublime插件。

您可以从崇高的package control安装。

以下是链接 - https://github.com/babel/babel-sublime

答案 2 :(得分:1)

  • 第 1 步 - 转到包控制(ctrl + shift + p
  • 第 2 步 - 选择安装包
  • 第 3 步 - 搜索 JSX 插件并安装它。
  • 第 4 步 - 然后在 Sublime3 编辑器中设置 JSX 语法:查看 > 语法 > JSX。

使用带有 .jsx 扩展名的文件名

答案 3 :(得分:0)

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

答案 4 :(得分:0)

1- 进入包裹控制 2- 搜索 naomi-syntax 并安装它。 3- 然后在 Sublime3 Editor 中设置 naomi-syntax 语法 来自:查看 > 语法 > naomi-syntax。