La saisie semi-automatique des balises html dans jsx (sublime text)

Je voudrais être en mesure d'utiliser la saisie semi-automatique de balises html dans mon réagir/jsx code. De la même façon que pour les fichiers html. Puis-je configurer sublime text 3 pour activer les balises de saisie semi-automatique pour jsx fichiers?

Avez-vous essayé de tout le JSX ou Babel plugins pour voir si elles répondent à vos besoins?
Oui, je suis l'aide de babel-sublime, il fait un bon travail, mais malheureusement html auto-complétion ne fonctionne pas.
Je ne crois pas que c'est une fonctionnalité.
ainsi est-il juste un ensemble de snippents?
Oui, et peut-être une certaine mise en forme de contrôle.

InformationsquelleAutor Igor Okorokov | 2015-05-04

69

Intéressant de noter que vous pouvez activer Sublime intégré dans la balise la plus proche dans JSX en copiant et en modifiant légèrement le raccourci clavier 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 package Babel, le sélecteur de meta.jsx.js correspondra JSX de syntaxe et d'activer la balise de fermeture de comportement. Le champ nom peut être différent pour d'autres paquets, dans ce cas vous pouvez utiliser ScopeHunter pour inspecter les étendues qui sont appliquées par votre préféré JSX syntaxe.
- Cela fonctionne très bien, et effectivement les adresses de l'OP à la question du meilleur. Il n'a pas de demander: comment puis-je utiliser emmet dans JSX. Il a demandé, comment puis-je faire sublime poignée jsx la façon dont il traite le code html. Une mise en garde: vous voulez sans doute mettre cela dans Default.sublime-keymap dans votre dossier Utilisateur, plutôt que de changer celle de base.
- Vous vous rendez compte SublimeText s'appuie fortement sur les plug-ins pour étendre de lui-même? Bien que cette réponse œuvres de la portée limitée de la question, emmet est un excellent outil à avoir dans votre ceinture porte-outils. Ne vous méprenez pas, je ne doute pas de la grandeur de cette réponse (a mon upvote), mais d'autres réponses sont tout aussi bons (surtout depuis que l'on obtient ce que l'OP a demandé et puis certains).
- Je vais commenter que quelqu'un devrait faire un plugin pour cela. J'ai donc fait: github.com/FMCorz/AutoCloseTags. Merci pour la réponse!
- Cela a fonctionné pour moi! J'ai voulu cela pour toujours.
InformationsquelleAutor Daniel Shannon

Installer:
babel & Emmet

Ajouter ceci dans vos raccourcis clavier de l'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 }
    ]
}

Pour modifier les "raccourcis - Utilisateur" est sur "Préférences > raccourcis clavier", puis celui de droite.
Cette une a fonctionné pour moi, alors que la réponse choisie n'a pas. Merci!
Votre config ferme la balise avant la balise est tapé en plein. La balise est View. J'type Vi, puis [Tab], puis-je obtenir <Vi><Vi> et pas <View><View>. C'est vraiment mauvais comportement.
Vert - le problème avec le HTML5 est une chaîne de caractères dans un doc pourrait être un <balise></balise> mais la nature même des étiquettes personnalisées.

InformationsquelleAutor Ryan Jeremiah Freeman

21

Il ne sera pas automatiquement les supports pour vous, comme type, mais vous pouvez l'utiliser juste Sublime intégré dans la balise de plus près avec commandeoption. pour mac, ou alt. pour windows.
- Cela ne fonctionne pas du tout pour moi lors de mes tests. Quelqu'un peut-il confirmer ce fonctionne réellement pour eux dans le Sublime? N'est-il peut-être compter sur un plugin.
- Ne fonctionne pas pour moi.
- fonctionne pour moi. La seule Réagir spécifiques au plugin que j'ai est github.com/babel/babel-sublime. Peut-être que cela fait une différence, puisque c'est ce que propose la coloration syntaxique pour le JSX fichiers.
- Elle fonctionne. C'est alt + . sur windows.
- fonctionne comme un charme sur os x
InformationsquelleAutor myoung
8

