Visual Studio Code Extension hay nhất phần 2

Top 9 Visual Studio Code Extension hay nhất phần 2 (2020)8 phút đọc

Trong bài viết trước mình đã giới thiệu với các bạn 10 Visual Studio Code Extension hay nhất theo quản điểm cá nhân mình.Bài viết hôm nay mình sẽ tiếp tục chia sẻ cho các bạn thêm 10 VSCode extension nữa mà mình nghĩ chắc nhiều bạn sẽ cần.

Hãy theo dõi hết bài viết để biết đó là những extension nào, công dụng và cách sử dụng chúng ra sao nhé.

Auto-Open Markdown Preview

Visual Studio Code Extension hay nhất phần 2 ảnh 1

Nếu bạn đã từng sử dụng Github hay một số dịch vụ khác thì bạn sẽ thấy có xuất hiện file với phần mở rộng là .md.Đây là file Markdown, một ngôn ngữ kiểu đánh dấu dùng để ghi chú nhanh lại thông tin của dự án.

Như HTML thì Markdown cũng có những quy tắc viết riêng để tạo nên một đoạn văn bản hoàn chỉnh thông qua sử dụng các kí tự đặc biệt.Sẽ rất thuận tiện khi bạn vừa soạn thảo văn bản với Markdown mà vừa xem được kết quả văn bản của mình khi hiển thị trên các ứng dụng trông sẽ ra sao phải không nào.

Visual Studio Code Extension hay nhất phần 2 ảnh 1 a

Bạn hãy cài đặt ngay VSCode extension  có tên Auto-Open Markdown Preview để làm việc này.Khi bạn mở một file .md thì ngay lập tức một màn hình Preview cũng sẽ được mở ra để bạn có thể xem kết quả hiển thị của file markdown mà bạn đang soạn thảo.

Code Runner

Visual Studio Code Extension hay nhất phần 2 ảnh 2

Bình thường khi chạy một số đoạn chương trình chúng ta phải mở chúng trên trình duyệt hoặc một ứng dụng nào khác để xem được kết quả.Nhưng với VSCode extension Code Runner  thì bạn không cần làm như vậy nữa.

Visual Studio Code Extension hay nhất phần 2 ảnh 2 a

Sau khi cài extension này thì việc của bạn chỉ là soạn thảo code, sau đó bôi đen lựa chọn vùng code muốn thực hành và nhấn nút mũi tên ở góc trên cùng bên phải trình soạn thảo VSCode.Lập tức kết quả sau khi thực hành đoạn code mà bạn đã lựa chọn sẽ hiển thị trong phần OUTPUT của trình soạn thảo code VSCode.

Như bạn có thể thấy trong phần mô tả của extension thì nó hỗ trợ rất nhiều ngôn ngữ.Đây là một trong số những extension mà mình rất yêu thích và hi vọng bạn cũng sẽ tận dụng nó để tiết kiệm thời gian thực hành code của mình.

Code Spell Checker

Visual Studio Code Extension hay nhất phần 2 ảnh 3

Khi viết code gần như 100% chúng ta phải sử dụng ngôn ngữ là tiếng Anh, từ tên hàm, tên thuộc tính, đến tên giá trị…vv.Nhiều bạn không giỏi tiếng Anh hoặc đôi khi vô tình viết sai chẳng hạn.Khi nộp sản phẩm cho khách hàng hay cấp trên nếu bị phát hiện lỗi chính tả thì thật là ngại phải không nào.

Visual Studio Code Extension hay nhất phần 2 ảnh 3 a

VSCode extension Code Spell Checker sẽ giúp bạn kiểm tra lỗi chính tả và thông báo cho bạn ngay để bạn sửa luôn.Mỗi khi bạn viết sai chính tả tiếng Anh thì sẽ có gạch chân ở phần từ ngữ sai chính tả, đồng thời cũng sẽ xuất hiện thông báo trong khung PROBLEMS.

GitLens

Visual Studio Code Extension hay nhất phần 2 ảnh 4

Nếu bạn đang làm việc với Git thì chắc chắn bạn không thể không cài đặt VSCode extension có tên GitLens.Extension này sẽ giúp bạn thao tác nhanh hơn và thêm rất nhiều chức năng hữu ích khi bạn làm việc với Git.

