TypeScript Linting and Code Formatter
Tags: typescript, tutorial
Published: 2021-04-10 03:23:12

 ---
title: TypeScript Linting and Code Formatter
published: true
description: Write a better code by adding lint and code formatter to your typescript project
tags: typescript, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psmr24g0cdnrisuhxbdk.png
series: Create Express API TypeScript Boilerplate
---
> Btw, before I forgot to mention it.
This is a series post about **Create Express API TypeScript Boilerplate** and this is the first post.
After the second, third, etc. releases, I will mention it here. 👍
>> Still learning it thought, how to create a series post on this site. 😂

## Let's Get Started! 🏃


**TL;DR** 🤝: [Source Code](https://github.com/frasnym/Express-API-TypeScript-Boilerplate/tree/chore/linting-and-formatter)

On this project, we will use the famous **Visual Studio Code**. 
So please install it first so you can expect same result in the end 😁.

> And to avoid unexpected things happened, let's install some extension to VSCode.
1. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## Setup Lint 🚨

1. Install [ESLint](https://eslint.org/docs/user-guide/getting-started) package: `npm i -D eslint`
 - This is the main package. This package support not only **JavaScript** but **TypeScript** as well.

2. Install [TypeScript](https://www.typescriptlang.org/) package: `npm i -D typescript`
 - This is a package that we will use to work with **TypeScript**.

3. Initialize TypeScript: `npx tsc --init`
 - We can initialize typescript with this command. This command will be make a file that called `tsconfig.json`.
 - Inside that file, we can specify what config we need. Let's just leave it by default for now. Example: ![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6aaifrov68fb59i5i767.png)

4. Initialize ESLint: `npx eslint --init`
 - Now initialize the ESLint configuration. You can copy my settings below for TypeScript support. [Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5343czrbnfe6jp9ytttj.png)
 - **Try it Out!** 🚀
 - How to make ESLint catch error on code that we write: `npx eslint src/*.ts`. [Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6umjl7ucwr1dv5783ben.png)
 - How to fix the error: `npx eslint src/*.ts --fix`. Example: ![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5n3725dzd52895tuul1.png)

## Setup Code Formatter 🎨

1. We will use [Prettier](https://prettier.io/) to help us here

2. Install the required package: `npm i -D prettier-eslint`

3. Next we will install cli version of prettier-eslint: `npm i -D prettier-eslint-cli`
 - **Try it Out!** 🚀
 - How to format the file: `npx prettier-eslint 'src/**/*.ts'`. Example: ![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pace4dz4e0awn90ues79.png)
 - How to format and actually change the file: `npx prettier-eslint 'src/**/*.ts' --write`. Example: ![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmmjfkgj5kqcx1daq0v3.png)

4. Add additional settings on Prettier to follow ESLint

5. Create `.prettierrc.yaml` file. We choose YAML format so we can add comments. There is others format if you want to set differently: [Link](https://prettier.io/docs/en/configuration.html)

6. Set the settings' value on `.prettierrc.yaml`: ```semi: false # We don't need semicolons at the end of line
singleQuote: true # Use single quote```

5. Add additional settings too on `.vscode/settings.json`: `"editor.formatOnSave": true`
 - If you don't have this file, just create one.
 - This setting will tell VSCode to format the code on file save.

## Closing

That's all I can share with you for now 😊
If you have any question, you can post it here.
Or maybe you can reach me on my [Twitter](https://twitter.com/frasnym) 👋

Until then... 🚀