Setup dự án Nodejs(ExpressJS) với Typescript, ESLint, Prettier

Dưới đây là bộ trình setup một dự án Nodejs sử dụng ExpressJS để viết Refull API sử dụng Typescript đồng thời cũng sử dụng 2 công cụ ESLint, Prettier để giúp bạn viết code chính xác hơn, nếu bạn chưa biết về những công cụ này thì có thể tim hiểu trên mạng nhé dưới đây chỉ là trình tự thiết lập mình note lại để ghi nhớ.

Mục lục

1. Khởi tạo dự án Node
2. Cài đặt Typescript
3. Cài các module cần thiết
4. Thiết lập Eslint
5. Cài Prettier
6. Thêm script

Khởi tạo dự án Node

Để khởi tạo được file package.json thì đầu tiên anh em chạy dòng lệnh

npm init

Sau đó trả lời các câu hỏi hoặc để mặc định bằng cách bấm enter xuống dòng cũng được, lúc này thư mục dự án sẽ tạo ra một file package.json như sau:

{
  "name": "nodetypescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  },
  "author": "cheng",
  "license": "ISC",
}

Cài đặt Typescript

Vì dự án chúng ta sử dụng Typescript nên bước tiếp theo là phải cài typescipt vào dự án bằng dòng lệnh:

npm i -D typescript

Sau đó bạn có thể tạo thủ công file tsconfig.json sau đó điền các thiết lập typescipt cho dự án tuy nhiên để nhanh và chính xác anh em chạy dòng lệnh sau để tạo tự động file này.

npx tsconfig.json

Lúc này dự án sẽ sinh ra một file tsconfig.json có nội dung như sau:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["dom", "es6", "es2017", "esnext.asynciterable"],
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": ["node_modules"],
  "include": ["./src/**/*.ts"]
}

Đây là các rule mà typescipt sẽ hoạt động ở dự án của bạn, ở đây có 2 config quan trọng cần ghi nhớ là:

• outDir: Đó là thư mục mà typescipt biên dịch mã nguồn của bạn sang javascript mỗi khi có sự thay đổi.
• rootDir: Đây là thư mục chứa các tập tin typecript
• include: là thư mục mà typescript sẽ biên dạng sang javascript, ngoài những thư mục này thì nó sẽ không biên dịch.

Cài các module cần thiết

Bước tiếp theo anh em tiến hành chạy các module cần thiết để có thể build dự án với expressjs như: cors, dotenv, nodemon...:

npm i express dotenv cors

Cũng như cái module khai báo @types như:

npm i -D @types/node typescript @types/express nodemon @types/cors

Thiết lập Eslint

Chạy dòng lệnh sau để cài toàn bộ các gói liên quan đến eslint:

npm i eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier -D

Sau khi cài xong bạn tạo trong thư mục gốc dự án file .eslintrc.json để config một số rule với nội dung như sau:

{
    "parser": "@typescript-eslint/parser",
    "extends": ["plugin:@typescript-eslint/recommended","plugin:prettier/recommended"],
    "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" },
    "plugins": ["@typescript-eslint"],
    "rules": {
      "prettier/prettier": "error",
      "@typescript-eslint/indent": ["error", 2],
      "@typescript-eslint/no-unused-vars": "error",
      "@typescript-eslint/no-explicit-any": "off"
    }
  }

Cài Prettier

Chạy dòng lệnh sau để cài toàn bộ các gói liên quan đến Prettier:

npm i prettier -D

Sau đó bạn tạo file .prettierrc tạo thư mục gốc và thêm vào nội dung sau:

{
    "semi": true,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2,
    "endOfLine":"auto"
}

Thêm script

Vậy là xong, bây giờ bạn tiến hành thêm cái scripts để run dự án nodejs, chèn đoạn scripts sau vào file package.json:

 "scripts": {
    "dev": "nodemon dist/index.js",
    "watch": "tsc -w",
    "lint": "eslint src/**/*.ts",
    "format": "eslint src/**/*.ts --fix"
  }

Và toàn bộ nội dung file package.json bây giờ sẽ là:

{
  "name": "nodetypescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon dist/index.js",
    "watch": "tsc -w",
    "lint": "eslint src/**/*.ts",
    "format": "eslint src/**/*.ts --fix"
  },
  "author": "cheng",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "http-status": "^1.5.0",
    "mongoose": "^6.0.13"
  },
  "devDependencies": {
    "@types/cors": "^2.8.12",
    "@types/express": "^4.17.13",
    "@types/node": "^16.11.7",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "eslint": "^8.2.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "nodemon": "^2.0.15",
    "prettier": "^2.4.1",
    "typescript": "^4.5.2"
  }
}