¿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.

YH Eng
fuente
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
Este está relacionado: stackoverflow.com/q/49121821/823321
sɐunıɔ ןɐ qɐp

Respuestas:

94

Puedes comentar JSX por {/ ** /}

Ejemplo:

render() {
  return (
    <div>
      <Component1 />
      {/* <Component2 /> */}
    </div>
  )
}

y luego Component2 sería comentado

erichardson30
fuente
8
Sí, pero ¿hay alguna forma de hacerlo a través del atajo Cmd + / atajo?
YH Eng
He estado buscando y no veo nada ... Te
avisaré
1
github.com/Microsoft/vscode/issues/6461 Esto es lo que pude encontrar con respecto al problema
YH Eng
Sí ... ¿parece ser un problema continuo?
erichardson30
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í .

Andrej Gajdos
fuente
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.

Tunvir Rahman Tusher
fuente
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.

GollyJer
fuente
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 * /}

Brandon Brigance
fuente
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"
  }
5tormTrooper
fuente
3

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

{
  /* <section>
     <header><h3>Contact Form</h3></header>
     <figure>
       <Form />
     </figure>
   </section> */
}
Kyaw Kyaw Soe
fuente
2

Esto también funciona

{
  //this.props.user.profileImage
  //? <img
  //    src={ this.props.user.profileImage }!
  //    alt=""
  //  />
  //: <FontAwesome name='smile-o' />
}
Antonio Brandao
fuente
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.

Sodinikas
fuente
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

Manzoor Samad
fuente
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
}
Yash P Shah
fuente
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.

CyberChris
fuente
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

Braj Bhushan Singh
fuente
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.

Ruta de Ipsita
fuente
0

Desinstalo SUBLIME BABEL JOSH PENG y funciona

Antes: //

Después:

{/ * * /}

con React JavaScript y funciona :-)

ingrese la descripción de la imagen aquí

Gelo K
fuente
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 + /

Nibodh Daware
fuente