[Part 1] Build a CLI tool: Setup the tsonfig.json

#nextjs #opensource #shadcn #tsconfig

Introduction

I am building a CLI tool that lets you add features into your project via CLI. This CLI tool currently only supports adding features in a Next.js based projects. The idea is to run a command like

pnpx thinkthroo@latest add supabase-auth

pnpx thinkthroo@latest add s3-upload

and this would add the files required.

I have broken down the process into parts and share the steps involved and write about my experience in setting up a CLI tool through this articles.

Create a project

I have referenced this article — How to write a TypeScript Library to set up this project but I had my own touch inspired by shadcn/ui CLI since what I am building is also a CLI tool.

Create folder

My project — Think Throo is a monorepo and has packages folder. Similar to Shadcn/ui, I created a folder name thinkthroo

Run npm init

I navigated to this folder and initialised by running the below command:

npm init

You will be prompted with some questions, I answered them like shown below:

Setup tsconfig.json

I created a file named tsconfig.json and copied the contents from shadcn/ui’s tsconfig.json.

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "@repo/typescript-config/ts-library.json",
  "compilerOptions": {
    "isolatedModules": false,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "test/fixtures"]
}

The difference is the way I am importing the extends . Since my setup is a monorepo, I would now have to add @repo/typescript-config as dependency in package.json. Read more about Turborepo.

"devDependencies": {
    "@repo/typescript-config": "*"
}

And run npm install. I did not use pnpm as my package manager, Shadcn uses pnpm as its package manager.

When you setup a monorepo using turbo, the basic template gives you 3 packages by default. This can be found in turborepo/examples/basic.

Finally, I created another file named ts-library.json in typescript-config that is imported in my CLI tool, thinkthroo and updated its code to what is shown below:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSources": false,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true
  },
  "exclude": ["node_modules"]
}

I copied this content from shadcn-ui/tsconfig.json, the one you find at the root level.

You will find some other files in this typescript-config.

These are created at the time of setting up the monorepo. I might remove this package in the future releases if I do not see a need, but for now I am going to just leave it there.

Conclusion:

So far, we have created two files

package.json
tsconfig.json

You will find this code in this commit

The next part is to setup tsup to bundle your typescript.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects