sublime 中反应代码的语法高亮答案

【问题标题】：syntax highlighting for react code in sublimesublime 中反应代码的语法高亮
【发布时间】：2017-05-10 05:28:18
【问题描述】：

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

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

【问题讨论】：

我认为您的代码可能有问题，您可能忘记关闭某些标签或其他任何内容。

标签： javascript reactjs sublimetext3 syntax-highlighting

【解决方案1】：

安装 babel 修复语法高亮。

在 sublime3 上安装 babel 的步骤：

对于 windows： 按 Ctrl+Shift+P 对于 mac： Cmd+Shift+P
然后输入 install 和选择 Package control: Install Package
然后键入 Babel 和选择 'Babel-Snippets'。它将在几分钟内安装 babel。
然后在 Sublime3 Editor from中设置 Babel 语法：View > Syntax > Babel > Javascript

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

检查我测试过：

【讨论】：

谢谢。实际上我很困惑，因为 babel 包不称为 Babel，而是称为 Babel-Snippets。无论如何，它对我有用。
mac用户打开命令面板是cmd + shift + p
它适用于我的 Babel 插件。使用Babel Snippets 插件，Babel 语法没有出现在列表中。我在 Windows 上使用 Sublime Text 3。
安装 Babel-Snippets 后语法中缺少 Babel。安装了 Babel，它就可以工作了。
上面的第 4 步对我来说是缺失的部分。没有意识到我必须告诉它使用 Babel 谢谢！

【解决方案2】：

你需要安装babel-sublime插件。

您可以从 sublime 的package control 安装它。

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

【讨论】：

我在我的包管理器中没有看到“Babel”选项。你是手动安装的吗？
好吧，它适用于 sublime 3。
你有 sublime text 2 吗？
我有 sublime3。正如我在上面的评论中提到的，这个包不叫 Babel，而是叫 Babel-Snippets。
请注意，您仍然需要通过选择 View -> Syntax -> Babel -> Javascript 来“激活”插件，如上所述。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

1- 转到包控制 2- 搜索 naomi-syntax 并安装它。 3- 然后在 Sublime3 Editor 中设置 naomi-syntax 语法来自：视图 > 语法 > naomi-syntax。

【讨论】：

【解决方案5】：

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

【讨论】：

JSX 在这方面比 JS 更好，但是 Babel 插件可以更好地处理许多情况，例如对于 <Input onChange={input.onChange} placeholder={'Type here'} /> 这样的东西，JSX 语法高亮将整个 placeholder={'Input your email'} 视为一个字符串，而 Babel 插件正确地高亮它
如何设置语法？