DEV Community

Cover image for NodeJS Express Setup with Typescript, ESLint, Prettier
Vishal Jagamani
Vishal Jagamani

Posted on

3 1

NodeJS Express Setup with Typescript, ESLint, Prettier

After extensive research and hands-on work, I've refined the best approach to set up a new Node.js project with Express, TypeScript, ESLint, and Prettier. Follow these steps to quickly get started and have your project ready for development.

- Project Initialization: create a new Node.js project:

npm init -y
Enter fullscreen mode Exit fullscreen mode

- Install Dependencies: Install required packages:

npm install express cors dotenv
Enter fullscreen mode Exit fullscreen mode
npm install --save-dev typescript @types/node @types/express @types/cors ts-node
Enter fullscreen mode Exit fullscreen mode

- Configure TypeScript: create a tsconfig.json file:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
Enter fullscreen mode Exit fullscreen mode

- Update package.json scripts: Modify package.json to include:

{
  "type": "module",
  "scripts": {
    "start": "node dist/app.js",
    "build": "tsc",
    "dev": "ts-node-esm src/app.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
Enter fullscreen mode Exit fullscreen mode

- Install ESLint & Prettier:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
Enter fullscreen mode Exit fullscreen mode
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
Enter fullscreen mode Exit fullscreen mode

- Create eslint.config.mjs (updated ESLint configuration):

import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import prettier from 'eslint-plugin-prettier';
import globals from 'globals';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all,
});

export default [
    ...compat.extends('eslint:recommended', 'plugin:@typescript-eslint/recommended'),
    {
        plugins: {
            '@typescript-eslint': typescriptEslint,
            prettier,
        },
        languageOptions: {
            globals: {
                ...globals.node,
            },
            parser: tsParser,
            ecmaVersion: 'latest',
            sourceType: 'module',
        },
        rules: {
            semi: 'off',
            quotes: ['error', 'single', { allowTemplateLiterals: true }],
            '@typescript-eslint/no-explicit-any': 'off',
        },
    },
];
Enter fullscreen mode Exit fullscreen mode

- Configure Prettier:

  • Create .prettierrc file:
{
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "printWidth": 150,
  "pluginSearchDirs": false
}
Enter fullscreen mode Exit fullscreen mode
  • Create .pretterignore file:
**/.git
**/.svn
**/.hg
**/node_modules
Enter fullscreen mode Exit fullscreen mode

- Recommended folder structure:

/src
   /config       → Configuration files  
   /routes       → Micro routes  
   /controllers  → Controller functions for handling requests  
   /services     → Service files for business logic  
   /types        → TypeScript interfaces and type definitions  
   /utils        → Utility functions  
.env  
.eslintrc.json  
.prettierignore  
.prettierrc  
package-lock.json  
package.json  
tsconfig.json  
Enter fullscreen mode Exit fullscreen mode

- Additional useful packages

  • Helmet - Security middleware
npm install helmet
Enter fullscreen mode Exit fullscreen mode
  • Passport - Authentication middleware
npm install passport
Enter fullscreen mode Exit fullscreen mode
  • Winston - Logging
npm install winston
Enter fullscreen mode Exit fullscreen mode

This structured guide ensures an efficient setup for a clean, maintainable Node.js project. 🚀

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (1)

Collapse
 
eshimischi profile image
eshimischi

Use Biome github.com/biomejs/biome instead of Eslint/Prettier

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs