Syntaxhervorhebung für Reaktionscode in sublime

76

Ich habe angefangen, einen grundlegenden React-Code in erhabenem Text zu schreiben. So sieht meine Syntaxhervorhebung aus. Es ist teilweise hervorgehoben. Gibt es ein vorgeschlagenes großartiges Plugin, mit dem ich ein vollständiges Syntax-Highlight sehen kann?

Geben Sie hier die Bildbeschreibung ein

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

BEARBEITEN: [Fehlerhafte Syntax behoben, Codetext hinzugefügt]

Nein, ich bin
quelle
1
Ich denke, es könnte ein Problem in Ihrem Code geben. Sie haben möglicherweise vergessen, ein Tag oder etwas anderes zu schließen.
Codesingh

Antworten:

171

Durch die Installation von babel wird die Syntaxhervorhebung behoben.

Schritte zum Installieren von babel auf sublime3:

  1. Für Windows: Drücken Sie Ctrl+ Shift+ P Für Mac: Cmd + Shift+P
  2. Dann tippen install und auswählen Package control: Install Package
  3. Dann tippen Babel und auswählen 'Babel-Snippets' . Es wird babel in wenigen Augenblicken installieren.
  4. Stellen Sie dann die Babel-Syntax im Sublime3-Editor ein von :View > Syntax > Babel > Javascript

Bei einigen Benutzern Babelfehlte in Schritt 4. Sie können zusätzlich installieren, Babel indem Sie dieselben Schritte ausführen und Babeldiese Zeit anstelle von Babel-SnippetsSchritt 3 auswählen.

Überprüfen Sie, ob ich es getestet habe:

Geben Sie hier die Bildbeschreibung ein

MYGz
quelle
3
Vielen Dank. Eigentlich war ich verwirrt, weil das Babel-Paket nicht Babel heißt, sondern Babel-Snippets. Auf jeden Fall hat es bei mir funktioniert.
noi.m
2
Für Mac-Benutzer ist escmd + shift + p
NateH06
5
Es hat mit dem BabelPlugin für mich funktioniert. Mit dem Babel SnippetsPlugin wurde die Babel-Syntax nicht in der Liste angezeigt. Ich verwende Sublime Text 3 über Windows.
fsinisi90
6
Babel fehlt nach der Installation von Babel-Snippets in der Syntax. Installierte das Babel und es funktioniert.
Abdul Qadir
3
Schritt 4 oben war das fehlende Stück für mich. Ich wusste nicht, dass ich es sagen musste, um Babel zu benutzen. Danke!
Vida
4

Sie müssen das babel-sublimePlugin installieren .

Sie können es von package controlsublime installieren .

Hier ist der Link - https://github.com/babel/babel-sublime

Prakash Sharma
quelle
Ich sehe die Option 'Babel' nicht in meinem Paketmanager. Haben Sie dies manuell installiert?
noi.m
Nun, es ist für erhabene 3.
Prakash Sharma
Hast du erhabenen Text 2?
Prakash Sharma
2
Ich habe sublime3. Wie oben erwähnt, heißt das Paket nicht Babel, sondern Babel-Snippets.
noi.m
Beachten Sie, dass Sie das Plugin noch aktivieren müssen, indem Sie Ansicht -> Syntax -> Babel -> Javascript wie oben erwähnt auswählen.
Kurt Peek
-1

Ich konnte dies lösen, indem ich die Syntax auf JSX setzte. Ich musste dieses Plugin nicht installieren.

DaveWoodall.com
quelle
4
JSX ist dafür besser als JS, aber das Babel-Plugin behandelt viele Fälle besser, z. B. <Input onChange={input.onChange} placeholder={'Type here'} />behandelt das Hervorheben der JSX-Syntax das Ganze placeholder={'Input your email'}wie eine Zeichenfolge, während das Babel-Plugin es korrekt
hervorhebt
Wie stelle ich die Syntax ein?
Naveed Hasan