reactjs - configurar - emmet para react

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

Question

Anteriormente había estado usando el paquete JSX de Allan Hortle hasta que tuve un problema con la forma en que manejaba el resaltado de sintaxis. Entonces noté que hay un paquete oficial, sublime-react .

Con el paquete de Allan Hortle, incluyó un fragmento en Preferences > Key Bindings – User para habilitar la funcionalidad de Emmet que se ve así:

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

Este fragmento no parece funcionar con el paquete oficial sublime-react. Parece ser algo para modificar con las combinaciones de teclas, pero una lectura inicial de la documentación Sublime no arrojó luz sobre el tema. ¿Ayuda?

Answer 1

Del archivo Léame del paquete JSX-SublimeText :

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

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

Answer 2

En abril de 2015, Emmet agregó soporte para jsx , pero no funciona de manera predeterminada. Bueno, para mi sorpresa, en realidad estaba trabajando con el acceso directo control + E , pero quería usar la tecla TAB para expandir. Seguir las instrucciones oficiales hizo el truco para mí.

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 SCOPE_SELECTOR correcto en su lugar.

Answer 3

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 te gustaría que ocurriera en JSX pero no en JS. sublime-react por otro lado, usa el viejo source.js .

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

Answer 4

Simplemente ampliando esta respuesta.
Es posible que no desee que todas las cartas que escriba se puedan expandir a html. Puede establecer otro objeto adicional en su contexto para restringir cuando se aplica la finalización de la pestaña. Este código se encontró en esta esencia, sin embargo, modifiqué el Regex para que sea un poco mejor.

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

También necesitará instalar los paquetes RegReplace y Chain of Command como se recomienda en la esencia para incluso obtener span.class para convertirlo en <span className="class"></span>
Si desea agregar más elementos para escuchar, simplemente agréguelos a la lista, es decir (a//b|div|span|p//b|button|strong)
El //b hace referencia al límite de una palabra y evita que lo siguiente se expanda abc en <abc></abc>

Answer 5

simplemente use ctrl+e ( cmd+e en mac) en lugar de tab para que emmet funcione dentro de su jsx. por ejemplo si me expando (usando ctrl+e )

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

entonces consigo

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