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

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

Puedes comentar JSX por {/ ** /}

Ejemplo:

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

y luego Component2 sería comentado

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

Buscar Babel JavaScripten VS Code:

https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

Instalar y command + /comentará jsx con{ /* */ }

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

{/* Your Code */}

Gracias.

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.

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

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

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

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

Esto también funciona

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

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.

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

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

Ejemplo:

{/* multi 
line 
comment 
*/}

{// single line comment
}

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.

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

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

Desinstalo SUBLIME BABEL JOSH PENG y funciona

Antes: //

Después:

{/ * * /}

con React JavaScript y funciona :-)

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 + /