Top Những Extentions Trong VS Code Tốt Nhất Nên Dùng Cho Lập Trình Viên Front-End

Top Extentions tốt nhất cho phát triển Front-End trong VS Code: Nâng cao năng
suất của bạn trong năm 2023

Khám phá danh sách Top extentions đáng chú ý trong VS Code dành cho phát triển
Front-End. Tận dụng những công cụ mạnh mẽ này để tăng hiệu suất làm việc của
bạn và đẩy mạnh quá trình phát triển Front-End trong năm 2023.

Visual Studio Code, được duy trì bởi Microsoft, là một trong những
open-source code editor phổ biến nhất hiện nay. VS Code ra đời nhằm mục đích
cung cấp tất cả các công cụ bạn cần và loại bỏ các quy trình công việc phức
tạp cảu các IDEs đầy đủ. Nhiều lập trình viên thích VS Code vì nó cung cấp rất
nhiều extentions để bổ sung chức năng, năng suất, gỡ lỗi và tốc độ.

Trong bài viết này, chúng ta sẽ xem xét các extentions tốt nhất mà bất kỳ lập
trình viên Front-End nào cũng nên biết và sử dụng nằm 2023. Chúng ta sẽ thảo
luận về những gì chúng làm và cách chúng có thể giúp cuộc sống coding của bạn
dễ dàng hơn. Bắt đầu nào!

Bracket Pair Colorizer

Bracket Pair Colorizer extentions đánh dấu các dấu ngoặc tương ứng trong
code của bạn với cùng một màu. Đây là một trợ giúp tuyệt với khi bạn đang
làm việc với những thứ như các components, objects hoặc các functions.

Với extention này, việc tìm các cặp phù hợp và hiểu đoạn code của bạn sẽ dễ
dàng hơn nhiều. Ưu điểm lớn nhất của extention này là điều hướng và khả năng
truy cập được cải thiện. Nó cũng giúp người khác đọc và hiểu đoạn code của bạn
dễ dàng hơn.

Better Comments

Better comments là một extentions được sử dụng để viết các comment thân thiện
với người đọc hơn trong code của bạn, điều này hữu ích cho bạn và bất cứ ai
đang đọc code (đặc biệt là cho các team). Giúp tiết kiệm rất nhiều thời gian
cho những người trong một team.

 Với extention ở trong VS Code này, bạn có thể sử dụng các kỹ tự sau dấu
// để thêm nhận xét dễ dàng hơn.

• * đánh dấu văn bản.


• ! lỗi và cảnh báo.


• ? cho các truy vấn và câu hỏi.


• TODO cho việc cần làm.

Snippets

Snipped là một extention add-on tuyệt với cho năng suất. Snipped là tập hợp các extentions khác nhau cho các ngôn ngữ lập trình được sử dụng phổ biến nhất. Ví dụ: React Snipped là một extentions phổ biến cho phép bạn sử dụng và tạp shorthands cho những việc bạn làm đi làm lại nhiều lần.

Một vài options:

• Angilar Snipped (version 11).
• Python
• Javascript (ES6) code snippeds
• HTML Snipped
• Vue 3 Snipped

CSS Peek

CSS Peek là một extention tuyệt vời cho web developers, vì nó cho phép bạn "peek" các styles cho các lớp CSS, id và thậm chí là các thẻ HTML. Extention này tương tự như tính năng Brackets có tên CSS Inline Editor.

CSS Peek hỗ trợ theo dõi định nghĩa biểu tượng cho bất kỳ CSS selector nào, ví dụ:

• Peek: Tải tệp CSS inline để chỉnh sửa nhanh (Crtl + Shift + F12)
• Go To: chuyển trực tiếp đến tệp CSS (F12)
• Hover: hiển thị định nghĩa khi di chuột qua ký hiệu. (Ctrl + hover)

Prettier 

Extention Prettier là một trình định dạng giúp giữ cho kiểu code được nhất quán. Bạn có thể cấu hình cài đặt cảu mình theo các của bạn và lưu bằng shortcuts. Prettier là một trong những trình định dạng code phổ biến nhất hiện có, với hơn 38.5k starts trên Github.

Prettier sẽ tự động khắc phục các vấn đề về định dạng trong code của bạn, chẳng hạn như khắc phục sự kết hợp giữa dấu ngoặc đơn và dấu ngoặc kép hoặc việc sử dụng dấu chấm phẩy hay không.

Relative Path

Relative Path là một extentions tuyệt vời để viết các câu lệnh import. Bạn có thể dễ dàng lấy đường dẫn tương đối cho bất kỳ tệp nào bằng phím tắt trong workspace của bạn. Thay vì tìm kiếm vị trí tệp, bạn chỉ cần tên của tệp và extentions sẽ cung cấp đường dẫn tương đối từ vị trí hiện tại đến tệp mục tiêu đó.

Lưu ý: Nó sẽ cần một vài yêu cầu config nếu bạn đang làm việc với một repo lớn.

Icons

Icons cho phép bạn tạo các biểu tượng mô tả để giúp phân biệt giữa các tệp và thư mục. Điều này làm cho code của bạn trực quan hơn, do đó làm việc theo nhóm dễ dang hơn, quay lại đoạn code sau một thời gian hoặc thậm chí làm cho trải nghiệm thú vị hơn. Ví dụ, bạn có thể thay đổi màu của biểu tượng thư mục mặc định bằng lệnh.