J'ai fortement suggérer la combinaison de babel-sublime et emmet. Si vous spécifiez "JavaScript (Babel)" que votre syntaxe, les deux paquets de travailler ensemble, avec emmet correctement la génération de "className" et "htmlFor" si nécessaire.

Le seul inconvénient est que l'expansion ne fonctionnera pas avec ONGLET, mais avec CTRL+E. Cela est dû à l'ONGLET d'avoir un tas d'autres l'utilisation de JavaScript.
- J'ai à la fois ces paquets installés, mais n'ont pas le JavaScript (Babel)" qui s'offrent à moi comme une option à l'intérieur de la Syntaxe menu. Le JavaScript _ option a une liste mais ici seulement _JavaScript et JSON sont répertoriés. Tout comprendre dans cette?
- Fonctionne parfaitement..merci
- Sur ma machine, il est répertorié sous (Babel) -> JavaScript (Babel).
- Je trouve Ctrl-E très pratique - facile à saisir, facile à retenir. Et je suis heureux tab est pas utilisé ! "className" excellent - j'ai pensé que je devrais essayer et de l'écrire moi-même. 🙂 Merci pour votre réponse.
- Vous devriez le trouver à la Syntaxe "Babel > Javascript(Babel)"
- Bon appel. J'étais muet.
InformationsquelleAutor Martin
6

Basé sur Daniel réponse, j'ai fait un plugin pour cela.

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

À installer:
1. Ajoutez le au-dessus de référentiel avec Package Control: Add repository
2. Exécuter la commande Package Control: Install package
3. Sélectionnez AutoCloseTags
- réponse parfaite.
- Grand paquet cependant, pouvez-vous s'il vous plaît mettre à jour, de sorte que la proximité permet lorsque vous avez tapez le dernier support de la balise d'ouverture. Comme si... <div ensuite, lors de l'tapant > Sublime sera alors immédiatement print <div></div>
InformationsquelleAutor FMCorz
1

Si vous avez babel installé le sublime, essayez d'ouvrir votre .js et .jsx fichiers et allez dans affichage > syntaxe > ouvert toute l'actuelle .. > babel > javascript (babel) à la vue correcte de la syntaxe et de l'utilisation de CTRL + E pour l'auto-remplir la balise html à l'intérieur d'ur .jsx
- Est-ce votre problème?
InformationsquelleAutor Syahmi Nawi
1

Que d'autres ont suggéré: installer Babel et Emmet !

Emmet Abréviation de la liste
( voir la démo ici ) ( et feuille de triche ici )

Vous n'avez même pas besoin de taper dans les chevrons - Emmet va le faire, la balise de fermeture et bien plus encore!

Utilisation CtrlE d'augmenter l'abréviation.

Emmet docs: la grande à expliquer les abréviations.. , Mais a Échoué à l'état comment "Développer l'Abréviation" - au moins, j'ai été incapable de le trouver.

De Sublime, Je

- ouvert: Preferences -> Package Settings -> Emmet -> Key Bindings - Default

recherche pour expand_abbreviation

- trouvé ctrl+e

Bonheur - Fonctionne comme un Charme 🙂

Je aussi vous recommandons d'installer AutoCloseTags, comme prévu par la FMcorz et Daniel Shannon.

Cette combinaison donne

- la fermeture automatique de (interprété tag en raison de l'imbrication des règles), en tapant simplement </, de la grande à la volée, alors que, Emmet va

- développer une "abréviation" à pleine ouverture et de fermeture des balises (et plus) en appuyant sur Crtl-E. Ce qui est excellent pour la création d'un squelette.

InformationsquelleAutor SherylHohman

Vous devez vous connecter pour publier un commentaire.