VS Code Extensions Hữu dụng:

Chào các bạn!

• Hôm nay rảnh, ngồi gửi tới các bạn một vài Extensions hữu ích cho lập trình viên Front-end. Hy vọng phần nào giúp ích cho các bạn trong quá trình CODE được thuận tiện hơn.
• Trong loạt bài giảng của Admin Sơn cũng đã giới thiệu và hướng dẫn các bạn làm quen và sử dụng khá nhiều Extensions hữu ích... nên các bạn cũng đã thông thạo với việc cài đặt và sử dụng Extensions. Vì vậy trong bài viết này mình chỉ mang tính giới thiệu một số Extensions mà có thể các bạn chưa tiếp xúc đến, chứ mình khồng đi sâu vào hướng dẫn cài đặt hay cách sử dụng cụ thể nhé (Các tính năng chuyên sâu của chúng các bạn tự khám phá nhé).

1. HTMLHint : Công cụ phân tích mã tĩnh cho HTM

Các bạn có thể tham khảo thêm Extensions khác tại đây: https://fullstack.edu.vn/blog/lam-the-nao-de-copy-css-selector-mot-cach-nhanh-nhat.html

HTMLHint Sẽ giúp các bạn tìm ra các lỗi ngớ ngẩn trong quá trình viết Code, mà có khi bạn phải mất hàng giờ để tìm ra chúng. Bạn có thể tìm kiếm HTMLHint qua Extensions của trình soạn thảo hoặc theo đường kink : https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

Nó nhìn như thế này:

2. Svg Preview for VSCode : Xem trước file Svg trực tiếp trong VScode:

Đã bao giờ bạn Export một loạt file SVG trong một dự án và đặt cho chúng 1 cái tên na ná giống nhau Ví dụ như (item1, item2, item3.....) sau một thời gian ..... và rồi bây giờ bạn cần dùng đến chúng:

Trước một đống những con số...... Làm sao bây giờ đây ta? Đối với những LTV dày dạn kinh nghiệm thì không nói, nhưng đối với các bạn mới thì đây quả là một vấn đề! Không lẽ đi mở từng file 1 ra trình duyêt? Lúc này đây Svg Preview for VSCode sẽ phát huy vai trò của nó.

Bạn hãy xem:

Vấn đề trở nên đơn giản đúng không? Không những thế Svg Preview for VSCode còn cho phép bạn chỉnh sửa file SVG một cách trực quan trên ngay VScode. Nó đây, các bạn tự thử chỉnh sửa nhé!

https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview

3. CSS Navigation : Cho phép Chuyển Định nghĩa từ HTML sang CSS/Sass.....

À cái này hữu ích nha. Tính năng mình hay sử dụng là: Mình đứng từ file HTML bấm giữ phím Ctrl và Click chuột vào tên id hay tên class nào đó là nó sẽ tự động tìm và đưa mình đến thẳng vị trí CSS seletor tương ứng ở bên file CSS nha (Và ngược lại).

CSS Navigation Nó đây nhé các bạn: https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation

Và hình hài nó như thế này:

4. audio-preview : Cho phép bạn nghe trước và chính sửa file âm nhạc ngay trong VScode nha:

Không để các bạn chờ lâu. Nó đây: https://marketplace.visualstudio.com/items?itemName=sukumo28.wav-preview

5. VisBug : Và cuối cùng mình xin giới thiệu với các bạn 1 tiện ích Browser VisBug:

Đây là một tiện ích giúp các bạn có thể Kiểm tra, đo đạc khoảng cách, chỉnh sửa trực quan các phần tử ngay trên trang web mà không cần phải Inspect :

- Bước 1: Truy cập trang

https://github.com/GoogleChromeLabs/ProjectVisBug

- Bước 2: Kéo xuống tìm linh tải (tương ứng với trình duyệt của bạn):

- Bước 3 : Add Extensions vào trình duyệt như các Extensions khác:

- Bước 4: Sử dụng nó:

a). Đo khoảng cách giữa các phần tử:

Để đo khoảng cách giữa 2 phần tử : Click vào phần tử thứ nhất sau đó :hover sang phần tử thứ 2 sẽ nhận được khoảng cách giữa 2 phần tử với đơn vị là px

Muốn đo đạc nhều phần tử cùng lúc: Click vào phần tử thứ nhất, nhấn giữ phím Shift rồi Click vào các phần tử cần đo tính khoảng cách tiếp theo.

b). Kiểm tra các thuộc tính của các phần tử:

c). Kiểm tra các thuộc tính Khả năng tiếp cận ( Web Accessibility):

Một số tính năng kiểm tra và chỉnh sửa trang:

Gửi tới các bạn bộ đóng gói sẵn các Extensions LTV Font-End hay dùng:

https://marketplace.visualstudio.com/items?itemName=SeyyedKhandon.fpack

Chúc các bạn sức khỏe, vui vẻ và thành công!