Softonic

tsconfig.json-Generator

Schritt 1 / 2
Ergebnisse

tsconfig.json hat weit über hundert Compiler-Optionen, und jedes TypeScript-Tutorial zeigt eine andere Kombination. Dieser Generator beschränkt sich auf die Optionen, die für die meisten Projekte zählen: target, module, moduleResolution, jsx, die gängigen booleschen Flags (strict, esModuleInterop, skipLibCheck und Co.) sowie die Ordner outDir/rootDir. Die tsconfig.json-Vorschau aktualisiert sich live bei jeder Änderung; kopiere sie ins Stammverzeichnis deines Projekts und du hast eine saubere Konfiguration ohne die toten Optionen der meisten Boilerplates.

Wie die Konfiguration erstellt wird

  1. 1

    target und module wählen

    Die JavaScript-Version, die tsc ausgibt (ES2015 bis ES2023 oder ESNext), und das Modulsystem (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    moduleResolution und JSX festlegen

    bundler für Vite/webpack-Projekte, node16/nodenext für modernes Node, node oder classic für Altsysteme. Setze jsx auf react-jsx für modernes React oder lass es auf none, damit der Schlüssel entfällt.

  3. 3

    Flags umschalten

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap und forceConsistentCasingInFileNames als einfache Checkboxen.

  4. 4

    Ordner festlegen

    outDir und rootDir, vorbelegt mit ./dist und ./src. include und exclude stehen fest auf src/**/* sowie node_modules und dist.

  5. 5

    Generiertes tsconfig kopieren

    Die JSON-Vorschau aktualisiert sich live; ein Klick kopiert sie, bereit als tsconfig.json im Projektstamm.

Die Optionen, die dieser Generator schreibt

Option Standard hier Wirkung
target ES2022 JavaScript-Version des ausgegebenen Codes. ES2022 ist für aktuelle Browser und Node sicher; ältere Targets nur für Legacy-Umgebungen.
module ESNext Modulsyntax der Ausgabe. NodeNext/Node16 für Node-ESM-Projekte, CommonJS für Legacy-Node.
moduleResolution node Wie Importe aufgelöst werden. Nimm bundler mit Vite/webpack/esbuild und node16/nodenext mit modernem Node; node (node10) ist das Legacy-Verhalten.
jsx entfällt Wird nur geschrieben, wenn du einen Modus wählst. react-jsx für React 17+, preserve, wenn ein Bundler das JSX transformiert.
strict true Schaltet die komplette Strict-Familie ein. Für neue Projekte anlassen.
esModuleInterop true Repariert Default-Importe aus CommonJS-Paketen.
skipLibCheck true Überspringt die Typprüfung von .d.ts-Dateien; deutlich schnellere Kompilierung, verdeckt selten echte Fehler.
forceConsistentCasingInFileNames true Weist Importe ab, deren Groß-/Kleinschreibung von der Datei auf der Platte abweicht (der Klassiker beim Wechsel von macOS zu Linux).
resolveJsonModule true Erlaubt import data from "./data.json".
allowJs false Lässt .js-Dateien in der Kompilierung zu; nützlich während einer Migration.
declaration false Erzeugt .d.ts-Dateien; einschalten, wenn du eine Library veröffentlichst.
sourceMap false Erzeugt .js.map-Dateien fürs Debugging.
outDir / rootDir ./dist / ./src Wohin der kompilierte Code geht und wo die Quellen liegen.
baseUrl "." Wird immer geschrieben, damit ein von Hand ergänzter paths-Block vom Projektstamm aus aufgelöst wird.

Die exakte Standardausgabe

Lass alle Regler unangetastet und du bekommst genau diese Datei:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

Wählst du einen jsx-Modus ungleich none, wird ein "jsx"-Eintrag an compilerOptions angehängt.

Strict Mode: was er wirklich einschaltet

strict: true ist ein Sammel-Flag, das die komplette Strict-Familie aktiviert, darunter noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables und alwaysStrict. Neue Projekte sollten mit allen starten: Strictness nachzurüsten ist schmerzhaft.

Häufige Fehler

  • module: "CommonJS" für ein Node-ESM-Projekt setzen. Steht in deiner package.json "type": "module", verwende NodeNext für module und moduleResolution.
  • tsc als Bundler benutzen. Es ist Compiler und Typprüfer. Nimm Vite/esbuild/SWC für Builds und tsc --noEmit für Typchecks.
  • Alles kompilieren. Ohne include-Liste zieht TypeScript jede .ts-Datei heran, die es findet. Die generierte Konfiguration schreibt immer include: ["src/**/*"] und schließt node_modules und dist aus, du bist also abgedeckt.
  • Mehr brauchen, als die Konfiguration bietet. Dieser Generator bleibt bewusst minimal. Optionen wie lib, paths, isolatedModules oder noEmit lassen sich leicht von Hand ergänzen, sobald die Basisdatei steht.

Häufig gestellte Fragen

Für Monorepos und Multi-Package-Projekte ja: eine Basisdatei mit den gemeinsamen Optionen, die jedes Paket per “extends” erweitert. Für ein Repo mit einem einzelnen Projekt ist ein einzelnes tsconfig.json wie das generierte einfacher.

In TypeScript 5.0 für Projekte eingeführt, die mit Vite, webpack oder esbuild bauen. Es entspricht der Art, wie Bundler Importe tatsächlich auflösen, ohne die ESM-Dateiendungsregeln von node16/nodenext. Für Code, den Node direkt ausführt, nimm besser node16 oder nodenext.

Nicht über ein eigenes Bedienelement. Die generierte Datei setzt baseUrl aber immer auf “.”, du kannst also direkt darunter einen paths-Block einfügen, zum Beispiel “@/*”: [“src/*”], und er wird vom Projektstamm aus aufgelöst.

Meist nicht, deshalb lässt dieser Generator die Option weg: target impliziert einen passenden Satz an Bibliothekstypen. Überschreibe lib nur in Sonderfällen von Hand, etwa für DOM-APIs in einem Node-Projekt oder WebWorker-Typen.

Es ist keine Anmeldung nötig und nichts wird gespeichert. Deine Auswahl dient nur dazu, die Vorschau zu rendern; in der Schritt-für-Schritt-Ansicht wandert sie zusätzlich in die Seiten-URL, sodass sich eine fertige Konfiguration leicht als Lesezeichen sichern oder teilen lässt.

Verwandte Tools

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

CSS-Scrollbar-Generator

Passen Sie das Erscheinungsbild der Bildlaufleiste per CSS an. Modernes scrollbar-color / scrollbar-width und das ältere ::-webkit-scrollbar für breite Browser-Unterstützung.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Tool in anderen Sprachen verfügbar