web-dev-qa-db-fra.com

Dans Sublime Text 3, comment activez-vous les fichiers Emmet pour JSX?

J'utilisais auparavant package JSX d'Allan Hortle jusqu'à ce que je rencontre un problème avec la façon dont il traitait la coloration syntaxique. J'ai alors remarqué qu'il existe un package officiel, sublime-react .

Avec le package d'Allan Hortle, il a inclus un extrait dans le Preferences > Key Bindings – User pour activer la fonctionnalité Emmet qui ressemble à ceci:

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

Cet extrait ne semble pas fonctionner avec le package officiel sublime-react. Cela semble être quelque chose à modifier avec les raccourcis clavier mais une première lecture de la documentation Sublime n'a apporté aucune lumière sur le sujet. Aidez-moi?

reactjssublimetext3react-jsxemmet
59
btholt

Si vous tapez shift+super+p Dans un fichier, il vous permettra de voir le contexte de la sélection actuelle en bas à gauche.

Le premier mot est toujours le type de fichier de base. (source.js, text.html) Dans le cas de JSX j'ai choisi de changer cela en source.js.jsx . En effet, avant qu'il ne soit compilé, JSX n'est pas vraiment du javascript, bien qu'il semble assez similaire. Il y a beaucoup de finitions et de sucre sublime que vous aimeriez voir arriver dans JSX mais pas JS. sublime-react d'autre part utilise le vieux source.js.

Donc, cet extrait que vous avez est juste, il vous suffit de remplacer source.js.jsx Par source.js

16
Allan Hortle

En avril 2015 Emmet a ajouté la prise en charge de jsx , mais cela ne fonctionne pas par défaut. Eh bien, à ma grande surprise, cela fonctionnait en fait avec le control + E raccourci, mais je voulais utiliser la touche TAB pour développer. Suivre les instructions officielles a fait l'affaire pour moi.

Fondamentalement, j'ai dû coller ce qui suit dans mon fichier de raccourcis clavier (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" }
    ]
}

Ceci est le code sans tous les commentaires, et avec le bon SCOPE_SELECTOR en place.

112
rafaelbiten

À partir du JSX-SublimeText Package readme:

Par défaut, Emmet ne prend pas en charge les fichiers JS. Vous devrez donc ajouter un raccourci clavier à l'onglet complet dans les fichiers JSX.

s'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 
        }
    ]
}
16
Giant Elk

Je développe simplement cette réponse.
Il se peut que vous ne souhaitiez pas que toutes les lettres que vous écrivez soient extensibles en html. Vous pouvez définir un autre objet supplémentaire dans votre contexte pour restreindre l'application de la tabulation. Ce code a été trouvé dans this Gist mais j'ai modifié le Regex pour être un peu meilleur.

{
    "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 devrez également installer les packages RegReplace et Chain of Command comme recommandé dans le Gist pour obtenir même span.class se transformer en <span className="class"></span>
Si vous souhaitez ajouter d'autres éléments à écouter, ajoutez-les simplement à la liste, c'est-à-dire (a\\b|div|span|p\\b|button|strong)
Le \\b fait référence à une limite Word et empêche les éléments suivants de développer abc en <abc></abc>

2
Richard Herries

utilisez simplement ctrl+e (cmd+e sur mac) au lieu de tab pour que emmet fonctionne dans votre jsx. par exemple, si je développe (en utilisant ctrl+e)

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

alors je reçois

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