visual studio code extension hay nhất WDI Blog

Top 10 Visual Studio Code Extension hay nhất phần 1 (2020)10 phút đọc

Một trong những điểm vượt trội của Code Editor Visual Studio Code so với những Code Editor khác đó là số lượng extension phong phú với nhiều chức năng tuyệt vời.Nhưng vì có quá nhiều extension nên việc lựa chọn ra bộ những extension hữu ích cho bản thân không phải là chuyện dễ dàng.

Bài viết này mình sẽ chia sẻ với các bạn bộ những visual studio code extension hay nhất mà mình đã và đang sử dụng.Đây toàn là những extension hỗ trợ những chức năng cơ bản nhất mà hầu như bất cứ một web developper nào cũng cần đến.

Live Server

visual studio code extension hay nhất 01

Visual Studio Extension hay nhất Live Server

Visual Studio Code Extension hay nhất đầu tiên mình muốn giới thiệu đến các bạn đó là Live Server.Đây là một trong những extension có lượt cài đặt lớn nhất trên thư viện extension của VSCode.Hầu như bạn bè cùng công ty và cả những đối tác của mình ai cũng cài đặt extension này trên trình soạn thảo code VSCode.

Extension này sẽ giúp bạn xem kết quả giao diện hiển thị của dự án bạn đang làm trên trình duyệt và tự động cập nhật giao diện mới mỗi khi bạn tiến hành thay đổi code trong dự án và lưu nó lại.

Nếu bạn làm việc sử dụng hai màn hình riêng biệt và dùng thêm VSCode kết hợp với extension này thì tốc độ làm việc của bạn sẽ tăng gấp bội đó.

visual studio code extension hay nhất 11

Sử dụng VSCode extension Live Server

Để kích hoạt chức năng của VSCode extension Live Server bạn có hai cách.Cách đầu tiên là bạn chuột phải ở màn hình Editor Bar chọn menu “Open with Live Server“.Cách thứ hai là nhấn vào chữ “Go Live” ở dưới Status Bar.

visual studio code extension hay nhất 12

Kết quả sử dụng VSCode extension Live Server

Sau khi kích hoạt chức năng của VSCode extension Live Server lên thì một tab trình duyệt mới sẽ mở ra hiển thị kết quả code bạn đã soạn thảo.

Settings Sync

visual studio code extension hay nhất 10

Visual Studio Extension hay nhất Settings Sync

Khi các thành viên trong nhóm của bạn đều sử dụng Visual Studio Code để soạn thảo code và thường thì toàn nhóm muốn thống nhất một settings cho VSCode nhằm tạo ra một môi trường đồng bộ, tiện cho việc chỉnh sửa, nâng cấp code.

Nhưng nếu từng người ngồi thiết lập thủ công thì sẽ rất tốn thời gian mà hiệu quả chưa chắc đã tốt.Và Extension Settings Sync ra đời để giải quyết vấn đề này.

Việc bạn cần làm là tải extension này về và tạo ra một bản sao lưu trực tuyến settings hiện tại.Sau đó những thành viên khác trong nhóm chỉ việc tải bản sao lưu này về máy rồi đồng bộ nó là xong.

Ngoài ra extension này cũng rất hữu ích khi bạn muốn sao lưu lại toàn bộ thiết lập trên VSCode của mình phòng khi có vấn đề gì xấu xảy ra thì có thể nhanh chóng xử lý.

Paste and Indent

visual studio code extension hay nhất 09

Visual Studio Extension hay nhất Paste and Indent

Visual Studio Code Extension hay nhất tiếp theo trong danh sách đó là Paste and Indent.Khi soạn thảo code sẽ thường xuyên xuất hiện những đoạn code giống nhau và đôi khi bạn có thể tái sử dụng chúng bằng cách copy và paste.

Tuy nhiên nếu bạn chỉ dán đoạn code đã copy trước đó mà không căn chỉnh vị trí dán thì khả năng lớn là bạn sẽ phải dùng tới phím cách hoặc tab để tùy chỉnh lại vị trí từng dòng code.Nếu số lượng code ít thì không sao nhưng nếu số lượng code nhiều lên thì sẽ rất mất công sức và thời gian thao tác.

