Tự động định dạng html vscode

Thì khi sử dụng EMMET, ta chỉ cần nhập dòng lệnh sau trong mã và nhập “Tab” là sẽ tự động chuyển đổi sang HTML đầy đủ như trên

#page>div.logo+ul#navigation>li*5>a{Item $}

Hãy sử dụng EMMET ngay, mình cá là các bạn sẽ thấy mình code như dân chuyên nghiệp 😎và thú vị hơn nhiều đấy.
bảng lừa đảo EMMET. https. // tài liệu. emmet. io/cheat-sheet/

Máy chủ trực tiếp (Phần mở rộng VSCode)

Tự động mở 1 máy chủ cục bộ với tính năng tải lại trực tiếp các thay đổi ngay lập tức. Bật máy chủ trực tiếp bằng cách nhấp vào nút "Phát trực tiếp".

Nhớ đừng tải nhầm Visual Studio nha, kẻo bán nhà đó

Cài đặt chủ đề, phông chữ và biểu tượng cho màn hình

Sau khi đã cài đặt xong VS Code, bạn bấm vào mục Tiện ích mở rộng bên góc trái, bắt đầu nhập và tìm tiện ích mở rộng rồi cài đặt thôi ha

Đầu tiên, các bạn mình sẽ cài đặt theme, font chữ, icon linh tinh trước

Bạn nên cài thêm 1 số theme để nhìn cho dịu mắt. Cá nhân mình thì thích dùng theme Dracula, màu xanh xanh hường hường tím tím, nhìn lâu hay buổi code cũng tối không sáng mắt

 

Bên cạnh đó, bạn cũng nên tải thêm 1 số set-icon như vscode-icons, các icon này sẽ giúp bạn nhìn vào danh sách thư mục và dễ dàng nhận biết đâu là folder, file nào là file gì v…v

 

Tiếp theo, bạn nên cài đặt font chữ thuận tiện cho việc viết code. Cá nhân mình sử dụng Fira Code (github. com/tonsky/FiraCode)

Cài xong các bạn vào setting change font to FiraCode sau đó bật fontLigature lên luôn nha. Bật cái này lên sẽ giúp gom nhóm mấy cái như ==,. = to 1 ký tự, giúp bộ não xử lý nhanh hơn, đọc mã cũng nhanh hơn luôn

Some extension should used for all dev

Sau khi cài đủ thứ thì VSCode nhìn cũng khá đẹp rồi, giờ ta cài thêm 1 số Plugin cho việc Code nào

• GitLens. VSCode has support pull/push from Git, but GitLens bá đạo hơn nhiều. Nó giúp bạn biết từng dòng code do ai viết, viết vào lúc nào, nằm trong commit nào. You can also …. Reverse back too past to see the file has been change like any, very tiện lợi
• Bộ tô màu cặp giá đỡ. Tô màu các dấu ()[]{}, nhìn 1 phát là biết cái nào đi cặp với cái nào, không còn lộn, thừa thiếu dấu nữa
• Đánh dấu trang. Giúp bạn “đánh dấu” lại những dòng code hay đụng tới, cần đọc nhiều, sửa nhiều. Không còn phải tìm kiếm mã mỗi lần cần tìm nữa
• Trình kiểm tra chính tả mã. Rất nên cài đặt. Trước kia, lâu lâu mình hay viết comment sai chính tả, đặt tên hàm, tên biến cũng sai chính tả luôn. Tiện ích mở rộng này sẽ làm nổi bật những đoạn sai chính tả để mình sửa nha. Anh nhớ cài kẻo viết code sai chính tả bọn nó cười đó

Cài đặt Trình kiểm tra chính tả mã – Không còn những lỗi chính tả hơi con mới

• Cài đặt đồng bộ hóa. Giúp bạn đồng bộ cài đặt (cài đặt, tiện ích mở rộng) giữa nhiều máy với nhau. Nhờ cài cái này, mình chỉ cần setup VS Code 1 lần. Những lần sau, khi đổi máy, mình chỉ cần chạy 1 phát là toàn bộ cài đặt cũ đã được đồng bộ qua máy mới rồi

Những extension hay ho cho dân làm web

Tiếp theo, đây là những extension mà dân làm web quần mình hay dùng. Đa phần những tiện ích mở rộng này giúp tiết kiệm thời gian tiết kiệm, để mình viết mã nhanh hơn, mượt mà hơn

• Máy chủ trực tiếp. Xây dựng 1 máy chủ chạy HTML/CSS/JS, tự động làm mới mỗi trình duyệt khi bạn sửa mã. Bạn nào mới học front-end thì nên cài cái này, F5 tiết kiệm thời gian lắm luôn

Sử dụng LiveServer để code web tĩnh sẽ tiết kiệm được rất nhiều thời gian làm mới

• Tự động nhập. Hỗ trợ mình Nhập thư viện JavaScript, thành phần từ các tệp khác
• chi phí nhập khẩu. Tất nhiên, nhập nhiều thư viện thì sẽ đỡ tốn tiền công viết mã hơn, nhưng cũng làm cho ứng dụng nặng hơn, tải lâu hơn. Cài đặt chi phí nhập khẩu, bạn sẽ biết những thư viện nào quá nặng, nên thay thế hoặc loại bỏ, hoặc nhập 1 phần nhỏ thôi
• Tự động đổi tên thẻ + Tự động đóng thẻ. Khi code HTML/JSX, mỗi khi tạo thêm tag mới, extension sẽ đóng tag để khỏi quên. Khi đổi tên thẻ, phần mở rộng này sẽ đổi tên thẻ đóng cho phù hợp luôn
• npm Intellisense + Đường dẫn Intellisense. Gợi ý tên gói npm, tên tệp trong thư mục khi mình cần nhập, giúp giảm lỗi khi nhập
• Bộ đôi ESLint + Prettier. Như mình đã giới thiệu về Linter, ESLint sẽ giúp bạn code đúng chuẩn, đúng định dạng, tìm những lỗi linh tinh khi code. Prettier sẽ hỗ trợ bạn định dạng mã, chỉnh sửa theo đúng chuẩn từ ESLint
  • Cài 2 cái này xong, chỉ cần code đại rồi Ctrl S để lưu 1 phát là code vừa đẹp vừa chuẩn ngay

 

Ngoài ra, tùy vào ngôn ngữ/framework đang sử dụng mà các bạn có thể cài đặt thêm Đoạn mã hoặc Tiện ích mở rộng VSCode cho ngôn ngữ đó. Bản thân mình code từ React sang Angular, từ Golang sang Elixir nên cài đủ thứ luôn

Dong VSCode Extension description pí lù trong máy mình. Sử dụng một Mã VS của mình nhưng chơi được 3-4 ngôn ngữ

 

Ngoài ra, còn 2 tiện ích mở rộng hay ho viết bằng AI, giúp bạn viết mã nhanh hơn nữa (gần như viết mã phụ bạn luôn). Mình giới thiệu trong vlog Youtube bên dưới nha. Phải xem clip demo mới thấy được sự bá đạo của bọn nó hihi

pause

Trong bài viết này, mình đã hướng dẫn các bạn cách cài đặt VSCode, cũng như các tiện ích mở rộng bá đạo mà các bạn nên sử dụng rồi. Làm theo hướng dẫn, các bạn sẽ có 1 bản VS Code khá mạnh, đủ dùng để code web nhé

Nếu các bạn có kinh nghiệm sử dụng, có extension nào hay muốn chia sẻ cho anh em thì cứ comment bên dưới nhen