Sử dụng Prettier kết hợp với ESlint

Chào mọi người,

Với các bạn developer sử dụng Javascript thường xuyên như mình - 1 Frontend Dev thì chắc hẳn ESLint là 1 trong số các code analysis tools rất phổ biến và được sử dụng rộng rãi trong việc tối ưu code styles và giữ source code của bạn clean và giữ chúng trong phạm vi của bạn với các rules bạn có thể toàn quyền customize. Tiếp theo, chúng ta có thêm 1 tool nữa cũng giúp bạn tự động format code đó là Prettier dưới 1 số config bạn setup sẵn.

Các bạn có thể tìm hiểu sơ qua 2 công cụ và cách cài đặt nó ở các bài viết hay phía dưới trước khi tiếp tục với mình nhé.

• Sử dụng Prettier để format code
• Hãy sử dụng ESLint cho dự án của bạn!

Tóm lại :

Sau khi cài đặt xong 2 tools trên chúng ta có Prettier giúp ta phần code formarting, ESLint quản lí việc coding styles. Bạn có thể config prettier để format code tự động khi lưu file và chúng ta sẽ không còn cần để ý tới code format nữa, hãy để prettier thực hiện điều đó. Mặt khác ESlint không giống Prettier, nó không tự động fix code styles, nó chỉ warning chúng ta về các coding styles ví dụ bạn import 1 object hay component gì đó từ file khác mà bạn không sử dụng, đặt tên biến sai rules. ESLint có đặc tính "highly configurable" - tuỳ biến cao, bởi vì nó không đi kèm theo các pre-configured rules như Prettier - "highly opinionated". Sau khi cài đặt ESLint thì bạn có thể tự mình config các rules hoặc sử dụng 1 số pre-configured phổ biến như Airbnb style guide,... và bớt thêm một nỗi lo lắng lúc coding