TypeScript is quickly becoming one of the most-used, most-loved, and most-popular languages.
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.
In this guide, I’ll be using Yarn. It’s my package manager of choice due to its versatility, speed, and performance compared to npm.
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:
Let me know if you think I’m missing anything, or have any extensions to “add on” 😃.
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 settings.json:
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "typescript",
"autoFix": true
},
],
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
},
"[typescript]": {
"editor.formatOnSave": false,
}
This enables ESLint auto-fixing and Prettier auto-formatting.
Part 2: Project Configuration
Let’s first create a directory. For this, we’ll call it ts-ultimate.
mkdir ts-ultimate
While we’re at it, run npm init.
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
ts-node-dev enables REPL for TypeScript, with auto-restarting, which enables us to see our TypeScript code work in real-time, sans compilation (think nodemon or node-dev, but for TypeScript).
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:
barebones example, please take notice
This is how I personally configure Prettier:
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
Don’t try to be fancy. Please, just use semicolons.
Now, go ahead and open up your original package.json.
Add a script called 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 mostproblems you will have to fix yourself.
Run 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"
…and a dev:debug script:
"dev:debug": "ts-node-dev --inspect=4321 --respawn --transpileOnly src/index.ts"
The 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 launch.json inside.
mkdir .vscode
cd .vscode
touch launch.json
Paste the following into your launch.json:
This creates a debug config that will attach itself to the dev:debug script when running.
To do so, first run the dev:debug script.
yarn dev:debug
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.
Conclusion
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.