Extension Paste and Indent sẽ giúp bạn giải quyết việc này rất dễ dàng.Sau khi cài đặt extension này bạn hãy copy một đoạn code rồi dán ở vị trí bất kì thử xem.Đoạn code đó sẽ tự động căn lề trái sao cho hợp lý nhất so với code xung quanh.

Live Sass Compiler

visual studio code extension hay nhất 07

Visual Studio Extension hay nhất Live Sass Compiler

Visual Studio Code Extension hay nhất dành cho những bạn đang làm việc với SASS đó là Live Sass Compiler.Như các bạn đã biết khi làm việc với SASS thì một thao tác bắt buộc đó là biên dịch từ file .sass / .scss sang file .css phải không nào.

Bình thường chúng ta sẽ sử dụng một phần mềm trung gian để làm việc này nhưng thật tuyệt vời là trên VSCode đã có sẵn extension Live Sass Compiler.Extension này sẽ giúp việc biên dịch từ SASS sang CSS một cách tự động mỗi khi bạn tiến hành lưu file .scss / .sass.

Mình cũng đã có một bài viết riêng hướng dẫn sử dụng extension này, bạn có thể tham khảo qua link dưới đây.

CSS Peek

visual studio code extension hay nhất 06

Visual Studio Extension hay nhất CSS Peek

Nhiều trình soạn thảo khác hỗ trợ thao tác chỉnh sửa CSS ngay trên file HTML bằng cách gọi đến phần CSS tương ứng với id hoặc class.Và trên VSCode cũng hỗ trợ việc này với Visual Studio Code Extension hay nhất mang tên CSS Peek.

Bạn sẽ không bao giờ phải mất công tìm kiếm phần CSS muốn chỉnh sửa trên file CSS như thông thường nữa, do đó bạn sẽ tiết kiệm được rất nhiều thời gian và công sức khi làm việc.

Color Info

visual studio code extension hay nhất 05

Visual Studio Extension hay nhất Color Info

Extension Color Info hỗ trợ xem thông số màu ở bốn dạng khác nhau RGB, HSL, YMCKHEX khi trỏ chuột lên trên mã màu.

Một số thuộc tính CSS chỉ làm việc với hệ màu RGB thay vì hệ màu HEX.Dó đó bạn sẽ phải chuyển đổi mã màu từ hệ màu HEX sang hệ màu RGB để sử dụng.

Khi sử dụng Extension Color Info bạn sẽ không cần tới một công cụ online nào hỗ trợ làm việc này cả.Quá tiện lợi phải không nào.

visual studio code extension hay nhất 12

Sử dụng VSCode extension Color Info 1

Cài đặt xong extension này là bạn có thể thấy ngay kết quả mà không cần phải thiết lập như một số extension khác.Ở những vị trí có mã màu bạn hãy đặt con trỏ chuột lên đó, một popup bảng màu hiện ra.Bạn có thể thay đổi màu sắc trực tiếp bằng cách kéo chuột tới vị trí tương ứng.

visual studio code extension hay nhất 13

Sử dụng VSCode extension Color Info 2

Vẫn trong popup đó bạn kéo chuột xuống một tí là sẽ thấy ngay các cách viết khác nhau của mã màu hiện tại.Điều này rất tiện lợi khi bạn sử dụng một số thuộc tính của CSS liên quan tới màu sắc.

Color Highlight

visual studio code extension hay nhất 04

Visual Studio Extension hay nhất Color Highlight

Color HighlightVisual Studio Code Extension hay nhất theo quan điểm cá nhân mình khi hiển thị trực quan màu sắc ngay trên mã màu tương ứng.

Code của bạn sẽ được lên màu tại nơi có mã màu một cách hoàn toàn tự động.Nhìn vào màu sắc trực quan như thế bạn sẽ rất dễ dàng để thay thế hay chỉnh sửa một màu nào đó trong file.

visual studio code extension hay nhất 14

Sử dụng VSCode extension Color Highlight

Tại vị trí có mã màu bạn sẽ thấy màu sắc tương ứng được hiển thị phủ lấy phần mã màu như hình trên.

Bracket Pair Colorizer

visual studio code extension hay nhất 03

