How to use a local tsconfig.json to customize TypeScript checking without bothering your colleagues

We know that TypeScript is a programming language that adds static types to JavaScript, enabling developers to catch errors at compile time and write more readable and secure code. However, not all developers agree on the same TypeScript checking rules or even whether it should be present in the project. Therefore, it can be useful to have a set of custom rules for your preferences.

In this post, I'll show you how you can use a local tsconfig.json file to apply your own rules to TypeScript checking without affecting your colleagues' rules, using a global .gitignore file.

What is a tsconfig.json?

A tsconfig.json file is a JSON file that specifies TypeScript compilation options for a project. It allows you to configure aspects such as the level of type-checking strictness, the modules you want to use, input and output file paths, and more. You can see the complete list of available options in the official TypeScript documentation.

One or more tsconfig.json files can be placed in the root of your project or any of its subdirectories. TypeScript looks for the nearest tsconfig.json file to the file being compiled and uses the options defined in it. If no tsconfig.json file is found, TypeScript uses the default options.

Why use a local tsconfig.json?

Sometimes, you may want a different set of options than the default tsconfig.json file in your project. For example, you might want to enable or disable certain type-checking rules, change the compilation target, or experiment with new TypeScript features.

However, if you simply modify the existing tsconfig.json file in your project, you may end up causing issues for your colleagues. They may not agree with your changes, or they may have difficulty compiling or running the code with the new options.

A solution to this problem is to use a local tsconfig.json file, which only affects your machine and is not shared with other developers. This way, you can customize TypeScript checking without interfering with others' work.

How to use a local tsconfig.json?

To use a local tsconfig.json file, you need to follow a few simple steps:

1. Create a tsconfig.local.json file in the root of your project. You can copy the content of the default tsconfig.json file in your project and modify it according to your preference, by simply extending it, or create a new file with the options you want to use.
2. Add the name of your local tsconfig.json file to the global .gitignore file on your system. A global .gitignore file specifies which files or directories should be ignored by Git in all your local repositories. If you don't have one, just create a file named .gitignore in any system folder and run the command git config --global core.excludesfile <path-to-created-file>. For example, if I created the .gitignore file in the home folder of the system, I could run git config --global core.excludesfile ~/.gitignore. By adding the name of your local tsconfig.json file to the global .gitignore file, you prevent it from being tracked or pushed to the remote repository for all your projects.
3. Use your favorite code editor or the command line to check your TypeScript files with your local tsconfig.json file. You can specify which tsconfig.json file you want to use with the --project or -p option of the tsc command. For example, if your tsconfig.json file is named tsconfig.local.json, you can compile your TypeScript files with the command tsc -p tsconfig.local.json.

There you go! Now you can use a local tsconfig.json file to apply your own rules to TypeScript checking without affecting your colleagues' rules, using a global .gitignore file. The same logic can be applied to similar situations, such as rules for ESLint or Prettier, etc.

I hope this post has been helpful to you. If you have any questions or suggestions, feel free to leave a comment below.

Thanks for reading, and until next time! 😊