This is a combination of the work by
- Matt Pocock @total-typescript/tsconfig
- EpicWeb-Dev @epicweb-dev/config
This package makes those decisions even easier. Based on Matt Pococks' TSConfig Cheat Sheet.
Node.js Version: Requires Node 22.18+ or 24.11+ for native TypeScript support.
- Install:
npm install --save-dev @gingacodemonkey/config-
Choose which
tsconfig.jsonyou need from the list below. -
Add it to your
tsconfig.json:
The tricky thing about tsconfig.json is there is not a single config file that can work for everyone. But, with two or three questions, we can get there:
If you're targeting Node.js, use this selection of configs:
{
"extends": "@gingacodemonkey/config/tsc/node/app", // For an app
"extends": "@gingacodemonkey/config/tsc/node/library", // For a library
"extends": "@gingacodemonkey/config/tsc/node/library-monorepo" // For a library in a monorepo
}These configs include verbatimModuleSyntax and allowImportingTsExtensions for direct TypeScript execution.
If yes, use this selection of configs:
{
// My code runs in the DOM:
"extends": "@gingacodemonkey/config/tsc/dom/app", // For an app
"extends": "@gingacodemonkey/config/tsc/dom/library", // For a library
"extends": "@gingacodemonkey/config/tsc/dom/library-monorepo", // For a library in a monorepo
// My code _doesn't_ run in the DOM:
"extends": "@gingacodemonkey/config/tsc/no-dom/app", // For an app
"extends": "@gingacodemonkey/config/tsc/no-dom/library", // For a library
"extends": "@gingacodemonkey/config/tsc/no-dom/library-monorepo" // For a library in a monorepo
}If no, you're probably using an external bundler. Most frontend frameworks, like Vite, Remix, Astro, Nuxt, and others, will fall into this category. If so, use this selection of configs:
{
// My code runs in the DOM:
"extends": "@gingacodemonkey/config/bundler/dom/app", // For an app
"extends": "@gingacodemonkey/config/bundler/dom/library", // For a library
"extends": "@gingacodemonkey/config/bundler/dom/library-monorepo", // For a library in a monorepo
// My code _doesn't_ run in the DOM:
"extends": "@gingacodemonkey/config/bundler/no-dom/app", // For an app
"extends": "@gingacodemonkey/config/bundler/no-dom/library", // For a library
"extends": "@gingacodemonkey/config/bundler/no-dom/library-monorepo" // For a library in a monorepo
}If your app has JSX, you can set the jsx option in your tsconfig.json:
{
"extends": "@gingacodemonkey/config/bundler/dom/app",
"compilerOptions": {
"jsx": "react-jsx"
}
}Mostly relevant for when you're transpiling with tsc. If you want to change the output directory of your compiled files, you can set the outDir option in your tsconfig.json:
{
"extends": "@gingacodemonkey/config/tsc/node/library",
"compilerOptions": {
"outDir": "dist"
}
}Create a eslint.config.ts file in your project root with the following
content:
import type { Linter } from "eslint";
import { config as defaultConfig } from '@gingacodemonkey/config/eslint'
const config: Linter.Config[] = [...defaultConfig]
export default configCustomizing ESLint
Learn more from the Eslint docs here.
There is a separate export, that you can use for styling.
Create a eslint.config.style.ts file in your project root with the following contents:
import type { Linter } from "eslint";
import { config as defaultConfig } from '@gingacodemonkey/config/styled'
const config: Linter.Config[] = [...defaultConfig]
export default configThis is meant to be run with Husky, CommitLint and Lint-Staged
pnpm i -D husky @commitlint/cli @commitlint/config-conventional lint-staged
pnpm exec husky initThis will create the .husky folder at the root of your project.
Create the file .husky/pre-commit with the contents:
pnpm exec lint-stagedCreate the file .husky/commit-msg with the contents:
pnpm exec commitlint --edit "$1";
FILE=$1
MESSAGE=$(cat $FILE)
TICKET=[$(git rev-parse --abbrev-ref HEAD | grep -Eo '^(\w+/)?(\w+[-_])?[0-9]+' | grep -Eo '(\w+[-])?[0-9]+' | tr "[:lower:]" "[:upper:]")]
if [[ $TICKET == "[]" || "$MESSAGE" == "$TICKET"* ]];then
exit 0;
fi
# Strip leading '['
TICKET="${TICKET#\[}"
# Strip trailing ']'
TICKET="${TICKET%\]}"
echo $"$TICKET\n\n$MESSAGE" > $FILECreate the file .lintstagedrc with the contents:
{
"*.{js,ts,tsx}": ["eslint --config eslint.config.style.js --fix --max-warnings=0 --cache"]
}Create the file commitlint.config.js with the contents:
export default {
"extends": [ "@commitlint/config-conventional" ],
"rules": {
"subject-case": [ 2, "always", [ "sentence-case", "lower-case" ]],
},
};pnpm semantic-release-unsquashAdd a file called .releaserc.json
{
"branches": [
"main"
],
"plugins": [
[
"semantic-release-unsquash",
{
"commitAnalyzerConfig": {
"releaseRules": [
{
"type": "feat",
"release": "minor"
},
{
"type": "fix",
"release": "patch"
},
{
"type": "docs",
"release": "patch"
},
{
"type": "style",
"release": "patch"
},
{
"type": "refactor",
"release": "patch"
},
{
"type": "perf",
"release": "patch"
},
{
"type": "test",
"release": "patch"
},
{
"type": "chore",
"release": "patch"
},
{
"type": "refactor",
"release": "patch"
},
{
"breaking": true,
"release": "major"
}
]
},
"notesGeneratorConfig": {
}
}
],
[
"@semantic-release/changelog",
{
"changelogFile": "CHANGELOG.md"
}
],
[
"@semantic-release/npm",
{
"npmPublish": false,
"tarballDir": "dist"
}
],
[
"@semantic-release/git",
{
"assets": [
"CHANGELOG.md"
]
}
],
[
"@semantic-release/github",
{
"assets": "dist/*.tgz"
}
]
]
}pnpm add -D knip
{
"knip": {
"entry": [
"scripts/**/*.{js,ts}"
],
"project": [
"**/*.{js,ts}"
],
"ignoreBinaries": [
"date"
],
"ignoreDependencies": [
"prisma-.+",
"@commitlint/cli",
"@stylistic/eslint-plugin",
"eslint-plugin-simple-import-sort",
"tsx"
]
}
}
{ // I'm building an app that runs in the DOM with an external bundler "extends": "@gingacodemonkey/config/bundler/dom/app" }