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.
Setup Lint 🚨
-
Install ESLint package:
npm i -D eslint
- This is the main package. This package support not only JavaScript but TypeScript as well.
-
Install TypeScript package:
npm i -D typescript
- This is a package that we will use to work with TypeScript.
-
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:
- We can initialize typescript with this command. This command will be make a file that called
-
Initialize ESLint:
npx eslint --init
Setup Code Formatter 🎨
We will use Prettier to help us here
Install the required package:
npm i -D prettier-eslint
-
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:
Add additional settings on Prettier to follow ESLint
Create
.prettierrc.yaml
file. We choose YAML format so we can add comments. There is others format if you want to set differently: LinkSet the settings' value on
.prettierrc.yaml
:
semi: false # We don't need semicolons at the end of line
singleQuote: true # Use single quote
-
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... 🚀
Top comments (0)