在Sublime中为React代码进行语法高亮处理

103

我开始在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);

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


1
我认为你的代码可能存在问题,你可能忘记关闭某些标签或其他东西。 - Codesingh
5个回答

236

安装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编辑器中的Babel语法View > Syntax > Babel > Javascript

对于一些用户,在步骤4中缺少了Babel。他们可以通过遵循相同的步骤并在第3步中选择Babel而不是Babel-Snippets额外安装Babel

测试如图所示:

enter image description here


3
谢谢。实际上我有些困惑,因为Babel软件包不是叫做Babel,而是叫做Babel-Snippets。无论如何,对我来说它起作用了。 - noi.m
8
对我来说,使用 Babel 插件起作用了。但是使用 Babel Snippets 插件时,Babel 语法未显示在列表中。我正在 Windows 上使用 Sublime Text 3。 - fsinisi90
2
安装了Babel-Snippets之后,“Babel”在语法菜单中消失了。我安装了常规的“Babel”,然后在语法菜单中得到了一个Babel选项。我应该满足于此,还是Babel-Snippets更好? - KidBilly
8
安装 Babel-Snippets 后,语法中缺少了 Babel。安装了 Babel,它可以正常工作。 - Abdul Qadir R.
3
以上的第四步是我所缺失的关键。我没有意识到我需要告诉它使用Babel。谢谢! - Vida
显示剩余5条评论

5

我在我的软件包管理器中没有看到“Babel”选项。你手动安装了吗? - noi.m
这是针对Sublime 3的。 - Prakash Sharma
你有Sublime Text 2吗? - Prakash Sharma
2
我有Sublime3。正如我在上面的评论中提到的,该软件包不叫Babel,而是叫做Babel-Snippets。 - noi.m
3
请注意,您仍然需要按照上述提到的步骤选择“视图->语法->Babel->Javascript”来“激活”插件。 - Kurt Peek

4
  • 步骤1 - 前往Package Control(ctrl + shift + p
  • 步骤2 - 选择安装软件包
  • 步骤3 - 搜索JSX插件并进行安装。
  • 步骤4 - 然后从 Sublime3 编辑器中设置 JSX 语法:查看 > 语法 > JSX。

请使用扩展名为.jsx的文件名


1

1- 打开包管理器 2- 搜索naomi-syntax并安装。 3- 然后在Sublime3编辑器中设置naomi-syntax语法, 从:View > Syntax > naomi-syntax。


0

我通过将语法设置为JSX来解决了这个问题。我不需要安装这个插件。


4
JSX比JS更适合这个场景,但Babel插件在许多情况下处理得更好,例如对于类似<Input onChange={input.onChange} placeholder={'Type here'} />这样的内容,JSX语法高亮将整个placeholder={'Input your email'}看作一个字符串,而Babel插件则能正确地进行语法高亮。 - user56reinstatemonica8
如何设置语法? - Naveed Hasan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接