Md Enayetur RahmanHow to set up eslint and prettier
The purpose of this blog is to show how to setup eslint in a typescript project. Eslint will help you automatically detect and fix various types of errors in a project. So you development experience will be smooth.
- Start a project
npm init -y
- Install necessary packages. Here some packages installed as dev dependency to smooth the development experience. e.g. typescript, nodemon ts-node-dev.
npm i express --save
npm i typescript --save-dev
npm i mongoose --save
npm i cors dotenv
npm i -D nodemon
npm i ts-node-dev --save-dev // This will convert ts file to js.
- Folder structure should be as follows initially. There will be another blog that will detail the file and folder structure.
root -> src -> app.ts, server.ts
root -> src -> config -> index.ts
root -> dist
root -> .env, .gitignore, eslint.config.mjs
- Create types and typescript config file
tsc --init
npm i --save-dev @types/node
npm i --save-dev @types/express
- Modify the typescript config file for the following fields.
// tsconfig.json file
"target": "es2016"
"module": "commonjs"
"rootDir": "./src"
"outDir": "./dist"
- Install eslint and type definition
npm i --save-dev eslint @eslint/js typescript typescript-eslint
- Update the eslint.config.mjs file as follows
// eslint.config.mjs
import eslint from "@eslint/js"
import tseslint from "@typescript-eslint"
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
{
languageOptions: {
globals: {
...globals.node,
}
}
},
{
rules: {
"no-unused-vars": "error",
"no-undef": "error",
"prefer-const" : "error",
"no-console": "warn",
}
},
{
ignores: ["**/dist/", "**/node_modules/"]
}
)
You can browse following link for more rules.
https://eslint.org/docs/latest/rules/You can refer eslint doc from the following link
https://eslint.org/docs/latest/Install prettier
npm install --save-dev prettier
- Modify package.json file for script
// package.json file
"main": "./dist/server.js"
"scripts":{
"build": "tsc", // This will build the file that will be helpful for before deploying to production
"start:prod":"node ./dist/server.js", //For production this script will run the project.
"start:dev": "ts-node-dev --respawn --transpile-only ./src/server.ts", // For development this script will run the project.
"lint":"npm eslint .", // It will find out errors in all the files.
"lint:fix":"npx eslint src --fix", // It will be used for fixing the errors.
"prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
"prettier:fix": "npx prettier --write src",
}
- Sample app.ts file will be as follows
// app.ts file
import express, { Request, Response } from "express";
const app = express();
//parsers
app.use(express.json());
app.get("/", (req: Request, res: Response) => {
res.send("Hello from setup file");
});
export default app;
- Sample server.ts file will be as follows
// server.ts file
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();
- Sample index.ts file will be as follows
// index.ts file
import dotenv from "dotenv";
dotenv.config();
export default {
port: process.env.PORT,
db_url: process.env.DB_URL,
};
- Sample .env file will be as follows
PORT=5000
DB_URL=your mongodb connection
- Sample .gitignore file will be as follows
node_modules
.env
- You can use following command to run each script
npm run build // Do to it before deployment
npm run start:prod // For starting server at production.
npm run start:dev // For starting server at development.
npm run lint // For finding eslint error
npn run lint:fix // For fixing eslint error
npm run prettier // For finding format error
npm run prettier:fix // For fixing prettier error
