Setup express with typescript, eslint, prettier and husky

Mar 03 2022 (2 min read)

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}!`));