In Sublime Text 3, wie können Sie Emmet für JSX-Dateien aktivieren?

Question

Ich hatte zuvor Allan Hortle's JSX package verwendet, bis ich auf ein Problem mit der Syntaxhervorhebung stieß. Ich habe dann festgestellt, dass es ein offizielles Paket gibt, sublime-react.

Mit Allan Hortle Paket umfasste er einen Ausschnitt in den Preferences > Key Bindings – User für Emmet Funktionalität ermöglicht, die wie folgt aussieht:

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

Dieser Code-Schnipsel scheint nicht mit dem offiziellen sublimen reagiert Paket zu arbeiten. Es scheint etwas zu sein, das man mit den Tastenbindungen modifizieren könnte, aber eine erste Durchsicht der Sublime-Dokumentation brachte kein Licht auf das Thema. Hilfe?

Answer 1

Wenn Sie shift+super+p in eine Datei eingeben, können Sie den Kontext der aktuellen Auswahl links unten sehen.

Das erste Wort ist immer der Basisdateityp. (source.js, text.html) Im Fall der JSX Ich entschied mich, dies zu source.js.jsx zu ändern. Das liegt daran, dass JSX vor der Kompilierung kein Javascript ist, obwohl es ziemlich ähnlich aussieht. Es gibt viele Ergänzungen und erhabenen Zucker, die Sie gerne in JSX passieren würden, aber nicht in JS. sublime-react auf der anderen Seite verwendet einfach alt source.js.

Also das Snippet Sie haben, ist richtig Sie müssen nur source.js.jsx mit source.js

Answer 2

Von der JSX-SublimeText Package readme ersetzen:

Emmet-Standard JS-Dateien nicht unterstützt ist. Daher müssen Sie in den JSX-Dateien eine Tastenkombination zum Tabstopp hinzufügen.

öffnen Preferences > Key Bindings - user und diesen Eintrag hinzufügen:

{ 
    "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

Nur auf diese Antwort zu erweitern.
Sie möchten möglicherweise nicht, dass alle geschriebenen Buchstaben in HTML erweiterbar sind. Sie können ein weiteres zusätzliches Objekt in Ihrem Kontext festlegen, um zu beschränken, wann die Tabulatorvervollständigung angewendet wird. Dieser Code wurde in this gist gefunden, aber ich änderte die Regex etwas besser.

{ 
    "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 
    }] 
} 

Sie werden auch die Pakete RegReplace und Chain of Command installieren müssen, wie im Kern sogar empfohlen span.class zu kennen biegen in <span className="class"></span>
Wenn Sie mehr Elemente hinzufügen möchten nur hören für hinzufügen sie in die Liste dh (a\\b|div|span|p\\b|button|strong)
die \\b bezeichnet eine Wortgrenze und stoppt die folgenden von expandierenden abc in <abc></abc>

Answer 4

im April 2015 Emmet added support for jsx, aber es funktioniert nicht standardmäßig aktiviert. Nun, zu meiner Überraschung funktionierte es tatsächlich mit der Verknüpfung, aber ich wollte den TAB Schlüssel verwenden, um zu erweitern. Nach dem official instructions tat der Trick für mich.

Im Grunde hatte ich Datei der folgenden in meinen Benutzertastenbelegungen einzufügen ( 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" } 
    ] 
} 

Dies ist der Code, ohne all die Kommentare, und mit dem richtigen SCOPE_SELECTOR an seinem Platz.

Answer 5

Verwenden Sie einfach ctrl+e (cmd+e auf Mac) anstelle von Tab, um Emmet in Ihrer jsx zu arbeiten. zum Beispiel, wenn ich (mit ctrl+e) expand

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

dann bekomme ich

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