In this article, we are going to setup an express project with typescript, eslint, prettier and husky.
Setup typescript
Initialize the project
npm init
Install typescript dependencies
npm i -D typescript ts-node
Create tsconfig.json
npx tsc --init
Add command in package.json to build and start the project
{
"build": "tsc",
"start": "nodemon"
}
Use nodemon to start the project
// in nodemon.json file
{
"watch": ["src"],
"ext": ".ts",
"ignore": [],
"exec": "node --loader ts-node/esm ./src/index.ts"
}
Setup eslint
npx eslint --init
Choose answers to the questions and eslint config will be generate.
In package.json file, add command for linting
{
"scripts": {
"lint": "eslint --ext .ts src/**/*.ts"
}
}
Setup prettier
npm i -D prettier eslint-config-prettier
Create .prettierrc.js file for config
module.exports = {
printWidth: 80,
semi: true,
singleQuote: true,
tabWidth: 2,
useTabs: false,
};
In eslint config, extend the plugin with prettier
Add following command in scripts of package.json
{
"scripts": {
"format": "prettier --write src/**/*.ts"
}
}
Setup husky for formatting
npm i -D pretty-quick
pretty-quick will format our code before committing.
Initialize husky
npx husky-init && npm install
This will generate a pre-commit hook, in which npm test command is present. We can change this command as our requirement. In this case, we change it to be npm run format-quick
In package.json, we have to add command for pretty-quick formatting.
"scripts": {
"format-quick": "pretty-quick --staged"
}
Create server
Create a file in src/index.ts
import express, { Application, Request, Response, NextFunction } from 'express';
const app: Application = express();
const port = 5000;
app.use('/', (req: Request, res: Response, next: NextFunction) => {
res.status(200).send({ data: 'Hello World!' });
});
// Start server
app.listen(port, () => console.log(`Server is listening on port ${port}!`));
Now, we can start building our project from here.