Visual Studio Code Extension hay nhất phần 2 ảnh 4 a

Ví dụ như trên màn hình soạn thảo code sẽ xuất hiện thông tin commit gần nhất của file mà bạn đang thao tác như ai là người commit, commit vào thời điểm nào và nội dụng commit là gì.

Ngoài ra khi sử dụng extension này thì ở góc trên cùng bên phải trình soạn thảo VSCode của bạn cũng sẽ xuất hiện thêm một số icon chức năng.Bạn hãy nhấn vào những icon này để biết chức năng cụ thể của chúng nhé.

Ví dụ như ở hình ảnh trên là chức năng so sánh sự khác nhau giữa hai trạng thái trước khi commit và sau khi commit.Phần khác biệt sẽ được lên màu như bạn thấy.

indent-rainbow

Visual Studio Code Extension hay nhất phần 2 ảnh 5

Đây cũng là một VSCode extension hay mà mình muốn giới thiệu đến bạn.Chức năng của nó chỉ là lên màu phần thụt so với lề trái.

Khi lên màu như vậy bạn có thể quan sát nhanh khối code của mình đã được sắp xếp hợp lý hay chưa, đồng thời có thể biết nhanh được giới hạn của một khối code bằng cách gióng từ trên xuống dưới theo màu sắc.

JavaScript (ES6) code snippets

Visual Studio Code Extension hay nhất phần 2 ảnh 7

Nếu bạn làm việc với ngôn ngữ JavaScript thì bạn nên cài VSCode extension có tên là JavaScript (ES6) code snippets.

Sau khi cài đặt extension này bạn có thể viết nhanh cả một câu lệnh hay một đoạn code JavaScript chỉ bằng cách gõ một vài kí tự đơn giản đại diện cho câu lệnh, đoạn code đó.

Về những kí tự và các câu lệnh, đoạn code tương ứng với nó bạn có thể tham khảo trong phần mô tả của extension này và thực hành một vài lần để nhớ mà sử dụng.

Import Cost

Visual Studio Code Extension hay nhất phần 2 ảnh 8

Trong một dự án bạn sẽ thường sử dụng nhiều thư viện khác nhau.Mỗi một thư viện đều có dung lượng riêng.Bạn có thể xem nhanh dung lượng của thư viện mà bạn đang sử dụng bằng cách cài đặt extension Import Cost.

Sau khi cài đặt extension này thì bên cạnh phần code import thư viện vào sẽ xuất hiện thông tin dung lượng của thư viện đó.Qua đó bạn có thể so sánh giữa các thư viện khác nhau xem thư viện nào tối ưu về dung lượng sử dụng để đưa vào dự án.

REST Client

Visual Studio Code Extension hay nhất phần 2 ảnh 9

Để test dữ liệu API bạn thường phải sử dụng đến những công cụ hỗ trợ như POSTMAN phải không nào.Với VSCode extension REST Client thì bạn sẽ không cần đến một phần mềm hỗ trợ nào mà có thể test ngay dữ liệu API trên trình soạn thảo VSCode.

Visual Studio Code Extension hay nhất phần 2 ảnh 9 a

Sau khi cài đặt extension này xong bạn hãy tạo một phần mở rộng là .http.Tiếp theo bạn hãy nhập phương thức bạn muốn áp dụng như GET, POST… kèm theo đường link dẫn đến API của bạn.

Trên mỗi phương thức sẽ có dòng chữ Send Request, bạn hãy nhấn vào đó để bạn áp dụng phương thức.Kết quả sẽ được hiển thị ở một màn hình riêng như hình ảnh trên đây.

SCSS Formatter

Visual Studio Code Extension hay nhất phần 2 ảnh 10

Nếu bạn thường xuyên làm việc với SASS thì đây là extension bạn nên cài đặt.Extension SCSS Formatter sẽ giúp bạn sắp xếp lại code sao cho đẹp mắt và dễ nhìn hơn.Chức năng của nó tuy đơn giản nhưng vô vùng hữu ích.

Kết luận

Vậy là mình đã giới thiệu cho các bạn thêm 9 VSCode extension.Hi vọng trong số những extension mà mình giới thiệu trên đây có extension mà bạn đang tìm kiếm và sẽ giúp ích cho công việc của các bạn trong tương lai.

Bài viết trước 

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

8

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x