Những Extension hữu ích nhất cho Visual Studio Code

Chắc hẳn phần lớn các Front End Developer hiện tại đang sử dụng Visual Studio Code (VSCode) như là 1 Editor chính bởi sự hỗ trợ mạnh mẽ của các extensions, cũng như là những tính năng có trong VSCode đáp ứng được nhiều nhu cầu của dev Front End, đồng thời là thao tác setting config với VSCode cũng dễ dàng thực hiện.

Hôm nay mình xin tổng hợp các extensions mình đang sử dụng phục vụ cho việc dev Front End.


1. Auto Close Tag



Extension đầu tiên chắc hẳn sẽ rất cần thiết và có thể bạn đã từng biết đến nó
Công dụng: Tự động thêm thẻ đóng cho HTML, cụ thể nó có những tính năng như sau:
– Tự động thêm thẻ đóng khi bạn gõ dấu > của thẻ mở.
– Sau khi chèn thẻ đóng, con trỏ chuột nằm giữa thẻ mở và thẻ đóng, thuận tiện cho việc add thêm content vào đó.
– Thiết lập danh sách các thẻ mà sẽ không được tự động đóng.
– Tự động đóng cho những thẻ self-closing.


2. Auto Rename Tag


Tự động đổi tên những cặp thẻ tương ứng, trong khi code HTML chúng ta thường hay đổi thẻ, việc đổi tên thẻ mở và thẻ đóng tự động thay đổi theo giúp tiết kiệm nhiều thời gian hơn.



3. ESLint


Eslint sẽ đọc được những config trong file eslint của dự án, với những kiểu định dạng file eslint như sau:

– .eslintrc.js
– .eslintrc.json
– .eslintrc

Chỉ cần viết sai hoặc viết thừa là đoạn code sẽ bị gạch chân màu đỏ, rất dễ dàng nhìn thấy và sửa lỗi. Từ khi có Eslint extension được cài vào VSCode những đoạn code JS của mình luôn follow đúng theo tiêu chuẩn.




4. SVG Viewer



Cho phép nhanh chóng xem được file svg ngay trong Editor, extension cũng giúp ích cho việc dễ dàng preview được thay đổi của svg khi ta sửa code của nó.


5. Project Manager



Tính năng cho phép switch dễ dàng giữa các dự án, vì VSCode chỉ cho phép mở cùng lúc 1 project trên cửa sổ nên tính năng mà extension này mang lại thật sự hữu ích cho các dev làm việc trên nhiều dự án.


6. Reactjs code snippets



Dạo gần đây mình đang tham gia vào các project về React, việc gõ những đoạn code như tạo 1 Component trong React làm mình phải gõ khá nhiều, thì code snippets này thật sự giúp ích rất nhiều trong việc viết code nhanh, tiết kiệm thời gian để xử lý các logic khác trong code React thay vì phải ngồi gõ nên cái base như này. Trong giai đoạn là newbie của 1 ngôn ngữ, framework hay thư viện mình nghĩ không nên lạm dụng code snippets này, vì nó sẽ tạo thói quen cho mình bị lười, không học cú pháp của code. Tuy nhiên ở level đã quen và làm tốt rồi thì nên có code snippets hỗ trợ cho việc tăng tốc độ coding.


Nguồn: viblo.asia

Write a Comment

Your email address will not be published. Required fields are marked *