Dưới đây là một vài sự khác nhau giữa các Icons extentions, bao gồm:

• vscode-icons
• Material Icon Theme
• Material Thêm Icons
• Simple icons

GitLens

Extention GitLens kết hợp các khả năng của Git với VSCode cho phép bạn trực quan hóa quyền tác giả mã thông qua Git. GitLens rất tốt để hiểu mã tốt hơn, vì vậy bạn có thể tìm hiểu ai, tại sao và khi nào mã được thay đổi. Nó cũng cho phép bạn khám phá lịch sử và sự phát triển của một cơ sở mã.

Nó cũng có nhiều tính năng khác để sử dụng như:

• Điều hướng sửa đổi thông qua lịch sử tệp
• Chú thích đổ lỗi dòng hiện tại ở cuối dòng hiển thị cam kết
• Thanh trạng thái đổ lỗi cho chú thích cho cam kết và tác giả đã sửa đổi dòng hiện tại lần cuối

Import Cost

Extention Import Cost giúp tăng năng suất bằng cách hiển thị kích thước ước tính của gói nhập khẩu. Điều này giúp tránh các vấn đề bằng cách theo dõi kích thước của các phụ thuộc được thêm vào.

Nếu quá trình import quá lớn, extention Import Cost sẽ cảnh báo bạn để bạn có thể định cấu hình lại dựa trên các yêu cầu bạn đã đặt.

Markdown All In One

Markdown All in One là một extention rất hữu ích cho tất cả những thứ liên quan đến đánh dấu. Nó bổ sung các tính năng như tự động xem trước, phím tắt, cú pháp tự động và hơn thế nữa. Markdown thường được sử dụng trên nhiều lĩnh vực công nghệ và extention này giúp làm việc dễ dàng hơn, tăng năng suất và tốc độ.

Với Markdown All in One, bạn có thể sử dụng các phím tắt để thay đổi văn bản và thêm những thứ như in đậm, in nghiêng, v.v. Nó cũng có các tính năng tự động hữu ích để làm việc với những thứ như danh sách và toán học. Dưới đây là một số lệnh phổ biến:

• Create a Table of Content
• Remove section numbers
• Toggle code block
• Print curent document to HTML

IntelliSense

IntelliSense là cái mà VS Code gọi là tính năng code autocomplete của riêng nó, nhưng nó cũng bao gồm một số chức năng khác nhau. Nó cũng bao gồm parammeter info, quick info và mimber lists. Các đề xuất được highlight có thể được chèn bằng Tab hoặc Enter.

Khi đề xuất được chấp nhận, Intellisense sẽ ghi nhớ những ký tự từng phần đã được nhập. Bằng cách đó, nếu bạn nhập lại các ký tự đó, đề xuất được chấp nhận sẽ xuất hiện đầu tiên. Điều này có hiệu quả cho phép bạn tùy chỉnh các đề xuất bằng cách cân nhắc khi bạn chấp nhận chúng. Ví dụ: nếu nhập co và sau đó chấp nhận bảng điều khiển autocomplete: , lần sau khi bạn nhập co, console  sẽ được đề xuất trước tiên. Nếu bạn gõ con và chọn const, thì lựa chọn đó cũng sẽ được ghi nhớ.

IntelliSense được thiết lập cho JavaScript, TypeScript, JSON, HTML, CSS và SCSS, v.v. Tuy nhiên, nó có thể dễ dàng được cài đặt cho hầu hết mọi ngôn ngữ bạn chọn với extention gói ngôn ngữ. Có các extention ngôn ngữ bao gồm các tính năng IntelliSense nâng cao cho:

• Python
• C / C ++
• C#
• Java
• Go
• Dark
• PHP
• Ruby

Cá nhân hóa: Intellisense cũng có thể được tùy chỉnh với keybindings!

VS Code shortcut cheat sheet

Chúng mình hy vọng bạn nhận được một số giá trị từ các extention này. Bây giờ bạn có thể bắt đầu một dự án mới khi biết rằng code editor yêu thích của bạn thậm chí còn tốt hơn. Để nói lời cảm ơn bạn đã đọc đến đây, hãy thưởng thức bảng phím tắt VS Code này nhé!

Kết luận

Trong kết luận, không thể phủ nhận rằng việc sử dụng các phần mở rộng trong VS Code là một yếu tố quan trọng để nâng cao năng suất và tiện ích cho việc phát triển Front-End. Danh sách Top những extentions này đã được chọn lọc cẩn thận, bao gồm các công cụ mạnh mẽ và linh hoạt nhất để giúp bạn tận dụng tối đa tiềm năng của VS Code.

Với sự hỗ trợ từ các extentions này, bạn có thể tăng cường khả năng xử lý mã, thực hiện gỡ lỗi dễ dàng hơn, tăng tốc quá trình phát triển và cải thiện chất lượng sản phẩm cuối cùng của bạn. Đừng ngần ngại thử nghiệm và khám phá các extentions này, và đảm bảo sử dụng chúng để đạt được thành công trong công việc phát triển Front-End của bạn trong năm 2023.

Chúc các bạn xem bài viết vui vẻ!