reactjs - how - Autocompletar JSX o HTML en Visual Studio Code

visual studio code autocomplete html

Question

¿Hay alguna forma de usar componentes o completar HTML en Visual Studio Code? Porque escribir cada letra manualmente no es una buena idea cuando tenemos clases como Bootstrap, etc. Por ejemplo, completar como en Emmet: ul>li*2>a

var React = require(''react'');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

Answer 1

Actualización 2019

Etiquetas de cierre automático en .html, .js y .jsx

Funciona fuera de la caja. Es decir, después de escribir el corchete de cierre en la etiqueta de apertura, la etiqueta de cierre se insertará automáticamente.

Emmet con HTML básico en archivos .jsx

Funciona fuera de la caja.

Emmet con HTML básico en archivos .js:

Agregue la siguiente configuración, requerida para las sugerencias de abreviaturas de Emmet, y requerida para que la expansión de pestañas funcione de manera consistente.

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Emmet con etiquetas personalizadas (por ejemplo, React Components) en archivos .js y .jsx

Agregue la siguiente configuración:

  "emmet.triggerExpansionOnTab": true,

Tenga en cuenta que con esta configuración, Emmet expandirá todas las palabras como etiquetas personalizadas (no solo Reaccionar nombres de componentes)

También tenga en cuenta que cuando use Emmet para expandir componentes React como etiquetas personalizadas, debe elegir el nombre del componente de la lista de sugerencias y completarlo primero (o escribir el nombre completo manualmente y cerrar el menú de sugerencias con la tecla de escape). Después de que la palabra se expande, debe volver a presionar para que Emmet expanda la etiqueta personalizada.

Hay una solicitud de función activa para eliminar potencialmente este paso adicional (expandir automáticamente al seleccionar la sugerencia para que funcione de la misma manera que expandiría las etiquetas html estándar).

Solución de problemas

Asegúrese de tener la última versión de VSCode.

Asegúrese de no haber cambiado la siguiente configuración predeterminada:

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you''re curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don''t want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],

Answer 2

Autocompletar para React Babel estuvo funcionando bien hasta ayer para mí.

Ninguna de estas respuestas me ayudó, así que simplemente reinicié mi computadora. Trabajado como un encanto ;)

Answer 3

El código de Visual Studio detecta extensiones .jsx y agrega compatibilidad con emmet de manera predeterminada (estoy usando el código VS 1.8.1)

Pero si prefiere usar la extensión .js para todos sus archivos de reacción, puede asociar el modo Reacción de JavaScript con archivos .js en la esquina inferior derecha de la ventana de VS Code.

Cómo hacer esto paso a paso (gif)

Answer 4

Estaba trabajando en varios proyectos y tengo un gran archivo de configuración.

Verifiqué la configuración y descubrí que esta configuración estaba arruinando todo eso.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

Entonces lo comenté. Y todo funciona perfectamente en React Apps. Gracias

Answer 5

Fui a arrojar todas las respuestas y esta configuración funcionó para mí. tuvo que incluir el lenguaje y agregar el perfil de sintaxis. sin la expansión del disparador nada funcionó, pero ahora solo presiono el botón Tab para obtener el resultado.

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true

Answer 6

Me llevó dos pasos obtener etiquetas de cierre automático en JSX.

1. Siga las instrucciones de Kehkashan Fazal anteriores sobre la configuración de "emmet.includeLanguages"
2. Descargue la extensión Auto Close Tag de VSCode ( formulahendry.auto-close-tag )

¡Y ahora tiene buenas etiquetas JSX de cierre automático!

Answer 7

Ninguna de esas soluciones funcionó ... ¡pero la extensión Auto Close Tag sí! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Answer 8

Resolví el problema simplemente siguiendo los pasos a continuación:

1. En la parte inferior izquierda de VSCode, haga clic en Javascript
2. Luego, en la parte superior, verá una lista, haga clic en "Configurar la configuración basada en el lenguaje ''Javascript''"

3. Agregue estas líneas al archivo:

   "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
   }

Si desea obtener más detalles, puede consultar this enlace.

Answer 9

Si alguien todavía está luchando con este problema:

He descubierto que simplemente configurando

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

no habilita la finalización de HTML. Pero, usando:

"emmet.includeLanguages": {
    "javascript": "html"
}

hace.

Según los documentos de emmet :

"emmet.includeLanguages": {}

Habilite las abreviaturas de emmet en idiomas que no son compatibles de forma predeterminada. Agregue una asignación aquí entre el idioma y el idioma admitido por emmet.
Por ejemplo: {"vue-html": "html", "javascript": "javascriptreact"}

Answer 10

Siga estos dos pasos solamente:

1. En la parte inferior de VSCode donde detectar idioma, haga clic en ese

1er paso

2. Haga clic en "Configurar la configuración basada en el lenguaje ''Javascript (Babel)'' ..." o lo que sea

2do paso

3. pegue este código en él por separado primero con la coma '','' y guárdelo.

"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true

3er paso

Answer 11

Simplemente seleccione el modo de idioma apropiado en la esquina inferior derecha de la pantalla: configúrelo en React JavaScript.

Answer 12

Solo funciona en archivos JSX. Deja que no funcione con JS.

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},

Answer 13

puede usar la extensión de cierre automático en el código de Visual Studio. PD. cuando instale la extensión, el autocompletado no funcionará hasta que vuelva a cargar el código VS, simplemente vuelva a abrir el código VS o vaya a la extensión de etiqueta de cierre automático y haga clic en Volver a cargar.

enlace de la extensión de https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Answer 14

2018

Estoy usando VSCode (ver 1.27.2)

Base en mi experiencia, a pesar de que estoy trabajando con React . El idioma detectado en mi VSCode sigue siendo JavaScript vainilla. Y emmet no funcionó.

• Una de las formas de hacerlo funcionar de nuevo es cambiar el VSCode detectado VSCode a JavaScript React . Esto es solo para un solo archivo JS .

• Para cambiarlo una vez por completo, debe asociarlo.

Haga clic en Configure File Association for .js...

Y seleccione JSX , que en mi caso, ya lo hice.

• Para el lugar de trabajo, y por último si ninguno de ellos funciona para usted. Vaya a Preferencia de solo a ctrl + , (comma) para abrirlo.

Escriba y busque emmet o Emmet . Luego copie la configuración que desea anular. En mi caso:

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
}

Nota : no intenté usar jsx solo javascriptreact .

Implementé el segundo y tercer paso. Y ahora puedo hacer Emmet .

Answer 15

2019: respuesta directa al punto para React

La forma más directa de obtener autocompletar JSX / HTML en sus proyectos React es agregar esto a su configuración de usuario o configuración de espacio de trabajo ( <project-path>/.vscode/settings.json ):

      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true

Es posible que deba reiniciar VS Code para que el cambio surta efecto.

PD: Si no está haciendo esta asignación para un proyecto React.js, entonces la respuesta de KehkashanFazal probablemente debería funcionar para usted.