TypeScript Linting and Code Formatter

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

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
2. Prettier

Setup Lint 🚨

1. Install ESLint package: npm i -D eslint

   • This is the main package. This package support not only JavaScript but TypeScript as well.

2. Install TypeScript 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:

4. Initialize ESLint: npx eslint --init

   • Now initialize the ESLint configuration. You can copy my settings below for TypeScript support. Example
   • Try it Out! 🚀
   • How to make ESLint catch error on code that we write: npx eslint src/*.ts. Example
   • How to fix the error: npx eslint src/*.ts --fix. Example:

Setup Code Formatter 🎨

1. We will use Prettier 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:
   • How to format and actually change the file: npx prettier-eslint 'src/**/*.ts' --write. Example:

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

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
   

7. 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 👋

Until then... 🚀