1.1.3 • Public • Published

Scaffold quickly tsconfig.json

When I search on Youtube how to create & publish an npm package. I found an awesome tutorial of Ben Award - create tsconfig.json package. Thanks Ben!.

So I try it immediately and make my custom tsconfig.json.


Npm package name: td-tsconfig:

  • Install package in dev-dependencies

    $ yarn add -D td-tsconfig
    # or with npm
    $ npm i --save-dev td-tsconfig
  • Command to create tsconfig.json file:

    $ yarn td-tsconfig
    # or with npx
    $ npx td-tsconfig
  • And pick your framework you need There are 4 frameworks:

    • node
    • react
    • nextjs
    • vitejs-react
    • cypress (tsconfig extends)
  • After running commands above, an tsconfig.json file will be created directly on your root folder.

  • So all the things are done, now may be you don't need keep package td-tsconfig in your project any more, and you and remove it.

    $ yarn remove td-tsconfig
    # or 
    $ npm uninstall td-tsconfig
  • Hint: maybe you can install globally this package and then you can use for all your projects.

    $ yarn global add td-tsconfig
    # or
    $ npm i -g td-tsconfig


Some notices

  • Note: a notice when to use absolute path in ViteJS with React


import {Navbar} from 'src/components/Navbar.tsx' // --> is absolute path with baseUrl= "./"

To make sure it works, we need customize alias in vite.config.ts

// vite.config.js
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { resolve } from 'path';

export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      src: resolve(__dirname, 'src'),

To use import { resolve } from 'path';, you need installed package @types/node.

  • Note: If we use jest & cypress for Testing in same React project, we need have two different files tsconfig.json: one in root dir for src project and another in cypress folder to avoid conflict types between 2 this packages. Check my project Bookstore to see how config.

    Example of tsconfig.json for cypress in React:

    // to avoid clashing with Jest types

      "extends": "../tsconfig.json",
      "compilerOptions": {
        "noEmit": true,
        "types": ["cypress"]
      "include": ["../node_modules/cypress", "./*/*.ts"]

Project references:

See more my implementation tsconfig.json in some projects:


npm i td-tsconfig

DownloadsWeekly Downloads






Unpacked Size

7.76 MB

Total Files


Last publish


  • tienduy-nguyen