A diferencia de webstorm, no puedo comentar el código JSX en los .js
archivos de Visual Studio Code.
A diferencia de webstorm, no puedo comentar el código JSX en los .js
archivos de Visual Studio Code.
Respuestas:
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 .jsx
sintaxis mediante en //
lugar de {/*
. Ves el problema aquí .
{/* */}
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?
Buscar Babel JavaScript
en VS Code:
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
Instalar y command + /
comentará jsx con{ /* */ }
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 * /}
{/*
único en la primera línea y */}
solo en la última 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' />
}
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.
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 /n
lugar que desee en la expresión para dividir las líneas y el $0
para 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:
Ctrl + /
para obtener el patrón de comentarios //Ctrl + Shift + A
para obtener un patrón de comentario {/ * * /}Para la máquina Mac , seleccione el código y use:
Cmd + /
para obtener el patrón de comentarios //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.
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 + /