Visual Studio Code formatiert Javascript/React Code falsch?

Hallo! Ich habe eine neue React App gestartet und habe gerade angefangen zu coden, doch als ich das erste mal gespeichert habe, hat Visual Studio Code angefangen, die JS Files falsch zu formatieren.

Die Datei an sich ist übrigens eine beinahe unformatierte Datei die automatisch generiert wurde.

So will ich es formatiert haben:

function App() {
    return (
    <div className = "App" >
            <h1>yo</h1>
    </div >);
 }

Aber so wird es autoformatiert:

function App() {
    return ( <
        div className = "App" >
        <
        h1 > yo < /h1> < /
        div >
    );
}

1 Antwort

onlinefranzN

02.01.2021, 00:51

Hi,

Um das Problem zu lösen brauchst du einige VS Code Extensions. Ich empfehle dir Prettier. Das kannst du sehr leicht installieren. Einfach nach Prettier in VS Code Extensions suchen und das war's.

Automatische Formatierung einstellen:

Geh unter Einstellungen mit Control + Shift + P dann Einstellungen
Such nach format on save in der Suchleiste
Dann wähle es aus.

Das coole an Prettier ist, dass du die Formatierung sehr einfach anpassen kannst.

Mehr findest du hier:

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Ähnliche Beiträge

JavaScript "window is not defined"?

Ich möchte dieses Beispiel hier in meine Next.js (React) App übernehmen:

https://codesandbox.io/s/knhlr?file=/src/index.tsx:0-691

Dazu mein Next.js (React) Code, der eine weiße Seite wiedergibt und in der console schreibt: "window is not defined"

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            <ReactGlobe
                height="100vh"
                globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                markers={markers}
                width="100vw"
                options={options}
            />
        </div>
    );
}

...zum Beitrag

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zum Beitrag

Visual Studio Code: Kein SyntaxError-Highlighting?

Hallo,

und zwar habe ich mir soeben Microsoft Visual Studio Code heruntergeladen und habe gleich mal eine JavaScript-Datei erstellt. Ich habe mal absichtlich falschen Code geschrieben, um zu schauen, ob das SyntaxError-Highlighting funktioniert, tut es aber nicht. Da VSC mit integriertem IntelliSense arbeitet, dachte ich, dass das ganze ohne Extension funktioniert. Muss man zusätzlich Einstellungen vornehmen?

Hier das Beispiel, es werden keine Fehler angezeigt:

...zum Beitrag

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

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

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

...zum Beitrag

Wie benutze ich denLive Server bei Visual Studio Code?

Hi, ich beschäftige mich seit einigen Tagen mit dem Thema Programmierung. Aktuell lerne ich Java Script und nutze Visual Studio Code. Bei einer HTML Datei kann ich den Live Server öffnen, in einer "normalen" Datei nicht. Kann mir jmd sagen, wie ich meinen Code auf Fehler überprüfen kann?

Danke im voraus

...zum Beitrag

Visual Studio Code rechte geben?

Ich und ein Kollege haben angefangen mit Visual Studio Code, wir haben auch schon begonnen mit Live Share aber haben noch nicht rausgefunden wie man die Rechte verteilt.(Danke im voraus)

...zum Beitrag

Für C++ Visual Studio oder Visual Studio Code?

In folgendem Video wurde für C++ Visual Studio Code verwonden und empfohlen, Wieso nicht Visual Studio? In einer ähnlichen Fragen auf dieser Website wurde sogar gesagt das Visualstudio für C++ geignet wäre. Und wenn man Visual STudio verwendet, brauch man dann noch einen compiler?

https://www.youtube.com/watch?v=_apAsU9ROp0

...zum Beitrag

Was ist hier falsch electron/nodejs?

Es funktioniert alle Befehle außer

"create-electron-app ."

(Ich benutze visual studio code)

Was habe ich falsch gemacht?

...zum Beitrag

Braucht man unbedingt Visual Studio Code um eine App entwickeln zu können?

Ich habe Git-scm heruntergeladen und da kam die Einstellung mit Visual Studio Code Insiders. Ich hab das jetzt auch heruntergeladen und da ist alles auf Englisch. Wofür braucht man das und was kann man damit machen?

...zum Beitrag

Wieso klappt es nicht in Visual Studio Code aber nicht in Visual Studio 2022?

Hallo. Ich hab einen Simplen Code geschrieben. In Visual Studio 2022 läuft er gut, in Visual Studio Code nicht mehr. Aber ich mag Visual Studio Code tatsächlich mehr als Visual Studio 2022. Hier erstmal der Code:

Program.cs:

https://pastebin.com/wHkXyfPt

Window.cs:

https://pastebin.com/X63cZSWn

Die Fenster werden gezeigt, das WebView nicht. Bzw. in Visual Studio 2022 wird alles gezeigt in VS Code nicht. Weiß hier zufällig jemand warum? Danke im Voraus und lg.

...zum Beitrag

Wie kann ich in Visual Studio Code eine JavaScript Datei in eine html datei einbinden?

Also nicht im HTML Code integriert!

Danke! :)

...zum Beitrag

Was ist besser visual studio oder visual studio code?

...zum Beitrag

Flutter mit Visual Studio Code devices erstellen?

Ich möchte in Visual Studio Code eine flutter App programmieren. Wenn ich Flutter run mache kann ich devices auswählen, ich möchte aber noch mehr devices erstellen. Wie mache ich das?

...zum Beitrag

Visual Studio Code?

Kann man die Daten aus der App auf einem anderen Rechner ohne Stick etc. übertragen ?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen