npm, ESLint & Prettier

Tiếp nối bài viết trước mình đã giới thiệu các bạn cách dùng ReactJs chỉ thuần Javascript. Tuy nhiên trong các dự án thực tế người ta không sử dụng cách làm việc đó để tạo nên một sản phẩm chất lượng dễ dàng maintain. Một trong những cái quan trọng hơn cả là làm việc nhóm được với nhiều người. Bạn thử tưởng rằng, trong một project mà mỗi ông thích code một phong cách thì sau một thời gian nó sẽ thành một một mớ hỗn độn :)

npm

npm là viết tắt của cụm từ Node Package Manager. Nó là một Package Manager cho Nodejs. Ngoài npm thì bạn cũng có thể sử dụng một công cụ khác là yarn. Bạn tưởng tượng rằng có rất nhiều người viết các thư viện open source và đẩy lên Node Registry, bạn có thể dùng npm để kéo các thư viện đó về project của mình. Không chỉ dừng lại ở đó npm cũng có thể sử dụng như một command line tools cũng rất ổn.

Để bắt đầu sử dụng npm bạn di chuyển tới thư mục gốc của project adopt-me và chạy lệnh npm init. Nếu bạn chưa cài đặt Node, bạn có thể tải bản mới nhất về cài. Khi chạy câu lệnh này thì bạn sẽ được hỏi một loạt các câu hỏi. nếu bạn không biết bạn có thể nhấn Enter. Sau này mình có thể chỉnh sửa lại sau trong file package.json

Chất lượng code

Để giảm thiểu các sai xót trong quá trình viết code cũng như format code. Mà quan trọng nhất là mình lười. Những việc này nên để máy kiểm tra cho mau lẹ :) Các bạn nên cài ESLinst và Prettier vào để kiểm tra code và format code một cách tự động.

Prettier

Prettier là một công cụ hữu dụng trong việc format code tự động. Nêú bạn sử dụng VSCode bạn có thể cài đặt trong phần extension như hình bên dưới

Tiếp đó bạn mở Preferences --> Settings và thêm đoạn mã bên dưới rồi save lại.

 "[javascript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

Ở đây mình thêm luôn cả một vài ngôn ngữ khác cho các bạn. Để yên tâm ngồi code mà không lo việc format code. Sau khi thêm đoạn code này bạn save lại và thử chỉnh sửa một file Javascript sau đó save lại sẽ thấy điều kỳ diệu.

Nếu bạn không dùng VSCode bạn có thể cài như sau npm install -g prettier. Sau đó bạn muốn format file nào thì bạn có thể chạy lệnh prettier script.js. Nếu muốn thự hiện thay đổi trên file đó luôn bạn có thể chạy lệnh prettier --write script.js.

Nếu muốn customize thì bạn tạo file .prettierrc tại thư mục gốc của project và chỉnh sửa thay đổi theo mong muốn. 

npm&Yarn scripts

Như đã nói bên trên, npm hay Yarn không chỉ dừng lại ở quản lý package cài đặt. Nó còn có thể dùng để cài đặt các script thay vì bạn phải nhớ câu lệnh rất dài

Bạn có thể mở file package.json và thêm đoạn code bên dưới:

"scripts": {
	"format": "prettier --write \"src/**/*.{js,jsx}\"",
},

Sau đó mở terminal lên và gõ npm format hoặc yarn format. Các file có đuôi .js hoặc .jsx trong thư mục code của bạn sẽ được format lại theo chuẩn. Đơn giản hơn nhiều phải không? 

ESLint

Nếu bạn muốn bắt buộc các người làm việc trong team mình phải tuân theo chuẩn mà bạn định nghĩa ra. Bạn có thể sử dụng ESLint để đưa ra cảnh báo code sai định dạng. Để sử dụng ESLint các bạn cần cài đặt thư viên vào môi trường dev của mình bằng lệnh npm install -D eslint eslint-config-prettier  

Tiếp đó bạn bạn thêm file .eslintrc.json thêm vào thư mục gốc của code với nội dung như sau:

{
  "extends": ["eslint:recommended", "prettier", "prettier/react"],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

sau đó bạn thêm dòng sau vào block script trong file package.json 

"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",

Wow! Bây giờ bạn sửa code một file js và chay yarn lint. Trên terminal sẽ đưa ra cảnh báo code cho bạn.

Tạm thời bạn bỏ qua nhé. Trong các bài sau mình sẽ sửa sao cho code chạy chuẩn không cần chỉnh :)

Github code tại branch lesson-2-npm-eslint-prettier

Bài viết này mình muốn truyền tải lại ý nghĩa của việc thống nhất phong cách code trong một team. Điều này rất quan trọng. Nó giúp bạn rèn luyện khả năng làm ra sản phẩm chất lượng cũng như việc trao đổi và review code giữa các thành viên trong team của bạn. Bài viết tiếp theo mình sẽ trình bày về một build tools đang được cộng đồng sử dụng nhiều hiện nay là Parcel.

Tổng hợp bài viết.

Bạn sẽ tìm thấy niềm vui khi giúp đỡ người khác bằng tất cả tấm lòng