TheLazy.Dev
Portfolio GitHub

Blog

typescript |mongoose |eslint |prettier

Setup Eslint Prettier in a TypeScript project with mongoose ODM

rashedul_islam_rajj

Rashedul Islam Rajj

Posted on November 17, 2024

Setup Eslint Prettier in a TypeScript project with mongoose ODM

#Step 1 : Initialize the project

mkdir my-project
cd my-project
npm init -y
Enter fullscreen mode Exit fullscreen mode

#Step 2 : Install necessary packages

npm install express mongoose cors dotenv --save
npm install typescript @types/node @types/express@4.17.21 --save-dev
npm install -D nodemon ts-node-dev eslint @eslint/js @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier prettier
Enter fullscreen mode Exit fullscreen mode

#Step 3 : Create a folder structure

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

#Step 4 : Initialize typescript

tsc --init
Enter fullscreen mode Exit fullscreen mode

#Step 5 : Configure TypeScript

Modify tsconfig.json with this following settings

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

#Step 6 : Initialize eslint configuration

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

Answer following questions like this

How would you like to use ESLint? 
--> To check syntax and find problems
What type of modules does your project use? 
-->JavaScript modules (import/export) //(you can require syntax by selecting commonjs) 
 Which framework does your project use?
--> None of these
Does your project use TypeScript? 
--> yes
Where does your code run?
--> node
Would you like to install them now?
--> yes
Which package manager do you want to use?
--> npm //(you can choose pnpm or yarn)
Enter fullscreen mode Exit fullscreen mode

#Step 7 : Configure the eslint.config.mjs file

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

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 [
  {
    ignores: ['**/node_modules', '**/dist'],
  },
  ...compat.extends(
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ),
  {
    plugins: {
      '@typescript-eslint': typescriptEslint,
    },

    languageOptions: {
      globals: {
        ...globals.node,
        process: 'readonly',
      },

      parser: tsParser,
      ecmaVersion: 'latest',
      sourceType: 'module',
    },

    rules: {
      'no-unused-vars': 'off',
      'prefer-const': 'warn',
      'no-console': 'off',
      'no-undef': 'error',
      semi: ['warn', 'always'],
      '@typescript-eslint/no-empty-object-type': 'off',
      '@typescript-eslint/no-unused-vars': 'off',
      '@typescript-eslint/no-unused-expressions': [
        'warn',
        {
          allowShortCircuit: true,
          allowTernary: true,
          allowTaggedTemplates: true,
        },
      ],
    },
  },
];
Enter fullscreen mode Exit fullscreen mode

#Step 8 : Setup Prettier

npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode

#Step 9 : Create .prettierrc file for better customization (optional)

Create .prettierrc configuration file and apply following settings

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true
}
Enter fullscreen mode Exit fullscreen mode

#Step 10 : Add scripts to package.json file

"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"
}
Enter fullscreen mode Exit fullscreen mode

# Sample Files

app.ts 

import express, {Application, Request, Response } from 'express';

const app : Application = express();

app.use(express.json());

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

export default app;
Enter fullscreen mode Exit fullscreen mode

server.ts 

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();
Enter fullscreen mode Exit fullscreen mode

index.ts 

import dotenv from 'dotenv';
import path from 'path';

dotenv.config(
    {
        path : path.join(process.cwd(), ".env")
    }
);

export default {
  port: process.env.PORT,
  db_url: process.env.DB_URL,
};
Enter fullscreen mode Exit fullscreen mode

.env 

PORT=5000
DB_URL=your_mongodb_connection_string
Enter fullscreen mode Exit fullscreen mode

.gitignore 

node_modules
.env
dist
Enter fullscreen mode Exit fullscreen mode

# Step 11 : Run Scripts

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
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
rashedul_islam_rajj
Rashedul Islam Rajj

Posted on November 17, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Setup Eslint Prettier in a TypeScript project with mongoose ODM
typescript Setup Eslint Prettier in a TypeScript project with mongoose ODM

November 17, 2024