Les balises html autocomplètes dans jsx (texte sublime)
j'aimerais pouvoir utiliser autocomplete pour les balises html dans mon code react/jsx. De la même façon que pour les fichiers html. Puis-je configurer sublime text 3 pour activer les balises autocomplete pour les fichiers jsx?
7 réponses
A noter que vous pouvez activer le tag intégré de Sublime dans JSX en copiant et en modifiant légèrement le keybinding pour / qui vient avec Default.sublime-package. Ajoutez les lignes suivantes à votre custom 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" }
]
}
en supposant que vous utilisez le paquet Babel, le sélecteur meta.jsx.js correspondra à la syntaxe JSX et activera le comportement de fermeture de balise. Le nom de scope peut être différent pour les autres paquets, auquel cas vous pouvez utiliser ScopeHunter pour inspecter les étendues appliqué par votre syntaxe JSX préférée.
Installer: babel et Emmet
puis ajoutez ceci dans vos fixations de clés-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 }
]
}
il ne va pas autoclacer les crochets pour vous comme vous tapez, mais vous pouvez juste utiliser Sublime tag intégré plus proche avec commande option. pour mac, ou alt. pour windows.
je suggère fortement la combinaison de babel-sublime et emmet. Si vous spécifiez "JavaScript (Babel) "comme syntaxe, les deux paquets fonctionneront ensemble, 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. Ceci est dû au fait que TAB a un tas d'autres utilisations dans JavaScript.
basé sur la réponse de Daniel, j'ai fait un plugin juste pour ça.
Source:https://github.com/FMCorz/AutoCloseTags
Pour l'installer:
- ajouter le dépôt ci-dessus avec
Package Control: Add repository - exécutez la commande
Package Control: Install package - Sélectionner
AutoCloseTags
si vous avez babel installé pour sublime, essayez d'ouvrir votre .js et .les fichiers jsx et aller à la vue > syntaxe > ouvrez tout avec current .. > babel > javascript (babel) pour afficher la mise en évidence de la syntaxe correcte et utiliser CTRL + E pour remplir automatiquement la balise html dans ur .jsx
comme d'autres l'ont suggéré: install Babel et Emmet!
Emmet Abréviation de la liste
( voir démo ici ) (feuille de triche ici )
Vous n'avez même pas besoin de taper dans les crochets angled - Emmet fera cela, l'étiquette de fermeture, et plus encore!
Utiliser Ctrl E pour augmenter l'abréviation.
Emmet docs: excellent pour expliquer les abréviations.. Mais pas comment "étendre L'Abréviation" -au moins, j'ai été incapable de le trouver.
À Partir De Sublime, J'
- ouvert: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- cherché expand_abbreviation
- ctrl+e
Bonheur - Fonctionne comme un Charme :-)
I recommander l'installation AutoCloseTags, tel que fourni par FMcorz et Daniel Shannon.
Cette combinaison donne
- fermeture automatique de (tag interprété en raison de règles de nidification), en tapant simplement </, de la grande à la volée, alors que, Emmet va
- étendre une "abréviation" à toutes les balises d'ouverture et de fermeture (et plus) en appuyant sur Crtl-E. Ce qui est excellent pour la création d'un squelette.