To read more articles like this, visit my blog
Having Typescript in a NodeJS project is a great way to ensure type safety, and it also improves the developer experience a lot. But we can take this even further by adding Linter and Formatter.
Today we will see how we can add linter and prettier to a NodeJS project using Typescript.
We are continuing this project from the previous article. The repository can be found here
Step 1: Install required dependencies
Let's first install the required dependencies.
yarn add -D eslint \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser
Now Eslint doesn't have typescript support by default, so we add two additional packages as a developer dependency.
Step 2: Create a config file
Now create a new eslint config file.
touch .eslintrc
And paste the following code there.
{
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
"extends": ["plugin:@typescript-eslint/recommended"],
"env": {
"node": true // Enabling Node.js global variables
},
"rules": {}
}
Let's add two scripts in our package.json file to lint and format easily.
"scripts": {
"lint": "eslint src/**/*.ts",
"format": "eslint src/**/*.ts --fix"
}
Now you can run the following command to lint the whole project.
yarn lint
Also, don't forget to create a .eslintignore
file to omit some folders from being linted. As that can take up some time.
.eslintignore
and put the following code there
node_modules
dist
Step 3: Add Prettier
Let's now add prettier
to the project. First, install the dependency.
yarn add -D prettier
then create a .prettierrc
file in the root folder and add the following configuration there
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2
}
Now, this configuration is just my personal preference. You can use your configuration if you want.
Also, you can add a new script for running prettier on all files at once
"scripts": {
"pretty": "prettier --write \"src/**/*.ts\""
}
and run prettier for all files like the following
yarn pretty
Step 4: Add Husky
Now all these are just awesome. But I always forget to run these commands. To ensure that no bad code is going to be pushed to the source control, we can use a great tool called husky
It will run before you try to make a commit and can run some health checks. To understand better, let's first install it.
yarn add -D husky
Then add a new block in the package.json
file
"husky": {
"hooks": {
"pre-commit": "yarn lint"
}
}
So every time you try to commit your changes, this pre-commit hook will run, and your code will be fixed automatically. How cool is that!
Github repo:
https://github.com/Mohammad-Faisal/nodejs-typescript-skeleton
Reach me out on my LinkedIN
Read more articles on My Website
Top comments (0)