In Sublime Text 3, come si abilita Emmet per i file JSX?

Question

Avevo utilizzato in precedenza Allan Hortle's JSX package finché non ho riscontrato un problema con il modo in cui gestiva l'evidenziazione della sintassi. Ho poi notato che esiste un pacchetto ufficiale, sublime-react.

Con il pacchetto di Allan Hortle, ha incluso un frammento nel Preferences > Key Bindings – User per abilitare la funzionalità Emmet che assomiglia a questo:

{ 
    "keys": ["tab"], 
    "command": "expand_abbreviation_by_tab", 
    "context": [ 
     { 
      "operand": "source.js.jsx", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector" 
     } 
    ] 
} 

Questo frammento non sembra lavorare con il pacchetto ufficiale sublime-reagire. Sembra essere qualcosa da modificare con i binding chiave ma una lettura iniziale della documentazione di Sublime non ha prodotto alcuna luce sull'argomento. Aiuto?

Answer 1

Se si digita shift+super+p in un file, verrà visualizzato il contesto della selezione corrente in basso a sinistra.

La prima parola è sempre il tipo di file di base. (source.js, text.html) Nel caso dello JSX ho scelto di cambiare questo a source.js.jsx. Questo perché prima di essere compilato JSX non è davvero javascript, anche se sembra piuttosto simile. Ci sono molti completamenti e zucchero sublime che ti piacerebbe accadere in JSX ma non in JS. sublime-react invece utilizza semplicemente il vecchio source.js.

Quindi questo frammento di quello che hai è giusto basta sostituire source.js.jsx con source.js

Answer 2

Dal JSX-SublimeText Package readme: di default

di Emmet è quello di non supportare i file JS. Quindi dovrai aggiungere una scorciatoia da tastiera alla scheda completa nei file JSX.

aprono Preferences > Key Bindings - user e aggiungere questa voce:

{ 
    "keys": ["tab"], 
    "command": "expand_abbreviation_by_tab", 
    "context": [ 
     { 
      "operand": "source.js.jsx", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector" 
     }, 
     { 
      "key": "selection_empty", 
      "operator": "equal", 
      "operand": true, 
      "match_all": true 
     } 
    ] 
} 

Answer 3

Proprio in espansione su questa risposta.
Non si può desiderare che tutte le lettere che scrivi siano espandibili in html. È possibile impostare un altro oggetto aggiuntivo nel proprio contesto per limitare quando viene applicato il completamento della tabulazione. Questo codice è stato trovato in this gist tuttavia ho modificato il Regex per essere un po 'meglio.

{ 
    "keys": ["tab"], 
    "command": "expand_abbreviation_by_tab", 
    "context": [{ 
     "operand": "source.js", 
     "operator": "equal", 
     "match_all": true, 
     "key": "selector" 
    },{ 
     "key": "preceding_text", 
     "operator": "regex_contains", 
     "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)", 
     "match_all": true 
    },{ 
     "key": "selection_empty", 
     "operator": "equal", 
     "operand": true, 
     "match_all": true 
    }] 
} 

Avrete anche bisogno di installare i pacchetti RegReplace e linea di comando come consigliato nella sostanza anche per arrivare span.class a trasformarsi in <span className="class"></span>
Se vuoi aggiungere più elementi di ascoltare solo per aggiungere loro di lista Intendi dire (a\\b|div|span|p\\b|button|strong)
il \\b riferisce un confine di parola e si ferma la seguente dall'espansione abc in <abc></abc>

Answer 4

In aprile 2015 Emmet added support for jsx, ma non funziona per impostazione predefinita. Bene, per la mia sorpresa in realtà stava lavorando con la scorciatoia control + E, ma volevo usare la chiave TAB per espanderla. Seguendo il official instructions ha fatto il trucco per me.

Fondamentalmente, ho dovuto incollare il seguente dentro il mio utente il file combinazioni di tasti ( Preferences>Key Bindings — User):

{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": 
    [ 
     { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" }, 
     { "match_all": true, "key": "selection_empty" }, 
     { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" }, 
     { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" }, 
     { "match_all": true, "key": "is_abbreviation" } 
    ] 
} 

Questo è il codice senza tutti i commenti, e con la giusta SCOPE_SELECTOR a posto.

Answer 5

utilizzare semplicemente ctrl+e (cmd+e su mac) anziché scheda per far funzionare emmet all'interno di jsx. per esempio se io espandere (usando ctrl+e)

render(){ 
     return(
      .modal>.btn.btn-success{Click Me} 
     ) 
    } 

tanto sono

render(){ 
     return(
      <div className="modal"> 
        <div className="btn btn-success">Click Me</div> 
       </div> 
     ) 
    }