崇高反应代码的语法高亮


77

我开始用崇高的文字编写一些基本的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);

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


1
我认为您的代码中可能存在问题,您可能忘记了关闭某些标签或其他任何东西。
Codesingh 2013年

Answers:


172

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

在sublime3上安装babel的步骤:

  1. Windows:Ctrl+ Shift+ P Mac: Cmd + Shift+P
  2. 然后输入 install选择 Package control: Install Package
  3. 然后键入 Babel选择 'Babel-Snippets'。几分钟后它将安装babel。
  4. 然后在Sublime3 Editor中以下位置设置Babel语法View > Syntax > Babel > Javascript

对于某些用户,Babel步骤4中缺少该用户。他们可以按照相同的步骤进行安装 Babel并选择Babel此时间,而不是Babel-Snippets在步骤3中进行安装

检查我测试过了:

在此处输入图片说明


3
谢谢。实际上,我很困惑,因为babel软件包不是Babel,而是Babel-Snippets。无论如何,它对我有用。
noi.m

2
对于Mac用户来说,打开命令面板是cmd + shift + p
NateH06'6

5
它与Babel我的插件一起工作。使用该Babel Snippets插件时,Babel语法没有出现在列表中。我在Windows上使用Sublime Text 3。
fsinisi90

6
安装Babel-Snippets之后,语法中会缺少Babel。安装了通天塔,它可以工作。
阿卜杜勒·卡迪尔

3
上面的第4步是我所缺少的部分。没意识到我要告诉它使用Babel谢谢!
维达

4

您需要安装babel-sublime插件。

您可以从package controlSublime安装它。

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


我在包裹管理器中看不到“ Babel”选项。您手动安装了吗?
noi.m

那么它是崇高的3
普拉卡什·夏尔马

你有崇高的文字2吗?
普拉卡什·夏尔马

2
我有崇高的 正如我在上面的评论中提到的那样,该软件包不是Babel,而是Babel-Snippets。
noi.m 2016年

请注意,您仍然必须通过选择“视图”->“语法”->“ Babel”->“ Javascript”来“激活”插件,如上所述。
Kurt Peek

-1

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


4
JSX比JS更好,但是Babel插件可以更好地处理许多情况,例如,对于<Input onChange={input.onChange} placeholder={'Type here'} />,,JSX语法高亮将整个placeholder={'Input your email'}字符串像字符串一样对待,而Babel插件正确地将其高亮
user56reinstatemonica8

如何设置语法?
Naveed Hasan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.