Balises HTML à saisie semi-automatique dans jsx (texte sublime)

Je voudrais pouvoir utiliser la saisie semi-automatique pour les balises HTML dans mon code de réaction / jsx. De la même façon, il fonctionne pour les fichiers HTML. Puis-je configurer le texte sublime 3 pour activer la saisie automatique des balises pour les fichiers jsx?

Il convient de noter que vous pouvez activer le tag intégré de Sublime dans JSX en copiant et en modifiant légèrement le raccourci clavier de / qui est fourni avec Default.sublime-package . Ajoutez ce qui suit à votre keymap personnalisé:

 { "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context": [ { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - ssortingng - comment", "match_all": true }, { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true }, { "key": "setting.auto_close_tags" } ] } 

En supposant que vous utilisez le package Babel, le sélecteur meta.jsx.js correspondra à la syntaxe JSX et meta.jsx.js le comportement de fermeture de tag. Le nom de la scope peut être différent pour les autres packages, auquel cas vous pouvez utiliser ScopeHunter pour inspecter les étendues appliquées par votre syntaxe JSX préférée.

Installer: babel & Emmet

Puis ajoutez ceci dans vos raccourcis clavier – Utilisateur

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

Il ne vous permettra pas de fermer automatiquement les crochets à mesure que vous tapez, mais vous pouvez simplement utiliser l’ option de rapprochement des balises intégrée de Sublime . pour mac ou alt . Pour les fenêtres.

Je suggère fortement la combinaison de babel-sublime et d’ emmet . Si vous spécifiez “JavaScript (Babel)” comme syntaxe, les deux packages fonctionneront ensemble, avec emmet générant correctement “className” et “htmlFor” si nécessaire.

Le seul inconvénient est que l’extension ne fonctionnera pas avec TAB mais avec CTRL + E. Cela est dû au fait que TAB a un tas d’autres utilisations en JavaScript.

Sur la base de la réponse de Daniel, j’ai créé un plugin uniquement pour cela.

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

À installer:

  1. Ajoutez le référentiel ci-dessus avec le Package Control: Add repository
  2. Exécutez la commande Package Control: Install package
  3. Sélectionnez AutoCloseTags

Si babel est installé sur sublime, ouvrez vos fichiers .js et .jsx et affichez> la syntaxe> ouvrez tout avec les .. .. babel> javascript (babel) actuels pour afficher la syntaxe correcte et utilisez CTRL + E pour les afficher automatiquement. balise html complète dans ur .jsx

Comme d’autres l’ont suggéré: installez Babel et Emmet !

Liste des abréviations Emmet (voir la démo ici ) (et feuille de sortingche ici )
Vous n’avez même pas besoin de taper les crochets coudés – Emmet le fera, la balise de fermeture, et plus encore!

Utilisez Ctrl E pour développer l’abréviation.

Emmet docs: excellent à expliquer les abréviations .. Mais n’a pas réussi à indiquer comment “développer l’abréviation” – du moins, je n’ai pas pu le localiser .

Du sublime, je
– ouvert: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
– recherché pour expand_abbreviation
– trouvé ctrl+e

Bonheur – Fonctionne comme un charme 🙂


Je recommande également d’ installer AutoCloseTags , tel que fourni par FMcorz et Daniel Shannon .

Cette combinaison donne
– fermeture automatique de (balise interprétée à cause des règles d’imbrication), en tapant simplement , super à la volée, alors que Emmet
- étendre une "abréviation" aux balises d'ouverture et de fermeture complètes (et plus) en appuyant sur Crtl-E . C'est génial pour créer un squelette.