tsconfig.json-generator
tsconfig.json har långt över hundra kompilatoralternativ och varje TypeScript-tutorial visar en annan kombination. Den här generatorn håller sig till dem som spelar roll i de flesta projekt: target, module, moduleResolution, jsx, de vanliga booleska flaggorna (strict, esModuleInterop, skipLibCheck med flera) och mapparna outDir/rootDir. Förhandsvisningen av tsconfig.json uppdateras live vid varje ändring; kopiera den till projektets rot så har du en ren config utan de döda alternativ som de flesta mallar släpar med sig.
Så byggs konfigurationen
-
1
Välj target och module
JavaScript-versionen som tsc matar ut (ES2015 till ES2023, eller ESNext) och modulsystemet (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).
-
2
Ställ in moduleResolution och JSX
bundler för Vite/webpack-projekt, node16/nodenext för modern Node, node eller classic för äldre uppsättningar. Sätt jsx till react-jsx för modern React, eller låt den stå på none så utelämnas nyckeln.
-
3
Växla flaggorna
strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap och forceConsistentCasingInFileNames som enkla kryssrutor.
-
4
Bestäm mapparna
outDir och rootDir, förifyllda med ./dist och ./src. include och exclude ligger fast på src/**/* plus node_modules och dist.
-
5
Kopiera den genererade tsconfig
JSON-förhandsvisningen uppdateras live; ett klick kopierar den, redo att läggas i projektets rot som tsconfig.json.
Alternativen som generatorn skriver
| Alternativ | Standard här | Vad det gör |
|---|---|---|
target |
ES2022 |
JavaScript-version på den utmatade koden. ES2022 är säkert för dagens webbläsare och Node; välj äldre target bara för legacy-miljöer. |
module |
ESNext |
Modulsyntax i utdata. Använd NodeNext/Node16 för Node-ESM-projekt, CommonJS för äldre Node. |
moduleResolution |
node |
Hur importer hittas. Föredra bundler med Vite/webpack/esbuild och node16/nodenext med modern Node; node (node10) är det historiska beteendet. |
jsx |
utelämnas | Skrivs bara när du väljer ett läge. react-jsx för React 17+, preserve när en bundler transformerar JSX. |
strict |
true |
Slår på hela strict-familjen av kontroller. Låt den vara på i nya projekt. |
esModuleInterop |
true |
Fixar default-importer från CommonJS-paket. |
skipLibCheck |
true |
Hoppar över typkontroll av .d.ts-filer; mycket snabbare kompilering, döljer sällan riktiga buggar. |
forceConsistentCasingInFileNames |
true |
Avvisar importer vars skiftläge inte matchar filen på disk (klassiska felet vid flytt från macOS till Linux). |
resolveJsonModule |
true |
Tillåter import data from "./data.json". |
allowJs |
false |
Släpper in .js-filer i kompileringen; praktiskt mitt i en migrering. |
declaration |
false |
Matar ut .d.ts-filer; slå på när du publicerar ett bibliotek. |
sourceMap |
false |
Matar ut .js.map-filer för felsökning. |
outDir / rootDir |
./dist / ./src |
Vart den kompilerade koden hamnar och var källkoden ligger. |
baseUrl |
"." |
Skrivs alltid, så att ett handtillagt paths-block löses från projektets rot. |
Exakt standardutdata
Låt alla kontroller vara orörda så får du exakt den här filen:
{
"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"
]
}
Väljer du ett jsx-läge annat än none läggs en "jsx"-post till i compilerOptions.
Strict mode: vad det faktiskt slår på
strict: true är en paraplyflagga som aktiverar hela strict-familjen, däribland noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables och alwaysStrict. Nya projekt bör starta med allt på: att skruva åt strictness i efterhand är plågsamt.
Vanliga misstag
- Att sätta
module: "CommonJS"för ett Node-ESM-projekt. Om dinpackage.jsonsäger"type": "module", användNodeNextför bådemoduleochmoduleResolution. - Att använda
tscsom bundler. Det är en kompilator och typkontrollant. Använd Vite/esbuild/SWC för byggen ochtsc --noEmitför typkontroller. - Att kompilera allt. Utan en
include-lista plockar TypeScript upp varje.ts-fil den ser. Den genererade configen skriver alltidinclude: ["src/**/*"]och exkluderarnode_modulesochdist, så du är täckt. - Att behöva mer än configen erbjuder. Generatorn hålls medvetet minimal. Alternativ som
lib,paths,isolatedModulesellernoEmitär lätta att lägga till för hand när basfilen väl är på plats.
Vanliga frågor
För monorepos och flerpaketsprojekt, ja: en basfil med de delade alternativen som varje paket utökar via “extends”. För ett repo med ett enda projekt är en enda tsconfig.json som den genererade enklare.
Infördes i TypeScript 5.0 för projekt som byggs med Vite, webpack eller esbuild. Den speglar hur bundlers faktiskt löser importer, utan ESM-filändelsereglerna från node16/nodenext. För kod som körs direkt av Node, välj hellre node16 eller nodenext.
Inte via en egen kontroll. Men den genererade filen sätter alltid baseUrl till “.”, så du kan klistra in ett paths-block direkt under, till exempel “@/*”: [“src/*”], och det löses från projektets rot.
Oftast inte, och därför utelämnar generatorn den: target antyder en matchande uppsättning bibliotekstyper. Åsidosätt lib för hand bara i specialfall, som DOM-API:er i ett Node-projekt eller WebWorker-typer.
Ingen registrering behövs och inget sparas. Dina val används bara för att rendera förhandsvisningen, och i steg-för-steg-vyn följer de även med i sidans URL, vilket gör en färdig config lätt att bokmärka eller dela.
Relaterade verktyg
ASCII-tabellreferens
Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.
CSS-pilgnerator
Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.
HTML-teckenreferens
En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.
Generator för platshållarbilder
Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.
Referens för kortkommandon
Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.
Markdown-förhandsvisare
Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.
Verktyget finns på andra språk
- tsconfig.json 생성기 [KO]
- مولد ملف tsconfig.json [AR]
- Generador de tsconfig.json [ES]
- tsconfig.json ジェネレーター [JA]
- Tsconfig.json-generator [NL]
- Bộ tạo tsconfig.json [VI]
- Générateur de tsconfig.json [FR]
- Generator tsconfig.json [PL]
- tsconfig.json-Generator [DE]
- เครื่องมือสร้างไฟล์ tsconfig.json [TH]
- Generator tsconfig.json [ID]
- Gerador de tsconfig.json [PT]
- Generatore tsconfig.json [IT]
- tsconfig.json Generator [EN]
- Генератор tsconfig.json [RU]
- tsconfig.json Üretici [TR]
- tsconfig.json 生成器 [ZH]