1. ホーム
  2. javascript

[解決済み] sublimeでのreactコードのシンタックスハイライト

2022-02-09 13:41:32

質問

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

EDIT: [一部不正確な構文を修正、コードテキストを追加].

解決するには?

babelをインストールすると、シンタックスハイライトが修正されます。

sublime3 に babel をインストールする手順です。

  1. Windowsの場合。 プレス Ctrl + シフト + P macの場合。 Cmd + シフト + P
  2. 次に タイプ install セレクト Package control: Install Package
  3. 次に タイプ Babel セレクト 'Babel-Snippets' . 数分でbabelがインストールされます。
  4. 次に バベルの構文を設定する Sublime3エディタで から : View > Syntax > Babel > Javascript

一部のユーザー向け Babel が手順 4 で欠落していました。彼らは を追加でインストールします。 Babel を選択し、同じ手順で Babel の代わりに、今回は Babel-Snippets を実行します。

Check テストしてみました。