autocomplete - react - Autocompletar etiquetas html en jsx(texto sublime)

emmet react native sublime text

Question

Me gustaría poder usar autocompletar para etiquetas html en mi código de reacción / jsx. De la misma manera que funciona para archivos html. ¿Puedo configurar el texto sublime 3 para habilitar las etiquetas autocompletar para archivos jsx?

Answer 1

Basado en la respuesta de Daniel, hice un plugin solo para esto.

Fuente: github.com/FMCorz/AutoCloseTags

Instalar:

1. Agregue el repositorio anterior con Package Control: Add repository
2. Ejecute el comando Package Control: Install package
3. Seleccione AutoCloseTags

Answer 2

Como otros sugirieron: ¡instalen a Babel y Emmet !

La lista de Emmet Abbreviation (ver la demostración aquí ) (y la página de trucos aquí )
Ni siquiera necesita escribir los corchetes en ángulo: Emmet lo hará, la etiqueta de cierre y más.

Use Ctrl E para expandir la abreviatura.

Documentos de Emmet: excelente para explicar las abreviaturas ... Pero no pude decir cómo "Expandir Abreviatura", al menos no pude localizarlo .

De Sublime, yo
- abierto: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- buscado expand_abbreviation
- encontrado ctrl+e

Felicidad - Funciona como un encanto :-)

También recomiendo instalar github.com/FMCorz/AutoCloseTags , tal como lo proporcionan FMcorz y Daniel Shannon .

Esta combinación da
- cierre automático de (etiqueta interpretada debido a reglas de anidamiento), simplemente escribiendo </ , genial sobre la marcha, mientras que, Emmet lo hará
- expanda una "abreviatura" a las etiquetas de apertura y cierre completo (y más) presionando Crtl-E . Esto es genial para crear un esqueleto.

Answer 3

Instalar: babel y Emmet

A continuación, agregue esto a sus Enlaces de teclas - Usuario

{
    "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 }
    ]
}

Answer 4

No cerrará automáticamente los corchetes a medida que escribe, pero puede usar el marcador integrado de Sublime con la opción de comando . para mac, o alt . para ventanas.

Answer 5

Si tiene babel instalado para sublime, intente abrir sus archivos .js y .jsx y vaya a ver> sintaxis> abrir todo con actual ..> babel> javascript (babel) para ver el resaltado de sintaxis correcto y use CTRL + E para auto- completar la etiqueta html dentro de ur .jsx

Answer 6

Sugiero mucho la combinación de github.com/babel/babel-sublime y emmet . Si especifica "JavaScript (Babel)" como su sintaxis, ambos paquetes funcionarán juntos, con emmet correctamente generando "className" y "htmlFor" si es necesario.

El único inconveniente es que la expansión no funcionará con TAB pero con CTRL + E. Esto se debe a que TAB tiene muchos otros usos en JavaScript.

Answer 7

Vale la pena señalar que puede habilitar el marcador integrado de Sublime en JSX copiando y modificando ligeramente la combinación de teclas para / que viene con Default.sublime-package . Agregue lo siguiente a su mapa de teclas personalizado:

{ "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" }
  ]
}

Suponiendo que está utilizando el paquete Babel, el selector meta.jsx.js coincidirá con la sintaxis JSX y habilitará el comportamiento de cierre de la etiqueta. El nombre del alcance puede ser diferente para otros paquetes, en cuyo caso puede usar ScopeHunter para inspeccionar los ámbitos que se aplican con su sintaxis JSX preferida.