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