Những VS Code Extensions cần thiết cho Web Developers

Các tiện ích mở rộng bạn có thể cài đặt trong Visual Studio Code để cải thiện hiệu suất làm việc của mình khi lập trình:

• Auto Close Tag
  • Chức năng: Tự động đóng các thẻ HTML khi bạn gõ xong thẻ mở.
  • Cài đặt:
    1. Mở VS Code.
    2. Chọn Extensions (biểu tượng hình khối ở thanh sidebar bên trái).
    3. Tìm kiếm "Auto Close Tag" và nhấn "Install".
  • Sử dụng: Khi viết mã HTML, tiện ích này sẽ tự động thêm thẻ đóng tương ứng khi bạn hoàn thành thẻ mở.

• HTML CSS Support
  • Chức năng: Cung cấp hỗ trợ tốt hơn cho việc viết HTML và CSS, bao gồm tự động hoàn thành và gợi ý.
  • Cài đặt:
    1. Mở VS Code.
    2. Chọn Extensions.
    3. Tìm kiếm "HTML CSS Support" và nhấn "Install".
  • Sử dụng: Khi viết mã HTML hoặc CSS, bạn sẽ nhận được các gợi ý và tự động hoàn thành từ tiện ích này.
• JavaScript (ES6) Snippets
  • Chức năng: Cung cấp các đoạn mã mẫu cho JavaScript ES6, giúp bạn viết mã nhanh hơn.
  • Cài đặt:
    1. Mở VS Code.
    2. Chọn Extensions.
    3. Tìm kiếm "JavaScript (ES6) code snippets" và nhấn "Install".
  • Sử dụng: Khi viết mã JavaScript, bạn có thể sử dụng các snippet bằng cách gõ các từ khóa snippet và chọn từ danh sách gợi ý.
• Live Server
  • Chức năng: Khởi động một máy chủ phát triển địa phương với tính năng tự động tải lại (live reload) cho các trang HTML/CSS/JavaScript.
  • Cài đặt:
    1. Mở VS Code.
    2. Chọn Extensions.
    3. Tìm kiếm "Live Server" và nhấn "Install".
  • Sử dụng: Mở tệp HTML cần xem trước, nhấn chuột phải và chọn "Open with Live Server". Trang HTML sẽ được mở trong trình duyệt và tự động tải lại khi có thay đổi.
• Prettier - Code formatter
  • Chức năng: Một trình định dạng mã (formatter) giúp bạn định dạng lại mã nguồn một cách nhất quán và dễ đọc hơn.
  • Cài đặt:
    1. Mở VS Code.
    2. Chọn Extensions.
    3. Tìm kiếm "Prettier - Code formatter" và nhấn "Install".
  • Sử dụng: Bạn có thể định dạng mã bằng cách nhấn Shift + Alt + F hoặc thiết lập để tự động định dạng khi lưu tệp (File > Preferences > Settings > User > Text Editor > Formatting > Format On Save).
• Import Cost
• Chức năng: Hiển thị chi phí (kích thước) của các thư viện bạn import trong tệp JavaScript/TypeScript.
• Cài đặt:
  1. Mở VS Code.
  2. Chọn Extensions.
  3. Tìm kiếm "Import Cost" và nhấn "Install".
• Sử dụng: Khi bạn import một thư viện trong tệp JavaScript/TypeScript, kích thước của thư viện đó sẽ được hiển thị bên cạnh lệnh import.

• Auto Import
• Chức năng: Tự động thêm các import cần thiết khi bạn sử dụng các module hoặc thư viện chưa được import trong tệp JavaScript/TypeScript.
• Cài đặt:
  1. Mở VS Code.
  2. Chọn Extensions.
  3. Tìm kiếm "Auto Import" và nhấn "Install".
• Sử dụng: Khi bạn gõ một hàm hoặc module chưa được import, tiện ích sẽ tự động thêm lệnh import thích hợp vào đầu tệp.

• Auto Rename Tag
• Chức năng: Tự động đổi tên thẻ đóng khi bạn đổi tên thẻ mở trong tệp HTML hoặc XML.
• Cài đặt:
  1. Mở VS Code.
  2. Chọn Extensions.
  3. Tìm kiếm "Auto Rename Tag" và nhấn "Install".
• Sử dụng: Khi bạn thay đổi tên thẻ mở trong tệp HTML/XML, thẻ đóng tương ứng sẽ tự động được cập nhật.