¿Cómo comentar el código JSX en archivos .js en VSCode?


81

A diferencia de webstorm, no puedo comentar el código JSX en los .jsarchivos de Visual Studio Code.


1
¿Está buscando un atajo o simplemente cómo hacerlo?
erichardson30

@ erichardson30 ¡Me gustaría saber cómo hacerlo! Los comentarios del atajo se codifican haciendo "//" pero obviamente eso no va a funcionar. Me gustaría que hiciera "/ * * /" en su lugar.
YH Eng

Respuestas:



23

Intente deshabilitar todos los complementos, porque pueden cambiar el comportamiento del editor. Por ejemplo, si usa el complemento Babel ES6 / ES7 , el editor comenta la .jsxsintaxis mediante en //lugar de {/*. Ves el problema aquí .


Parece que he tenido este problema, donde el código VS comentando en JSX se aplicó {/* */}durante varias semanas, pero luego dejó de funcionar. Instalé Babel ES6 / ES7 ayer, así que intenté desinstalarlo y no volvió a la normalidad. ¿Alguna ayuda?
Jonathan Tuzman


11

En Visual Studio codeHit Cmd + /si está ejecutando en mac o place

{/* Your Code */}

Gracias.


Trabajando bien +1.
Sábado

1
No funciona, ¿qué nos falta? También desactivé todos los complementos.
Jordania

9

Los comandos del teclado ...

Ctrl + /- Windows y Linux
Cmd + /- MacOS

... ahora funciona como se esperaba para código de una sola línea y bloque agregando {/* */}alrededor de las líneas seleccionadas.

Se ha corregido en compilaciones recientes de Insiders de Visual Studio Code y se incluirá en la próxima versión completa.


El mismo atajo de teclado también funciona en Atom (probablemente no sea sorprendente ya que Visual Studio Code y Atom están construidos en electron).
Greg K

No se puede hacer que funcione en VS CODE. ¿Está utilizando algún complemento que ayude a esto?
Jordania

Funciona para mí sin ningún complemento en la versión general más reciente de VS Code.
GollyJer

4

{/ * esto funciona, pero solo una línea * /}


4
Su respuesta no es diferente de la respuesta ya bien marcada.
HDJEMAI

2
Los comentarios de varias líneas que usan esta sintaxis funcionan bien para mí (con el {/*único en la primera línea y */}solo en la última línea).
Jon Schneider

1
Definitivamente apoya el comentario
Charles Watson

4

Tuve el mismo problema hasta que convertí el idioma del archivo a Typecript React (typescriptreact).

Si desea configurar esto como el idioma para todos los archivos .js, agréguelo a su settings.json (ya sea globalmente o a nivel de proyecto en /.vscode/settings.json).

"files.associations": {
    "*.js": "typescriptreact"
  }

3

Si desea comentar el bloque de sintaxis JSX, puede hacerlo así

{
  /* <section>
     <header><h3>Contact Form</h3></header>
     <figure>
       <Form />
     </figure>
   </section> */
}

2

Esto también funciona

{
  //this.props.user.profileImage
  //? <img
  //    src={ this.props.user.profileImage }!
  //    alt=""
  //  />
  //: <FontAwesome name='smile-o' />
}

2

Actualmente, en el código de Visual Studio, se puede hacer presionando la combinación - Shift + Alt + A y comentar el código "jsx" que produce - {/ ** /} comentarios.


2

Si presionamos cmd + /de forma predeterminada, el código vs hará comentarios de una sola línea que no se pueden aplicar para JSX. Simplemente instale la siguiente extensión de código vs, estará bien.

vscode-idioma-babel


2

En React "{}" nos permite usar Expresiones JavaScript, por lo que podemos comentar como lo hacemos en JavaScript.

Ejemplo:

{/* multi 
line 
comment 
*/}

{// single line comment
}

2

Pasé algunas horas en este problema, y ​​la solución más fácil que encontré es la siguiente: Sí, el problema viene con la instalación de la extensión Babel ES6 / ES7, como muchos notaron, y cuando la desinstalas o la desactivas, VScode recupera su comportamiento normal: Ctrl + / => Alternar comentario de línea para línea o bloque seleccionado con //para archivos JS, JSX, ...; Shift + Alt + A => Alternar comentario de bloque para línea o bloque seleccionado entre <!-- --> en archivos HTML, entre /* */en expresiones JS y entre{/* */}en archivos JSX para etiquetas de marcado en render / return ... Entonces, si desea mantener la extensión Babel ES6 / ES7 activa y aún tiene tal comportamiento: puede parametrizar su propia combinación de atajos de teclas en el archivo keybindings.json (File / Preferencias / Atajos de teclado (o Ctrl + K + S) y luego haga clic en el pequeño icono de archivo en la parte superior derecha para seleccionar Abrir atajos de teclado que abre keybindings.json) donde usa el comando integrado de VScode "editor.action.insertSnippet" como sigue:

[
    {
    "key": "shift+alt+a",
    "command": "editor.action.insertSnippet",
    "args": {
        "snippet": "{/*\n ${TM_SELECTED_TEXT} \n*/}$0"
    },
    "when": "editorLangId == 'javascript' && editorTextFocus && !editorReadonly"
    }
]

Coloque el /nlugar que desee en la expresión para dividir las líneas y el $0para las ubicaciones finales del cursor. Luego guarde, y está funcionando correctamente :) solo en archivos JS y JSX Si desea especificar otro idioma, simplemente reemplace 'javascript'en la "when"expresión por el que desea de esta lista de identificadores de idioma de VScode: https://code.visualstudio.com/docs / languages ​​/ identifiers # _known-language-identifiers Y, por supuesto, si desea otro comportamiento de fragmento: simplemente reemplace el {/*por lo que desee en la "args"expresión.


1

Para Linux, para una sola línea, use Ctrl+ /.

Y para multilínea, seleccione los fragmentos en VSCode Simplemente presione Ctrl+ Shift+ A.

Funciona. Codificación feliz


0

=> Para comentar una línea única o varias líneas de código seleccionadas:

Para máquinas con Windows o Linux , seleccione el código y use:

  1. Ctrl + / para obtener el patrón de comentarios //
  2. Ctrl + Shift + A para obtener un patrón de comentario {/ * * /}

Para la máquina Mac , seleccione el código y use:

  1. Cmd + / para obtener el patrón de comentarios //
  2. Cmd + Shift + A para obtener un patrón de comentario {/ * * /}

=> Para descomentar las líneas de código comentadas: Simplemente repita el paso que utilizó para comentar.


0

Desinstalo SUBLIME BABEL JOSH PENG y funciona

Antes: //

Después:

{/ * * /}

con React JavaScript y funciona :-)

ingrese la descripción de la imagen aquí


0

Aparentemente, vs code no hace comentarios automáticamente usando ctrl + /o cmd + /en jsx, así que tenemos que escribir {/ * el texto va aquí * /} manualmente

EDITAR: Desinstale la extensión Babel del código vs y los comentarios jsx comenzarán en ctrl + /ocmd + /

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.