Best VSCode and Chrome Extensions for Front-end Web Developer
Best VSCode and Chrome Extensions for Front-end Web Developer

VS Code Extension

  1. Open In Browser: Cho phép bạn mở nhanh một file HTML bằng cách click chuột phải và chon Open In Default/Other Browser ngay trên VS Code.
  2. Live Sever: Auto reload trang khi bạn thay đổi code và lưu.
  3. Bracket Pair Colorizer: Giúp bạn dễ dàng phân biệt được các cặp ngoặc đóng mở, cũng như phát hiện được việc thiếu ngoặc đóng bằng những màu sắc khác nhau.
  4. Cold Night: Đây là một trong những theme cho VS Code mà mình thích nhất, các bạn có thể cài đặt và trải nghiệm nhé.
  5. Auto Rename Tag, Auto Close Tag: Tên extensions đã nói lên ý nghĩa của nó rồi đúng không các bạn, nó giúp bạn tự động đổi tên tag đóng khi bạn sửa tên tag mở và tự động đóng một tag.
  6. Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets: Tên khá dài nhưng các bạn chỉ gần search Bootstrap là kết quả xuất hiện rồi nhé. Nó giúp bạn tự động import những thư viện liên quan của Bootstrap cũng như Front awesome. Đồng thời nhắc các lệnh tắt để gọi các Components có sẵn của Bootstrap.
  7. CSS Formatter, SCSS Formatter: Hai extensions này giúp bạn format code CSS và SCSS trông đẹp và dễ nhìn hơn. Sau khi cài đặt các bạn dùng tổ hợp phím Alt + Shift + F hoặc chuột phải chọn Format Document để format code của bạn.
  8. SCSS IntelliSense: Giúp gợi ý cho các bạn các biến cũng như các mixin đã khai báo. Chi tiết hơn khi các bạn gọi đến một mixin nó còn gợi í chi tiết thứ tự và từng thành phần bạn đã tạo trong mixin đó giúp bạn không bị nhập sai hoặc thiếu.

Chrome Extensions

  1. WhatFont: Giúp các bạn biết được một trang web sử dụng loại font nào bằng cách click chuột vào biểu tượng extension và di chuột vào trang web cần tra cứu font thì tên font sẽ được hiển thị. Link: https://chrome.google.com/…/jabopobgcpjmedljpbcaablpmlmfcogm
  2. Pesticide for Chrome: Giúp bạn thấy được các vùng phân chia trang web của từng div chỉ với một cái click chuột. Link:https://chrome.google.com/…/bblbgcheenepgnnajgfpiicnbbdmmooh
  3. ColorZilla: Ngoài tính tắng chọn màu bằng cách click vào một phần nào đó trên bất kì trang web nào thì nó còn có một số tính năng khác như sau: Hiển thị trình chọn màu, lịch sự màu đã chọn, thống kê tất cả các màu có trên trang web, CSS Gradient Generator. Link:https://chrome.google.com/…/bhlhnicpbhignbdhedgjhgdocnmhomnp
  4. Wappalyzer: Extension này khá hay cho các bạn vì nó detect được hầu hết những công nghệ, ngôn ngữ lập trình nào đang được sử dụng trên trang web đó. Điều này rất có ý nghĩa trong việc giúp anh em developer chúng ta cập nhật được những công nghệ mới mà các trang web đang dùng. Link: https://chrome.google.com/…/gppongmhjkpfnbhagpmjfkannfbllam…
guest
0 Comments
Inline Feedbacks
View all comments