Visual Studio Extension hay nhất Bracket Pair Colorizer

Các ngôn ngữ lập trình đều sử dụng các dấu ngoặc để phân biệt các khối code với nhau.Cấu trúc của code càng sâu thì càng cần nhiều dấu ngoặc và càng khó hiểu.

Extension Bracket Pair Colorizer sẽ giúp bạn hiển thị đồng màu những dấu ngoặc cùng khối với nhau.Nhìn vào những dấu ngoặc được lên màu này bạn sẽ biết được giới hạn của một khối và dễ dàng đưa ra tùy chỉnh một cách chính xác, giảm thiểu lỗi một cách tối đa.

Đây là extension được nhiều lập trình viên nổi tiếng trên thế giới khuyên dùng và mình nghĩ bạn cũng nên cài đặt nó nếu như code của bạn phức tạp, khó hiểu.

visual studio code extension hay nhất 15

Sử dụng VSCode extension Bracket Pair Colorizer

Trên đây là hình ảnh kết quả sau khi cài đặt VSCode extension này.Extension này sẽ tự động tính toán để lên màu sắc phù hợp cho các dấu ngoặc, thể hiện sự liên quan giữa các khối code với nhau.

Với extension này bạn sẽ không bao giờ phải dùng đến cách xuống dòng để phân tách code nhằm hiểu rõ cấu trúc của một đoạn code phức tạp nữa.

Prettier

visual studio code extension hay nhất 02

Visual Studio Extension hay nhất Prettier

Tương tự như extension Live Server hay Mithril Emmet thì Prettier Visual Studio Code Extension hay nhất không thể thiếu nếu bạn sử dụng VSCode.

Extension này sẽ tự động định dạng lại code của bạn sao cho khoa học dễ nhìn nhất mỗi khi bạn tiến hành lưu lại tài liệu đang thao tác.

Code đẹp dễ nhìn không chỉ giúp bạn dễ dàng, nhanh chóng thao tác với code hơn mà còn được đánh giá cao nếu làm việc theo nhóm hay nộp sản phẩm cho khách hàng.

visual studio code extension hay nhất 17

Tùy chỉnh settings của VSCode extension Prettier

Khác với một số extension khác, sau khi cài đặt VSCode extension Prettier bạn cần thiết lập một số thứ để có thể sử dụng được nó.

Trong khung tìm kiếm của tab Settings bạn hãy nhập từ onsave (1), sau đó ở kết quả bạn hãy tích vào ô có dòng chữ Editor:Format On Save (2) để kích hoạt extension này lên.

Lúc này bên Side Bar sẽ xuất hiện thêm folder .vscode và bên trong đó có một file settings.json.Nếu bạn rành về code thì có thể chỉnh sửa code trong file này để can thiệp sâu vào settings.

Auto Rename Tag

visual studio code extension hay nhất 12

Visual Studio Extension hay nhất Auto Rename Tag

Như bạn đã biết thẻ HTML bao gồm một cặp thẻ đóng và mở.Đôi khi trong quá trình làm việc bạn sẽ phải sửa đổi tên thẻ tại một số vị trí sao cho phù hợp với dự án hiện tại.

Sẽ thật mất công nếu phải sửa lại thẻ mở rồi lại phải sửa tiếp thẻ đóng.Với Visual Studio Extension hay nhất Auto Rename Tag bạn sẽ chỉ cần sửa tên thẻ đóng hoặc thẻ mở, phần thẻ còn lại sẽ tự động được sửa theo.

Kết luận

Vậy là mình đã giới thiệu đến các bạn toàn bộ 11 Visual Studio Code extension hay nhất theo quan điểm cá nhân của mình.Trong thời gian tới mình sẽ thử dùng thêm nhiều VSCode extension hơn nữa và nếu thấy extension nào có ích mình sẽ tiếp tục viết bài chia sẻ đến các bạn.

Hãy luôn theo dõi và ủng hộ WDI Blog bạn nhé.Chúc bạn tìm được những VSCode hữu ích phục vụ tốt cho công việc hiện tại của bạn.Hẹn gặp lại bạn trong các bài viết sắp tới nhé.

Bài viết trước

Bài viết sau

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 :

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