A very opinionated guide but a good starting point
The Ultimate TypeScript Development Configuration
How I configure for development with ts-node-dev, ESLint with Airbnb style guide, Prettier, and TypeScript
However, setting up a productive workspace for TS development can be a hassle. This guide demystifies the one of the most frustrating yet most essential parts of modern programming with TypeScript.
All code used in this guide is available on GitLab.
I use Visual Studio Code as my IDE, so I will first set up VS Code for TypeScript development. Feel free to skip this section and continue with part 2.
Part 1: VS Code Setup
The are the extensions I use for TypeScript development in VS Code:
Some personal choices that I use in VS Code:
- Monokai Pro: “Professional theme and matching icons, from the author of the original Monokai color scheme.” (The best color theme imo.)
- vscode-icons: Icons for Visual Studio Code. (The best set of icons for VS Code imo.)
- Reload: Add a reload button to the status bar’s bottom right. (For when VS Code decides it’s time to get funky.)
Add these lines to your VS Code
Part 2: Project Configuration
Let’s first create a directory. For this, we’ll call it
While we’re at it, run
Inside that directory, create a
src folder. This is where your TS/JS files will go. Create an
index.ts file inside as well.
Install TypeScript and ts-node-dev
Next, we will install TypeScript (of course) and ts-node.
yarn add typescript ts-node-dev —-dev
Save these packages to
devDependencies as they will only be required for development purposes.
ESLint, extensions, and plugins
We’ll also need ESLint and a few extensions and plugins
yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier prettier —-dev
Add these to a
.eslintrc.js file, like so:
This is how I personally configure Prettier:
Now, go ahead and open up your original
lint. We will use this script to lint our TS/JS files.
"lint": "eslint --fix ./src/*"
This tells the ESLint CLI to lint all files located in the
src directory and fix any problems it is able to. Note that most problems you will have to fix yourself.
yarn lint in your
ts-ultimate directory and no errors should be found!
However, if you have no files in the
src directory, you may get an error that says: “No files matching the pattern”. That is expected behavior, so you can ignore this error.
If you are using VS Code, this is automatically integrated into the ESLint and Prettier plugins, so most errors will show up in your workspace while editing.
Part 3: Live Updates Without Compiling
To accomplish this not-so-daunting task, we will use ts-node-dev.
According to its npm README, ts-node-dev “restarts the target node process when any of the required files change, but shares the TypeScript compilation process between restarts.”
Basically, this means that we will be able to auto-reload our TypeScript file without waiting for
tsc to compile it.
Let’s create a dev script that uses nodemon:
"dev": "ts-node-dev --respawn --transpileOnly src/index.ts"
"dev:debug": "ts-node-dev --inspect=4321 --respawn --transpileOnly src/index.ts"
inspect flag informs ts-node-dev to attach a debugger to the process at port
4321 (this number doesn’t matter) to which VS Code will listen.
Part 4: Visual Studio Code Debugging
Using VS Code, we can add breakpoints to our TypeScript code to inspect and debug our code at these points.
Go to your
ts-ultimate directory and create a file called
Paste the following into your
This creates a debug config that will attach itself to the
dev:debug script when running.
To do so, first run the
Once you have this script running, open the debug tab, and, in the top navbar, click the play button next to Node: Nodemon.
VS Code should now be able to debug your script when you add breakpoints.
Congrats on making it this far! You now have a super-powerful TypeScript development environment with ESLint with Airbnb style guide and Prettier integration, live reloading, and on-the-fly VS Code debugging.