— July 30, 2019
Configure for development with ts-node-dev, ESLint with Airbnb style guide, Prettier, and TypeScript
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.
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:
Add these lines to your VS Code settings.json:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"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.
Let’s first create a directory. For this, we’ll call it ts-ultimate.
1
mkdir ts-ultimateWhile 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.
Next, we will install TypeScript (of course) and ts-node.
1
yarn add typescript ts-node-dev —-devts-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.
We’ll also need ESLint and a few extensions and plugins
1
yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier prettier —-devAdd these to a .eslintrc.js file, like so:
**barebones example, please take notice**
This is how I personally configure Prettier:
1
2
3
4
5
6
7
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.
1
"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.
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.
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:
1
"dev": "ts-node-dev --respawn --transpileOnly src/index.ts"…and a dev:debug script:
1
"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.
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.
1
2
3
mkdir .vscode
cd .vscode
touch launch.jsonPaste 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.
1
yarn dev:debugOnce 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.
Don’t miss out on the latest content! Join over 3k+ devs in subscribing to Instructive.dev.
Join the mailing list