103 votes

mise en évidence de la syntaxe pour réagir du code en sublime

J'ai commencé à écrire du code React de base dans un texte sublime. Voici à quoi ressemble ma coloration syntaxique. C'est en partie mis en évidence. Y a-t-il un plugin sublime suggéré que je peux utiliser pour voir une mise en évidence de la syntaxe complète?

entrez la description de l'image ici

 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: [Correction d'une syntaxe incorrecte, texte de code ajouté]

236voto

MYGz Points 8170

L'installation de babel fixe la coloration syntaxique.

Étapes pour installer babel sur sublime3:

  1. Pour windows: Appuyez sur Ctrl+Maj+P Pour mac: Cmd+Maj+P
  2. Puis tapez install et sélectionnez Package control: Install Package
  3. Puis tapez Babel et sélectionnez 'Babel-Snippets'. Il va installer babel dans quelques instants.
  4. Ensuite, définissez la Babel de la syntaxe dans Sublime3 Éditeur de: View > Syntax > Babel > Javascript

Pour certains utilisateurs, Babel manquait à l'étape 4. Ils peuvent en outre installer Babel en suivant la même procédure et en sélectionnant Babel cette fois, au lieu de Babel-Snippets à l'étape 3.

Vérifier je l'ai testé:

enter image description here

4voto

Prakash Sharma Points 6829

Vous devez installer le plugin babel-sublime .

Vous pouvez l'installer à partir de package control de sublime.

Voici le lien - https://github.com/babel/babel-sublime

-1voto

wwwoodall Points 80

J'ai pu résoudre ce problème en définissant la syntaxe sur JSX. Je n'avais pas besoin d'installer ce plugin.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X