1

Estoy trabajando con ReactJs en VS Code. Me creé un proyecto nuevo y al modificar solo una palabra en el archivo App.js y luego guardar el archivo con el comando Command + s me distorsiona el código. Les pongo un ejemplo con mi código.

Este es mi código bueno, el código que por defecto react crea:

import React from 'react';
 import logo from './logo.svg';
 import './App.css';

  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
           Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
          className="App-link"
         href="https://reactjs.org"
          target="_blank" 
          rel="noopener noreferrer"
         >
           Aprende React
         </a>
          </header>
        </div>
      );
     }

    export default App;

Ok, el código de arriba está ok, pero luego al presionar command + s, después de modificar la palabra "Aprende" por cualquier otra o modificando en cualquier otro lado del archivo me modifica todo el archivo y me lo deja así:

import React from 'react';
import logo from './logo.svg';
 import './App.css';

  function App() {
   return ( <
    div className = "App" >
    <
    header className = "App-header" >
    <
    img src = { logo }
    className = "App-logo"
    alt = "logo" / >
    <
    p >
    Edit < code > src / App.js < /code> and save to reload. <
    /p> <
    a className = "App-link"
    href = "https://reactjs.org"
    target = "_blank"
    rel = "noopener noreferrer" >
    Aprende React <
    /a> <
    /header> <
    /div>
   );
  }

   export default App;

O sea, código feo, y aparte me tira errores.

Bueno, en realidad sí me hace los cambios (me lo refresca en la web los cambios), pero me lo formatea feamente, no se ve bonito el código, y los errores que veo son porque tengo el plugin Error Lens.

¿Alguien sabe por qué?

Por si acaso, comentar que esto sucede en todos los archivos del proyecto y esto no me pasaba cuando trabajaba con flutter.

Las extensiones instaladas que tengo son:

  • Android IOS Emulator
  • Awesome Flutter Snippets
  • Bracket Pair Colorizer 2
  • Cobalt2 Theme Official
  • Dart
  • Duplicate Selection or line
  • Error Lens
  • ESLint
  • Flutter
  • Format HTML in PHP
  • GitLens — Git supercharged
  • HTML Snippets
  • Image preview
  • JavaScript (ES6) code snippet
  • JS-CSS-HTML Formatter
  • Material Icon Theme
  • One Dark Pro
  • PHP Intellisense
  • Polacode
  • Pubspec Assist
  • SQL Server (mssql)
  • Version Lens
2
  • Parece estar formateandolo a algun tipo de PSR-2, podrias ir buscando por ahi.
    – Shassain
    Commented el 28 abr. 2020 a las 14:09
  • Gracias amigo, voy a ver que hago Commented el 28 abr. 2020 a las 14:42

3 respuestas 3

3

Lo más probable es que sea algún conflicto con extensiones que pueda estar causándote eso (al menos recuerdo que alguna vez me pasó lo mismo con archivos .jsx), podrías agregar qué extensiones tienes instaladas a tu pregunta.
De todas formas, para desactivar el formateo al guardar, anda a Preferencias -> Configuración (creo que así debería ser en la versión en español, por favor confirmar) y busca editor.formatOnSave para desactivarlo:

introducir la descripción de la imagen aquí


Revisando tus extensiones instaladas, efectivamente debe ser JS-CSS-HTML Formatter la que te causa problemas. Es una extensión que lleva desde 2017 sin recibir una actualización, así que probablemente ya no esté siendo mantenida.
Para formateo de JS, te recomiendo usar ESLint, que es mantenida por Microsoft y se basan en estándares de Linting usados en distintas plataformas.

1
  • Hola amigo le cuento que busque esa opcion y me sale que ya esta desactivado osea ya esta desmarcado modificare mi pregunta para añadir todas las extensiones que tengo listo, gracias. Commented el 28 abr. 2020 a las 13:07
1

El problema ya fue solucionado, el problema era la extension JS-CSS-HTML Formatter al parecer esta dando conflicto al guardar.

2
  • Revisa la actualización de mi respuesta. Saludos Commented el 28 abr. 2020 a las 21:40
  • Esto no corresponde a una respuesta, por favor elimina está respuesta y edita tu pregunta o comenta en ella para dar aclaraciones de la misma.
    – FranAcuna
    Commented el 7 feb. 2021 a las 23:05
1

revisa entre tus extensiones e inhabilita aquellas que puedan afectar el formato HTML.

Antes estaba trabajando en un proyecto Angular y cuando inicie otro proyecto con React Js me sucedió lo mismo y en mi caso tenia instalada la extensión JS-CSS-HTML Formatter.

La inhabilite y listo (No tienes que des-instalar si no lo requieres ya que puedes seguir en otro proyecto en donde si la necesites).

Saludos.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.