## How to Set Up ESLint and Prettier in a TypeScript Project
Tags: webdev, typescript, eslint, prettier
Published: 2024-06-28 02:21:50

Setting up ESLint and Prettier in a TypeScript project can greatly enhance your development experience by automatically detecting and fixing various types of errors, ensuring a consistent code style, and reducing the likelihood of bugs. Here's a step-by-step guide to help you get started.

### Step 1: Initialize Your Project

First, create a new project directory and initialize it with npm:

```bash
mkdir my-project
cd my-project
npm init -y
```

### Step 2: Install Necessary Packages

Install the required dependencies. Some of these will be development dependencies (i.e., they are only needed during development):

```bash
npm install express mongoose cors dotenv --save
npm install typescript @types/node @types/express --save-dev
npm install -D nodemon ts-node-dev eslint @eslint/js @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier
```

### Step 3: Set Up Your Project Structure

Create the following folder structure:

```
my-project
│   .env
│   .gitignore
│   eslint.config.mjs
│   tsconfig.json
├───dist
├───src
│   │   app.ts
│   │   server.ts
│   └───config
│           index.ts
```

### Step 4: Configure TypeScript

Generate a TypeScript configuration file and modify it:

```bash
tsc --init
```

Update the `tsconfig.json` file with the following content:

```json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}
```

### Step 5: Configure ESLint

Create an ESLint configuration file `eslint.config.mjs` and add the following content:

```javascript
import eslint from "@eslint/js";
import tseslint from "@typescript-eslint/eslint-plugin";

export default {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    "no-unused-vars": "error",
    "no-undef": "error",
    "prefer-const": "error",
    "no-console": "warn"
  },
  ignorePatterns: ["dist", "node_modules"]
};
```

### Step 6: Set Up Prettier

Install Prettier:

```bash
npm install --save-dev prettier
```

Create a Prettier configuration file `.prettierrc` (optional, but recommended for customization):

```json
{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true
}
```

### Step 7: Update `package.json` Scripts

Add scripts to your `package.json` to automate tasks:

```json
"main": "./dist/server.js",
"scripts": {
  "build": "tsc",
  "start:prod": "node ./dist/server.js",
  "start:dev": "ts-node-dev --respawn --transpile-only ./src/server.ts",
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
  "prettier:fix": "prettier --write src"
}
```

### Step 8: Sample Files

**app.ts**

```typescript
import express, { Request, Response } from 'express';

const app = express();

app.use(express.json());

app.get('/', (req: Request, res: Response) => {
  res.send('Hello from setup file');
});

export default app;
```

**server.ts**

```typescript
import mongoose from 'mongoose';
import app from './app';
import config from './config';

async function main() {
  try {
    await mongoose.connect(config.db_url as string);
    app.listen(config.port, () => {
      console.log(`Example app listening on port ${config.port}`);
    });
  } catch (err) {
    console.log(err);
  }
}

main();
```

**index.ts**

```typescript
import dotenv from 'dotenv';
dotenv.config();

export default {
  port: process.env.PORT,
  db_url: process.env.DB_URL,
};
```

**.env**

```
PORT=5000
DB_URL=your_mongodb_connection_string
```

**.gitignore**

```
node_modules
.env
dist
```

### Step 9: Running Your Scripts

Use the following commands to run your scripts:

```bash
npm run build           # Build the project before deployment
npm run start:prod      # Start the server for production
npm run start:dev       # Start the server for development
npm run lint            # Find ESLint errors
npm run lint:fix        # Fix ESLint errors
npm run prettier        # Find Prettier format errors
npm run prettier:fix    # Fix Prettier format errors
```

By following these steps, you will have a fully set up TypeScript project with ESLint and Prettier, ensuring a smooth development experience with consistent code quality and style.