Saltar al contenido

En Sublime Text 3, ¿cómo habilita Emmet para archivos JSX?

Solución:

En abril de 2015, Emmet agregó soporte para jsx, pero no funciona de forma predeterminada. Bueno, para mi sorpresa, en realidad estaba trabajando con el control + E atajo, pero quería usar el TAB clave para expandir. Seguir las instrucciones oficiales me sirvió.

Básicamente, tuve que pegar lo siguiente dentro de mi archivo de enlaces de teclas de usuario (
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" }
    ]
}

Este es el código sin todos los comentarios y con el derecho SCOPE_SELECTOR en su lugar.

Si escribe shift+super+p en un archivo, le permitirá ver el contexto de la selección actual en la parte inferior izquierda.

La primera palabra es siempre el tipo de archivo base. (source.js, text.html) En el caso de JSX, elegí cambiar esto a source.js.jsx. Esto se debe a que, antes de que se compile, JSX realmente no es javascript, aunque se ve bastante similar. Hay muchas terminaciones y azúcar sublime que le gustaría que ocurrieran en JSX pero no en JS. sublime-react, por otro lado, usa simple y antiguo source.js.

Entonces, este fragmento que tiene es correcto, solo necesita reemplazarlo source.js.jsx con source.js

Desde el archivo Léame del paquete JSX-SublimeText:

El valor predeterminado de Emmet es no admitir archivos JS. Por lo tanto, deberá agregar un atajo de teclado para completar la pestaña en archivos JSX.

abrir Preferences > Key Bindings - user y agregue esta entrada:

{
    "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 
        }
    ]
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *