AutoVervollständigen für html-tags in den jsx (sublime text)

Ich würde gerne in der Lage sein zu verwenden von AutoVervollständigen für html-tags in meiner reagieren/jsx-code. Die gleiche Weise, die es funktioniert für html-Dateien. Kann ich konfigurieren sublime text 3 zum aktivieren von AutoVervollständigen-tags für jsx-Dateien?

Haben Sie versucht, eine der JSX oder Babel plugins, um zu sehen, wenn Sie Ihre Bedürfnisse?
Ja, ich bin mit babel-erhaben, es macht einen guten job, aber leider ist html Autovervollständigung nicht funktioniert.
Ich glaube nicht, es ist ein feature.
so ist es nur eine Reihe von snippents?
Ja, und vielleicht einige Formatierungen Kontrolle.

InformationsquelleAutor Igor Okorokov | 2015-05-04

72

Erwähnenswert, dass können Sie aktivieren Erhaben ist integrierter tag näher in JSX durch kopieren und geringfügig ändern der Tastenbelegung für / kommt mit Default.sublime-package. Fügen Sie den folgenden, um Ihre benutzerdefinierte keymap:
```
{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
  [
    { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
    { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
    { "key": "setting.auto_close_tags" }
  ]
}
```
Angenommen, Sie sind mit dem Babel-Paket die Auswahl meta.jsx.js entsprechen JSX-syntax und aktivieren Sie die tag-schließen-Verhalten. Die Spielraum-Namen können unterschiedlich sein für andere Pakete, in dem Fall können Sie ScopeHunter zu untersuchen Bereiche, die angewendet werden, indem Sie Ihre bevorzugte JSX-syntax.
- Dies funktioniert hervorragend, und tatsächlich behebt die OP ' s Frage am besten. Er fragte nicht: wie kann ich mit emmet in JSX. Er fragte, wie kann ich sublime Griff jsx die Art der Verarbeitung von html. Ein Nachteil: Sie wahrscheinlich wollen, um diese in Default.sublime-keymap in Ihrem Benutzer-Ordner, anstatt ändern Sie die Basis ein.
- Sie erkennen SublimeText stützt sich stark auf plugins zu erweitern, sich selbst? Während diese Antwort funktioniert für den begrenzten Anwendungsbereich der Frage, emmet ist ein großartiges Werkzeug, um in Ihrem tool-Gürtel. Versteh mich nicht falsch, ich Stelle nicht in Frage, die Größe dieser Antwort (hat mein upvote), aber andere Antworten sind gleich gut (vor allem, da man bekommt, was die OP gefragt, und dann einige).
- Ich wollte kommentieren, dass jemand sollte ein plugin dafür. Also ich habe: github.com/FMCorz/AutoCloseTags. Danke für die Antwort!
- Dieser arbeitete für mich! Ich wollte dies für immer.
InformationsquelleAutor Daniel Shannon

Installieren:
babel & Emmet

Dann fügen Sie diese in den Key Bindings - User

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

Bearbeiten "Key Bindings - User" auf "Einstellungen > Key Bindings", dann die richtige.
Diese funktionierte für mich, in der Erwägung, dass die ausgewählte Antwort nicht. Danke!
Ihre Konfiguration schließt sich das tag vor tag eingegeben wird, in vollem Umfang. Tag View. Ich tippe Vi, dann [Tab], dann bekomme ich <Vi><Vi> und nicht <View><View>. Das ist definitiv falsch Verhalten.
Grün - das problem mit HTML5 ist eine beliebige Zeichenfolge in einem doc könnte ein <tag></tag> aber das Wesen des benutzerdefinierten tags.
JA!!! das ist die Antwort. Danke!!!

InformationsquelleAutor Ryan Jeremiah Freeman

21

Wird es nicht automatisches schließen der Klammern während der Eingabe, aber Sie können benutzen Sie einfach Erhaben ist integrierter tag-näher mit Befehloption. für mac, oder alt. für windows.
- Dieses funktioniert überhaupt nicht für mich in meinen Tests. Kann jemand bestätigen, das tatsächlich funktioniert für Sie in einer Erhabenen? Tut es vielleicht auch verlassen sich auf ein plugin.
- Funktioniert bei mir nicht.
- für mich funktioniert. Die Reagieren nur-spezifischen plugins, die ich habe, github.com/babel/babel-sublime. Vielleicht, dass es einen Unterschied macht, da es ist, was bietet syntax-highlighting für JSX-Dateien.
- Es funktioniert. Es ist alt + . auf windows.
- funktioniert wie ein Zauber auf os x
- Es kommt von dieser Zeile in der keybindings config: { "keys": ["super+alt+."], "command": "close_tag" },
InformationsquelleAutor myoung
8

