Tiếp tục công việc đang dang dở ở phần 2, trong phần 3 này chúng ta sẽ làm phần Footer ở Guest Home Page này, kèm theo đó chúng ta sẽ apply các tool như ESLint và Prettier vào project của chúng ta nhé.
I. Apply normalize.css, ESLint và Prettier.
1. Apply normalize.css.
Chúng ta đã install normalize.css
trước đó rồi, nên giờ chúng ta chỉ việc import
nó vào nữa thôi là được. Chúng ta sẽ import
nó vào trong file index.js
như đường dẫn sau:
Trong src/index.js
: import 'normalize.css';
2. Apply ESLint và Prettier.
Trước tiên nếu các bạn chưa cài các extension ESLint và Prettier trên Visual studio code của mình thì các bạn cài 2 cái đó trước nhé, mình sẽ để hình bên dưới.
Tiếp theo là setting cho workspace của chúng ta. Mặc định nếu ta không setting ở workspace thì VS code sẽ apply setting ở user cho chúng ta luôn. Chúng ta sẽ dùng file Json để setting cho nhanh nhé 😉.
Tạo file theo đường dẫn sau ở folder chính: .vscode/settings.json
Note:
"editor.defaultFormatter"
: Chúng ta sẽ chọn default formatter là Prettier (bạn có thể sửa lại formatter khác cũng được nhé)."editor.formatOnSave"
: set bằngtrue
để khi ta save thì nó sẽ tự động format code của chúng ta theo Prettier mà ta đã define ở trên (Nếu không thích thì set thànhfalse
nhé)."source.fixAll.eslint"
: set bằngtrue
, tức là khi save thì ESLint sẽ auto format code và fix các lỗi liên quan đến convention luôn cho chúng ta (Nếu không thích thì set thànhfalse
).
Tiếp theo, các bạn cài cho mình thêm 1 extension nữa như hình bên dưới.
Sau đó, ta tạo file .editorconfig
trong folder chính của project của mình nhé, sau đó thêm đoạn setting bên dưới.
Note: EditorConfig có tác dụng là thống nhất các chuẩn format giữa các editor khác nhau. EditorConfig giúp code chúng ta có tính thống nhất, dễ đọc và bảo trì. Khi cài extension trên thì nó sẽ tự apply file .editorconfig
mà ta đã tạo.
(Các bạn có thể đọc thêm docs của các extension để hiểu rõ hơn nhé).
Các bạn cài thêm package này: npm i prettier eslint-config-prettier eslint-plugin-prettier -D
. Nó có tác dụng tắt các rule không cần thiết hoặc dễ xung đột với Prettier.
Trong phần scripts
của file package.json
ta thêm đoạn scripts như sau:
Đoạn script trên dùng cho cả Typescript và Javascript nên nếu bạn không thích thì có thể bỏ những phần liên quan đến .ts
hay .tsx
đi nhé.
Tại sao lại thêm đoạn scripts trên? Okie với đoạn scripts trên ta chỉ cần gõ lệnh npm run lint
thì ESLint sẽ auto scan toàn bộ project của chúng ta để thìm các lỗi, sau đó ta chỉ cần gõ npm run lint:fix
thì nó sẽ auto fix toàn bộ file nào lỗi mà nó scan được trong project của chúng ta. Tương tự với ông thần Prettier.
Tiếp theo tạo thêm file .prettierrc
ở folder chính của project để set các rules cho thằng Prettier
Tạo thêm file .prettierignore
nó tương tự như thằng .gitignore
nhưng cái này dành cho Prettier, để tránh format các file không cần thiết.
Ta tạo thêm file .eslintrc
để cấu hình thêm cho thằng ESLint.
Cuối cùng ta thêm file .eslintignore
cho ESlint biết không cần bắt lỗi với những file được khai báo trong này.
II. Implement Footer UI.
Trong folder src ta tạo thêm folder containers và pages, trong folder containers tạo thêm file storyContainer.jsx
, folder pages tạo thêm file home.jsx
. Tiếp theo, trong folder components ta thêm file index.jsx
.
Tại sao ta lại thêm file này? Thì file này nhằm mục đích là sẽ dùng để gọm các component của chúng ta vào 1 nơi để quản lý, khi nào cần sử dụng thì ta sẽ import
theo dạng Alias thì sẽ gọn gàng và dễ quản lý hơn.
- Trong
/components/index.jsx
:
- Trong
/containers/storyContainer.jsx
ta copy từApp.js
và edit lại như sau:
Note: Chú ý kiểu import
của component Story nhé😉.
- Trong file
App.js
ta edit lại như sau:
Giờ mới thực sự implement phần Footer nè hehe 😁, ta tạo component Footer như hình:
- Trong file
footer.jsx
, ta thêm đoạn code sau:
- Trong
/footer/index.jsx
ta thêm đoạn code như sau:
Okie! tiếp theo chúng ta sẽ implement Footer, trong folder containers ta tạo thêm file footerContainer.jsx
, trong file này chúng ta sẽ code như sau:
Okie! Đã xong, chúng ta chạy thử xem thế nào nhé.
Vậy là đã xong phần Footer hehe 😁.
III. Tổng kết.
Okie! bài hôm nay hơi dài, nên mình sẽ tạm kết thúc tại đây, hy vọng bài này sẽ giúp ích cho các bạn thêm về code cũng như làm quen với những tool checking code cũng như convention khi code, giúp chúng ta bớt "gà" hơn, code của chúng ta được gọn gàng và đẹp hơn hehe 😁. Những tool này khi đi làm chắc chắn sẽ có và người ta sẽ bắt rất là kỹ do đó các bạn tập làm quen và tìm hiểu nó nhé 😉. See u again!
TỪ QUỐC HƯNG
Đam mêm lập trình Frontend, Yêu thích việc setup workspace theo phong cách tối giản
follow me :
Bài viết liên quan
NodeJS là gì? Tại sao NodeJS lại phổ biến
Jul 09, 2024 • 8 min read
Event Loop là gì? Cơ chế hoạt động của Event Loop trong JavaScript
Jun 18, 2024 • 7 min read
So sánh Golang và NodeJS chi tiết
Oct 14, 2023 • 22 min read
Home Feed UI Instagram with TailwindCSS: Giới thiệu về series
Nov 28, 2022 • 2 min read
ReactJS Tutorial for Beginners Phần 2
Dec 12, 2021 • 3 min read
ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?
Dec 12, 2021 • 14 min read