reactjs - for - visual studio code react extensions

Formato de cambios de código de Visual Studio(React-JSX)

Question

Tengo el siguiente fragmento de código en mi index.js

class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}

}
El código funciona, pero cada vez que guardo (ctrl + s) el estudio visual formatea el jsx así:

class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}

}

¿Como puedo resolver esto? Gracias

Answer 1

Al final, el truco fue cambiar el formato de archivo de JavaScript a JavaScript React en la barra de herramientas inferior. Lo estoy publicando aquí para futuras referencias ya que no encontré ninguna documentación sobre este tema.

Además de lo anterior. Si hace clic en ''Configurar asociación de archivos para .js'', puede configurar todos los archivos .js en Javascript Reaccionar

Answer 2

Alternativamente, guardar el archivo con una extensión .jsx resuelve esto en vscode.

Tuve el mismo desafío y espero descubrir una mejor manera de manejar este problema en vscode.

Me di cuenta de que su solución de trabajo sugerida debe realizarse cada vez que abra el archivo de reacción con una extensión de .js

Answer 3

Instale Prettier (si no está instalado de forma predeterminada) e intente agregar esto a la configuración de su usuario o lugar de trabajo:

"prettier.jsxBracketSameLine": true

No coloque linebreak entre el retorno y la expresión JSX devuelta.

Activar autoformato (Alt+Shift+F) y comprobar si funciona.

Answer 4

Puede instalar una extensión como react-beautify que le ayuda a formatear su código jsx.

Se encuentra here

Esta extensión envuelve a prettydiff / esformatter para formatear su javascript, JSX, mecanografía, archivo TSX.

Answer 5

Tuve un problema similar, luego descubrí que fue causado por la extensión ''beautify''. Después de que desinstalé la extensión, todo está funcionando bien.

Answer 6

cambiar la configuración de preferencias de vscode> configuración de usuario a continuación:

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

Answer 7

Asegúrese de no tener múltiples formateadores de javascript habilitados en su área de trabajo actual. (Debe desactivar el resto de ellos para su área de trabajo actual).

reac-beautify realiza la magia, pero falla si tienes algún otro formateador / embellecedor JS ya instalado.

En mi caso, tuve instalada la extensión Reactive-Beautify y JS-CSS-HTML Formatter. Tuve que deshabilitar el formateador JS-CSS-HTML para mi espacio de trabajo actual.