/tsconfig-npm

Scaffold quickly tsconfig.json file for different frameworks

Primary LanguageJavaScriptMIT LicenseMIT

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.

Usage

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

    DONE!

Some notices

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

eg:

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: