Đặt vấn đề

Trong dự án có nhiều người tham gia , bạn thấy code của người khác nhìn rất ngứa mắt 👊👊. Nào là code không chịu format cho dễ đọc,nào là đặt tên biến lúc thì camelCase, lúc thì snake, bla bla ... Ừm mình cũng như vậy 😙. Nếu mình mà có chút quyền lực trong tay là mình dí đầu mấy ông code xấu ngay, nhưng tiếc là mình chỉ là cu ly, không thích nâng bi ai nhưng cũng không muốn mất lòng ai. Zậy phải làm sao để việc code đúng chuẩn, chuẩn ở đây là về cách format code , cách đặt tên, hoặc trong một vài trường hợp ví dụ viết switch-case phải có default, viết hàm phải có return, phải khai báo biến trước khi sử dụng, không đặt trùng tên biến kể cả khác scope ,...

Tốt nhất để editor gợi ý và tự động hóa 😉😉. Chẳng biết có tạo được ra value gì từ sản phẩm của mình không nhưng code cho "đẹp" để anh em đỡ lôi tên ra chửi đã. Đúng không ạ 🙂. Rồi mấy cái này thì mình thấy ai cũng nên biết không cứ gì phải mấy ông lead tay to mới làm đâu. Mình làm frontEnd và code javascript là chủ yếu, bài viết này mình trình bày cái tool dùng với javascript nha, ngôn ngữ khác chắc chắn cũng có thôi 👌👌

Giải pháp

Prettier

• Prettier là gì: Ngay cái tên dịch ra đã là "xinh hơn" 🤣🤣. Thằng này là tool để format code html , css , js , markdown , ... di dỉ gì gì cái gì cũng chơi. Anh em dùng vscode thì chắc đến 99,69% đều cài .

• Cài đặt như nào: Cái extension ở editor là khác nha, mình đang nói đến thư viện.

npm install --save-dev prettier

cài dưới dạng dev dependencies thôi vì chỉ dùng để format code hoy lúc runtime không có dùng. Rồi cài xong thì tạo một file .prettierrrc.json để cấu hình và một file .prettierignore để liệt kê những file không cần format. Cấu hình như nào, có những options nào thì các bẹn lên doc đọc nha https://prettier.io/docs/en/options.html File ignore thì mặc định đã ignore các file .git , .svn , .hg và node_modules/ . Hoặc mình có thể ignore trực tiếp trong code

• Chạy prettier như nào:

1. Chạy bằng command:

// check xem còn những file nào chưa format trong path chỉ định
// ở đây dùng '.' nghĩa là check ở con trỏ thư mục hiện tại
npx prettier check .         

// chạy format code 
npx prettier write .

2. Chạy trong editor: Để có thể chạy format mỗi khi ấn phím tắt trong editor thì mình cài thêm extension. Bản thân extension này cũng có file config mặc định của nó roy nhưng nếu trong project có file config thì extension sẽ đọc và format theo file config đó. Ví dụ với Vscode các bạn ấn Ctrl + Shift + P rồi search Format Document chọn format with Prettier , nhớ bind cho nó một cái key nha. Có thể check editor có chạy theo file config không bằng cách ấn phím tắt rồi check tab output
   editor format code theo file config

Eslint

• Eslint là gì : Eslint là một tool để cải thiện chất lượng code, nó có hai categories of rule là Formatting và Code-quality. Nhiều ae sẽ bảo thể cái formatting này có conflix với prettier hông. Câu trả lời là có 🙃, nhưng túm váy lại thì phần format của eslint không thể sánh được với prettier nên người ta thường dùng kết hợp cả hai thằng này với nhau ( https://github.com/prettier/prettier-eslint/issues/101 ) Và dĩ nhiên vì có conflix nên phải resolve nó lát sẽ nói ở phần cài đặt. Vậy nên nói đến eslint hãy coi nó là một code-quality tool

• Cài đặt Eslint như thế nào : Sử dụng tool này cho đơn giản nha anh em , chỉ cần chọn cho đến lúc hoàn thiện thôi 🥰

npm init @eslint/config

Sau khi fill đầy đủ các option thì các thư viện cần thiết sẽ được add vào dự án và thấy xuất hiện một file .eslintrc.( js | json | yaml ) tùy vào lựa chọn của các bạn .

Phần extends và rules là mình đã chỉnh sửa rồi và cũng là hai phần anh em cần để ý nhất. Đại loại

• Extends : chỉ ra cấu hình dự án được kế thừa từ thằng nào , standard-with-typescript , prettier là các thư viện được cài thêm. Thằng xuất hiện phía sau thì override thằng đằng trước. Nhớ ở trên mình nói phải resolve conflix giữa prettier và eslint không, chỗ này sẽ ghi đè những rule format code của eslint bằng prettier.

• Rules : Mỗi rule sẽ có 3 cấp độ là "off" , "warning" , "error" hoặc 0 , 1 , 2 . Có quá trời rule anh em tham khảo ở đây : https://eslint.org/docs/latest/rules/ nhưng phần lớn thì chúng ta chỉ cần extend những rule được recomend trong phần extends ở trên là ok rồi, cái nào cần override thì mới ghi đè ở rules ( comment rule trong file có độ ưu tiên cao nhất rồi đến ở field rules trong file cấu hình rồi mới đến extends nha )

• Chạy Eslint như thế nào

1. Chạy bằng cmd :

npx eslint <path to run > --option

Anh em thao khảo các option ở đây nha https://eslint.org/docs/latest/use/command-line-interface

2. Tích hợp vào editor: với những rule có thể fixable ( những rule thuộc dạng format code ) thì có thể dùng editor để chạy format . Với Vscode anh em Ctrl + shift + P search lint rồi gán cho nó một shortcut để chạy format lint nhé

Typescript-eslint

Bây giờ anh em mà start từ đầu chắc đều muốn code bằng typescript , eslint thì chỉ support javascript. Ngày trước có thằng tslint nhưng đã ngưng support anh em không nên dùng mà hãy chuyển qua typescript-eslint https://typescript-eslint.io/ . Thực ra trong phần cài đặt eslint bằng init ở trên nếu chọn option ngôn ngữ là typescript thì anh em cũng thấy typescript-eslint được cài vào dự án rồi đó.

Editor config

• Editor config là gì : anh em code thường dùng editor như Vscode , Webstorm , SublineText ,... mỗi thằng đó lại có cấu hình mặc định sẵn ví dụ khi code thì dùng tab hay space , độ rộng tab/space là bao nhiêu , encoding là gì ,... Giả sử prettier anh để sử dụng tab , độ rộng 4 nhưng cài đặt mặc định của editor là dùng Space và indent là 2 thì cứ code xong rồi ấn format ta sẽ thấy code " nhảy nhảy " 😆. Lúc này cần đến editor config
• Cài đặt thế nào : khi trong thư mục gốc có file .editorconfig thì editor sẽ ưu tiên đọc file này và format theo. Nội dung file ntn anh em đọc ở đây nhe https://editorconfig.org/

Git hook

• Git hook là gì: khi làm việc với git chúng ta có thể trigger một số script ứng với các hành động cụ thể trong git follow, ví dụ ở đây tôi muốn trước khi commit vào repo thì chạy format code, lint check cho những ông nào code nhưng éo chịu format 🙂 . Việc này giúp tránh những lỗi conflix ngáo ộp
• Cài đặt như thế nào : Anh em tham thảo ở đây nhé https://prettier.io/docs/en/precommit.html
• Lưu ý : Giả sử bạn chưa format mà commit , thì khi trước khi commit git hook sẽ chạy, nó vẫn sẽ tạo ra commit của bạn và format lại những file chưa được format ==> commit --amend cho những file đó nha

Kết luận

Mấy cái này không hề màu mè hoa lá cành đâu nha. Mình thấy rất nhiều team code mà toàn conflix do format code thôi. Hy vọng bài viết giúp được gì đó cho anh em 😘😘