Ich stark empfehlen die Kombination von babel-sublime und emmet. Wenn Sie angeben, "JavaScript (Babel)" als syntax, beide Pakete zusammen mit emmet richtig Generierung von "className" und "htmlFor", wenn nötig.

Der einzige Nachteil ist, dass das erweitern funktioniert nicht mit TAB aber mit STRG+E. Diese ist aufgrund REGISTERKARTE mit einem Haufen anderer Nutzung in JavaScript.
- Ich habe beide Pakete installiert, aber nicht "JavaScript (Babel)" zur Verfügung, der mir als eine option innerhalb der Syntax - Menü. Die JavaScript - _ - option hat eine popover-Menü aber hier nur _JavaScript und JSON aufgelistet. Jede Einsicht in diese?
- Funktioniert perfekt..danke
- Auf meiner Maschine, es ist aufgeführt unter (Babel) -> JavaScript (Babel).
- Finde ich eigentlich Ctrl-E sehr - bequem - leicht zu Tippen, leicht zu merken. Und ich bin froh tab ist nicht verwendet ! "className" ausgezeichnet - ich dachte, ich würde versuchen zu schreiben, dass einen selber. 🙂 Danke für deine Antwort.
- Sollten Sie finden, dass es an der Syntax "Babel > Javascript(Babel)"
- Gute call. Ich war dumm.
InformationsquelleAutor Martin
6

Basiert auf Daniels Antwort, ich habe ein plugin nur für diese.

Quelle: https://github.com/FMCorz/AutoCloseTags

Installieren:
1. Fügen Sie die oben-repository mit Package Control: Add repository
2. Führen Sie den Befehl Package Control: Install package
3. Wählen Sie AutoCloseTags
- perfekte Antwort.
- Tolles Paket jedoch können Sie bitte aktualisieren, so dass die schließen können, wenn Sie haben, geben Sie die Letzte Klammer des öffnungs-Tags. Wie so... <div dann, nach Eingabe von > Erhabene wird dann sofort drucken <div></div>
InformationsquelleAutor FMCorz
1

Wenn Sie babel installiert erhaben, versuchen Sie, öffnen Sie Ihre .js-und .jsx-Dateien und gehen Sie zu Ansicht > syntax > öffnen Sie alle mit Strom .. > babel > javascript (babel), um richtige syntax-highlighting und verwenden Sie STRG + E, um auto-vervollständigen-html-tag in ur .jsx
- Ist es dein problem?
InformationsquelleAutor Syahmi Nawi
1

Als andere vorgeschlagen: installieren Babel und Emmet !

Emmet Abkürzung Liste
( siehe die demo hier ) ( und Spickzettel hier )

Sie nicht sogar brauchen, um geben Sie in den Spitzen Klammern - Emmet wird, dass der schließende tag, und mehr!

Verwenden StrgE zu erweitern, die Abkürzung.

Emmet docs: toll im erklären der Abkürzungen.. Aber nicht um die Staatliche wie "Expand Abbreviation" - zumindest ich nicht in der Lage war, ihn zu suchen.

Vom Erhabenen, Ich

- eröffnet: Preferences -> Package Settings -> Emmet -> Key Bindings - Default

- gesucht expand_abbreviation

- gefunden ctrl+e

Glück - Funktioniert wie ein Charme 🙂

Ich auch empfehlen die Installation AutoCloseTags, wie FMcorz und Daniel Shannon.

Diese Kombination verleiht

- automatische Schließung (interpretiert tag durch verschachteln von Regeln), einfach durch Eingabe </, große on-the-fly, in der Erwägung, dass Emmet wird

- erweitern Sie eine "Abkürzung" zum vollständigen öffnen und schließen-tags (und mehr) durch drücken Crtl-E. Dies ist ideal für die Schaffung eines Skeletts.

InformationsquelleAutor SherylHohman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.