Prettier là một công cụ để format code tự động. Nó cho phép thống nhất phong cách code chung của cả nhóm để có thể cho ra những đoạn code đẹp, ngay hàng thẳng lối và dễ đọc hơn.
Eslint là công cụ giúp chúng ta phân tích code, từ đó đưa ra các vấn đề mà code đang gặp phải như không tuân thủ coding style, sai coding convention. Ngoài ra, eslint còn có thể giúp chúng ta tìm ra một số bug tiềm ẩn trong code như gán biến chưa khai báo, có thể gây lỗi runtime hoặc lấy giá trị từ một biến toàn cục khiến cho việc debug trở nên khó khăn, v.v...
Tương tự Linter, mục đích của .editorconfig là tăng tính nhất quán (consistency) cho code. Nói cách khác, source code phải thống nhất theo một số quy tắc nhất định, khi clone về các máy tính khác nhau, dùng các IDE, text editor khác nhau thì sẽ luôn giống nhau.
Vào tab Extension của VSCode gõ @recommended và install tất cả wordspace recommended extensions cần thiết cho VSCode IDE devs. Nếu dùng Webstorm thì tất cả đã có sẵn
Các scripts cần thiết
eslint: Check eslint (Ko tự động fix code), script này để chạy trong CI
eslint:fix: Check và fix code, script này để chạy local, format cho đúng chuẩn
prettier: Check prettier (Ko tự động fix code), script này để chạy trong CI
prettier:fix: Check và fix code, script này để chạy local, format cho đúng chuẩn
Config VSCode IDE auto save, auto fix prettier & eslint onsave
Tạo project với Create React App + Typescript
Docs: https://create-react-app.dev/docs/adding-typescript
Config Prettier + Eslint + VSCode extensions Tham khảo https://github.com/d2-hungnp-training/covid-tracker
Prettier là một công cụ để format code tự động. Nó cho phép thống nhất phong cách code chung của cả nhóm để có thể cho ra những đoạn code đẹp, ngay hàng thẳng lối và dễ đọc hơn.
Eslint là công cụ giúp chúng ta phân tích code, từ đó đưa ra các vấn đề mà code đang gặp phải như không tuân thủ coding style, sai coding convention. Ngoài ra, eslint còn có thể giúp chúng ta tìm ra một số bug tiềm ẩn trong code như gán biến chưa khai báo, có thể gây lỗi runtime hoặc lấy giá trị từ một biến toàn cục khiến cho việc debug trở nên khó khăn, v.v...
Tương tự Linter, mục đích của .editorconfig là tăng tính nhất quán (consistency) cho code. Nói cách khác, source code phải thống nhất theo một số quy tắc nhất định, khi clone về các máy tính khác nhau, dùng các IDE, text editor khác nhau thì sẽ luôn giống nhau.
Vào tab Extension của VSCode gõ @recommended và install tất cả wordspace recommended extensions cần thiết cho VSCode IDE devs. Nếu dùng Webstorm thì tất cả đã có sẵn
Các scripts cần thiết
eslint: Check eslint (Ko tự động fix code), script này để chạy trong CIeslint:fix: Check và fix code, script này để chạy local, format cho đúng chuẩnprettier: Check prettier (Ko tự động fix code), script này để chạy trong CIprettier:fix: Check và fix code, script này để chạy local, format cho đúng chuẩnConfig VSCode IDE auto save, auto fix prettier & eslint onsave