web-dev-qa-db-fra.com

Balises html à saisie semi-automatique en jsx (texte sublime)

Je voudrais pouvoir utiliser la saisie semi-automatique pour les balises html dans mon code react/jsx. De la même manière, cela fonctionne pour les fichiers html. Puis-je configurer le texte sublime 3 pour activer la saisie semi-automatique des balises pour les fichiers jsx?

autocompletereactjssublimetext3sublimetextreact-jsx
48
Igor Okorokov

Il convient de noter que vous pouvez activer la balise intégrée de Sublime plus près dans JSX en copiant et en modifiant légèrement le raccourci clavier pour / fourni avec Default.sublime-package. Ajoutez les éléments suivants à votre image clé personnalisée:

{ "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 meta.jsx.js correspondra à la syntaxe JSX et activera le comportement de fermeture de balise. Le nom de l'étendue peut être différent pour d'autres packages, auquel cas vous pouvez utiliser ScopeHunter pour inspecter les étendues qui sont appliquées par votre syntaxe JSX préférée.

72
Daniel Shannon

Installer: babel & Emmet

Ajoutez ensuite 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 }
    ]
}
27
Ryan Jeremiah Freeman

Il ne fermera pas automatiquement les crochets pendant que vous tapez, mais vous pouvez simplement utiliser la balise intégrée de Sublime plus près avec commandoption. pour mac, ou alt. pour les fenêtres.

21
myoung

Je suggère fortement la combinaison de babel-sublime et 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.

8
Martin

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

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

À installer:

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

Si vous avez installé babel pour sublime, essayez d'ouvrir vos fichiers .js et .jsx et accédez à afficher> syntaxe> tout ouvrir avec le courant ..> babel> javascript (babel) pour afficher la mise en surbrillance de la syntaxe correcte et utiliser CTRL + E pour auto- balise html complète à l'intérieur de votre ur .jsx

1
Syahmi Nawi

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

Liste des abréviations Emmet (voir la démo ici ) (et aide-mémoire ici )
Vous n'avez même pas besoin de taper les crochets angulaires - Emmet fera cela, la balise de fermeture, et plus encore!

Utilisez CtrlE pour développer l'abréviation.

Documents Emmet: excellents pour expliquer les abréviations .. Mais échec à déclarer comment "développer l'abréviation" - au moins, je n'ai pas pu le localiser.

De Sublime, je
- ouvert: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- recherche de expand_abbreviation
- a trouvé ctrl+e

Bonheur - Fonctionne comme un charme :-)

Je aussi recommande d'installer AutoCloseTags, tel que fourni par FMcorz = et Daniel Shannon .

Cette combinaison donne
- fermeture automatique de (balise interprétée en raison des règles d'imbrication), en tapant simplement </, super à la volée, alors qu'Emmet
- développez une "abréviation" pour ouvrir et fermer les balises (et plus) en appuyant sur Crtl-E. C'est idéal pour créer un squelette.

1
SherylHohman