Ich möchte Autovervollständigung für HTML-Tags in meinem Reagieren/Jsx-Code verwenden können. Genauso funktioniert es für HTML-Dateien. Kann ich sublime text 3 konfigurieren, um die Autovervollständigung von Tags für jsx-Dateien zu aktivieren?Autocomplete HTML-Tags in Jsx (erhabener Text)
Bemerkenswert, dass Sie Sublimes Einbau-Tag näher in JSX durch Kopieren und Modifizieren ermöglichen kann leicht die Tastenanbindung für /, die mit Default.sublime-package kommt. Fügen Sie folgende zu Ihrer benutzerdefinierten 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 das Babel-Paket verwenden, der Selektor meta.jsx.js wird übereinstimmen JSX Syntax und aktivieren Sie den Tag-Schließverhalten. Der Bereichsname kann für andere Pakete unterschiedlich sein. In diesem Fall können Sie ScopeHunter verwenden, um die Bereiche zu überprüfen, die von Ihrer bevorzugten JSX-Syntax angewendet werden.
Das funktioniert gut und adressiert die Frage des OP am besten. Er fragte nicht: Wie kann ich Emmet in JSX verwenden?Er fragte, wie kann ich Sublime behandeln jsx die Art und Weise, wie es HTML behandelt. Ein Vorbehalt: Wahrscheinlich möchten Sie dies in Ihrem Benutzerordner in "Default-Slim-Keymap" setzen, anstatt den Basis-Ordner zu ändern. – btwebste
@btwebste Sie wissen, dass SublimeText stark auf Plugins angewiesen ist, um sich zu erweitern? Während diese Antwort für den begrenzten Umfang der Frage funktioniert, ist Emmet ein großartiges Werkzeug in Ihrem Werkzeuggürtel. Versteh mich nicht falsch, ich frage nicht die Größe dieser Antwort (hat mein upvote), aber andere Antworten sind gleich gut (vor allem, weil man bekommt, was das OP verlangt und dann einige). – Mrchief
Ich wollte kommentieren, dass jemand ein Plugin dafür machen sollte. Also habe ich: https://github.com/FMCorz/AutoCloseTags. Danke für die Antwort! – FMCorz
Es werden die Klammern für Sie nicht Autoclose, wie Sie schreiben, aber man kann einfach näher Sublimes Einbau-Tag verwenden, mit BefehlOption. für Mac oder alt. für Windows.
Dies funktioniert bei meinen Tests überhaupt nicht. Kann jemand bestätigen, dass das tatsächlich für sie in Sublime funktioniert? Verlässt es sich vielleicht auf ein Plugin? – XML
Funktioniert nicht für mich. –
@XMLilley funktioniert für mich. Das einzige React-spezifische Plugin, das ich habe, ist https://github.com/babel/babel-sublime. Vielleicht macht das einen Unterschied, denn es bietet Syntax-Highlighting für JSX-Dateien. – maxedison
Ich schlage die Kombination von babel-sublime und emmet vor. Wenn Sie "JavaScript (Babel)" als Syntax angeben, arbeiten beide Pakete zusammen, wobei emmet bei Bedarf "className" und "htmlFor" korrekt generiert.
Der einzige Nachteil ist, dass die Erweiterung nicht mit TAB funktioniert, aber mit STRG + E. Dies liegt daran, dass TAB eine Menge anderer Verwendung in JavaScript hat.
Ich habe beide Pakete installiert, habe aber kein JavaScript (Babel) als Option im _Syntax_ Menü. Die _JavaScript _ -Option hat ein Popover-Menü, aber hier sind nur _JavaScript_ und _JSON_ aufgeführt. Irgendein Einblick in das? – IsenrichO
Funktioniert perfekt ... Danke –
@IsenrichO Auf meinem Rechner ist es unter (Babel) -> JavaScript (Babel) aufgeführt. – SherylHohman
Install: babel & Emmet
Dann ist diese in Ihren Key Bindings hinzufügen - Benutzer
{
"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 }
]
}
Um "Key Bindings - User" zu bearbeiten ist auf "Preferences> Key Bindings", dann der richtige. –
Wenn Sie babel für sublime installiert haben, öffnen Sie Ihre .js- und .jsx-Dateien und gehen Sie zur Ansicht> Syntax> alles öffnen mit aktuell ..> babel> javascript (babel), um korrekte Syntaxhervorhebung anzuzeigen, und verwenden Sie STRG + E um Auto-Vervollständigung HTML-Tag in Ihrem .jsx
Ist es dein Problem? –
Basierend auf Daniels Antwort, habe ich ein Plugin nur für diese.
Quelle: https://github.com/FMCorz/AutoCloseTags
zu installieren:
Package Control: Add repositoryPackage Control: Install packageAutoCloseTagsWie andere vorgeschlagen: installieren Babel und Emmet!
Emmet Abbreviation's list (siehe demo here) (und cheat sheet here)
Sie brauchen nicht einmal in den eckigen Klammern eingeben - Emmet dies tun wird, der schließende Tag und vieles mehr!
Verwenden CtrlE die Abkürzung zu erweitern.
Emmet docs: groß auf die Abkürzungen zu erklären .. aber nicht in dem Zustand, wie man „Abkürzung erweitern“ - zumindest, ich war nicht in der Lage, es zu lokalisieren.
Von Sublime, ich
- eröffnet: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- für expand_abbreviation
gesucht - gefunden ctrl+e
Glück - funktioniert wie ein Charme :-)
I auch empfehlen die Installation AutoCloseTags, wie angegeben b y FMcorz und Daniel Shannon.
gibt diese Kombination
- Auto-Schließung (interpretiert Tag aufgrund Verschachtelung Regeln), indem Sie einfach </, great on the fly eingeben, während Emmet wird
- eine "Abkürzung" zum vollen Öffnen und Schließen erweitern Tags (und mehr) durch Drücken von Crtl-E. Dies ist ideal zum Erstellen eines Skeletts.
Haben Sie eines der JSX- oder Babel-Plugins ausprobiert, um zu sehen, ob sie Ihren Anforderungen entsprechen? – WiredPrairie
Ja, ich benutze Babel-Sublime, es macht einen guten Job, aber leider HTML-Autovervollständigung funktioniert nicht. –
Ich glaube nicht, dass es ein Feature ist. – WiredPrairie