Dans Sublime Text 3, comment faire pour vous permettre d'Emmet pour JSX fichiers?

J'avais déjà été à l'aide de Allan Hortle de JSX paquet jusqu'à ce que j'ai rencontré un problème avec la façon dont il gère la coloration syntaxique. J'ai alors remarqué qu'il y a un paquet officiel, sublime-réagir.

Avec Allan Hortle du paquet, il a inclus un extrait de code dans le Preferences > Key Bindings – User pour permettre Emmet fonctionnalité qui ressemble à ceci:

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        }
    ]
}

Cet extrait de code qui ne fonctionne pas avec la sublime-réagir paquet. Il semble être quelque chose à modifier avec les touches, mais une première lecture de l'Sublime de la documentation n'a donné aucun éclairage sur le sujet. De l'aide?

Note de côté: Quel était le problème en mettant en évidence? Si vous faites une émission sur Github j'aimerais essayer de la réparer.

InformationsquelleAutor btholt | 2014-09-28

16

Si vous tapez shift+super+p dans un fichier, il vous permettra de voir la sélection en cours du cadre en bas à gauche.

Le premier mot est toujours la base du type de fichier. (source.js, text.html) Dans le cas de la JSX j'ai choisi de changer ce source.js.jsx. C'est parce que, avant, il est compilé JSX n'est vraiment pas le javascript, mais il a l'air assez similaire. Il y a beaucoup de réponses et le sublime de sucre que vous voulez dans JSX mais pas de JS. sublime-réagir d'autre part utilise un bon vieux source.js.

Donc cet extrait de code que vous avez est droit, il vous suffit de remplacer source.js.jsx avec source.js
- Cela fonctionne de la saisie semi-automatique, mais il semble briser l'indentation, pour moi.
- Avertissement: l'activation de Emmet par la reliaison la touche de tabulation des pauses d'autres autocompletions. Par exemple, "fu"+TAB entraînera <fu></fu>, pas function function_name () {} comme vous le feriez normalement. Alternativement, vous pouvez utiliser Ctrl+E plutôt que TAB. C'est la valeur par défaut keybind pour Emmet Étendre Abréviation de commande et il peut être utilisé dans n'importe quel contexte.
- Vous pouvez toujours utiliser entrer si. C'est certainement un hacky fixer, mais il n'y a pas de solution réelle jusqu'à ce que emmet soutient pleinement jsx.
InformationsquelleAutor Allan Hortle
112

En avril 2015 Emmet a ajouté le support pour jsx, mais il ne fonctionne pas par défaut. Eh bien, à ma surprise, il était vraiment en train de travailler avec le control + E raccourci, mais je voulais utiliser le TAB clés à développer. À la suite de la les instructions officielles a fait le tour pour moi.

En gros, j'ai dû coller la commande suivante dans mon fichier de configuration des touches (
Preferences > Key Bindings — User ):
```
{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
    [
        { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
        { "match_all": true, "key": "selection_empty" },
        { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
        { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
        { "match_all": true, "key": "is_abbreviation" }
    ]
}
```
C'est le code, sans tous les commentaires, et avec le droit SCOPE_SELECTOR en place.
- ^E maintenant fonctionne hors de la boîte, pas de paramètres d'ajustement nécessaire. Incroyable.
- ce qu'il est corrigé pour moi aussi
- Gracias! Fonctionne à merveille.
- Voici une très jolie vidéo qui montre comment le configurer: wesbos.com/emmet-react-jsx-sublime
- Je suis en utilisant ctrl+e mais comment faites-vous la saisie semi-automatique fermeture automatique des balises? J'aimerais taper quelque chose et puis rapidement, l'envelopper dans une auto-balise de fermeture comme <Component /> ?
InformationsquelleAutor rafaelbiten

De la JSX-SublimeText Paquet readme:

Emmet par défaut est de pas en charge les fichiers JS. Ainsi, vous aurez besoin d'ajouter un raccourci clavier à un onglet complet en JSX fichiers.

ouvrir Preferences > Key Bindings - user et ajoutez cette entrée:

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
}

InformationsquelleAutor Giant Elk

2

Juste étendre sur cette réponse.

Vous ne voulez pas toutes les lettres que vous écrivez pour être extensible en html. Vous pouvez définir un autre objet supplémentaire dans votre contexte, de restreindre lors de la saisie semi-automatique est appliquée. Ce code a été trouvé dans ce gist cependant j'ai modifié la Regex pour être un peu mieux.
```
{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [{
        "operand": "source.js", 
        "operator": "equal", 
        "match_all": true, 
        "key": "selector"
    },{
        "key": "preceding_text", 
        "operator": "regex_contains", 
        "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)", 
        "match_all": true
    },{
        "key": "selection_empty", 
        "operator": "equal", 
        "operand": true, 
        "match_all": true
    }]
}
```
Vous aurez également besoin d'installer les paquets RegReplace et de la Chaîne de Commandement, comme recommandé dans les gist à même d'obtenir des span.class à se transformer en <span className="class"></span>

Si vous souhaitez ajouter plus d'éléments pour écouter simplement les ajouter à la liste c'est à dire (a\\b|div|span|p\\b|button|strong)

Le \\b fait référence à une limite de mot et s'arrête à la suite de l'expansion de abc en <abc></abc>

InformationsquelleAutor Richard Herries

simplement utiliser ctrl+e (cmd+e sur mac ) au lieu de l'onglet pour obtenir emmet travail à l'intérieur de votre jsx.
par exemple, si je développez (à l'aide de ctrl+e)

render(){
        return(
            .modal>.btn.btn-success{Click Me}   
        )
    }

puis-je obtenir

render(){
        return(
            <div className="modal">
                    <div className="btn btn-success">Click Me</div>
                </div>  
        )
    }

InformationsquelleAutor Anish K.

Vous devez vous connecter pour publier un commentaire.