Top 10 Extensions Vscode Tốt Nhất (2019)

Vscode được biết đến là một công cụ editor vô cùng đa dụng, với một kho extensions khổng lồ hộ trợ tận răng. Hôm nay mình sẽ giới thiệu cho mọi người một vài extensions có thể nói là tốt nhất hiện nay của thằng Vscode này.

REST Client

Có thể những ai đã từng code Resful API thì hẳn không còn lạ lẫm với Postman, một công cụ giả lập request hữu dụng. Bây giờ bạn có thể biến Vscode của mình thằng Postman bằng cách cài đặt thêm extensions REST Client

Công việc đơn giản chỉ cần tạo một file .http hoặc .rest. Tiếp đến nhập kiểu method và url cần request sau đó send request là ta sẽ nhận được response ở màn hình bên phải.

 

Query Strings

 

Request Headers

 

Request Body

 

Có thể chỉ định file path để sử dụng như một body, bằng cách sử dụng dấu <

 

Một tính năng vô cùng hay ho Generate Code từ request

và có rất nhiều những tính năng tuyệt vời khác anh em có thể đọc docs: https://marketplace.visualstudio.com/items?itemName=humao.rest-client Hoặc xem docs trên vscode ở phần details extensions

Live Sass Compiler

Sẽ không còn phải lo lắng về việc mất công sửa code sass và chạy lại phần mềm biên dịch sang css nữa. Giờ chúng ta đã có Live Sass Compiler, chỉ cần save là có file css mới ngay

Trước hết ta cần config compiler: Ctrl + , nhập Live Sass chọn Live Sass Compiler tiếp đến Edit in settings.json

 

Config chi tiết hơn tại : https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

  • Bấm F1 or ctrl+shift+P và nhập Live Sass: Watch Sass để bắt đầu compilation hoặc Live Sass: Stop Watching Sass để dừng compilation
  • Bấm F1 or ctrl+shift+P và nhập Live Sass: Compile Sass - Without Watch Mode để biên dịch Sass hoặc Scss một lần.

AutoRename

Tự động sửa cả thẻ đóng và thẻ mở mà không cần phải mất công đì mò thẻ đóng.

Configuration

Nếu bạn chỉ muốn nó tư động rename ở một vài ngôn ngữ thì hãy thêm vào mục auto-rename-tag.activationOnLanguage để set ngôn ngữ. Còn mặc định nó đang là ["*"] và sẽ hoạt động với tất cả các ngôn ngữ.

 

Bracket Pair Coloruzer 2

Ngoặc đóng ngoặc mở và indent giờ sẽ dễ dàng kiểm tra khi đã có Bracket Pair Coloruzer

Định nghĩa các màu được sử dụng, cho phép sử dụng tên màu, mã hex và rgba()

 

 

 

Quick-start:

 

Để xem chi tiết hơn về thiết lập mọi người có thể xem tại detail extensions

CSS Peek

Giúp bạn tìm đến file nguồn định nghĩa css của class hoặc id một cách nhanh chóng. Không cần phải ctrl + shift + f tìm toàn bộ project để xem phần định nghĩa của css nữa.

  • Peek: load phần định nghĩa và sửa ngay tại chỗ không cần chuyển đến file định nghĩa(Ctrl+Shift+F12)
  • Go To: Nhảy đến phần định nghĩa css và tùy chỉnh (F12)
  • Hover: Hiển thị nội dung định nghĩa (Ctrl+hover)

HTML CSS Support

Tính Năng

  • Hỗ trợ Zen Coding với class và id một cách nhanh chóng
  • Hỗ trợ kết nối file css remote
  • Có sử dụng vscode-css-languageservice

Ngô ngữ hỗ trợ

  • html
  • laravel-blade
  • razor
  • vue
  • pug
  • jade
  • handlebars
  • php
  • twig
  • md
  • nunjucks
  • javascript
  • javascriptreact
  • typescript
  • typescriptreact

Remote Style Sheet

Không cần thiết phải có file ở local mà có thể kết nối với file remote

 

Sử Dụng

ctrl + space để xem danh sách các attributes

Prettier

Một extension format code tuyệt vời không thể thiếu

Sử Dụng

(CMD/CTRL + Shift + P)

 

Thiết lập Format On Save

 

Live_Server

Thường thì đối với những file satics như .html khi chạy sau đó sửa đổi code nếu muốn xem sự thay đổi thì ta cần reload lại browser. Live Server sẽ hỗ trợ điều đó.

Shortcuts để bật/tắt Server

  • Bật/Tắt Go Live

  • Chuôt phải vào một file html và chọn Open with live server.
  • Hoặc khi đang ở một file html thì chuột phải và chọn `Open with Live Server

Indent Rainbow

Đây là một extension hỗ trợ cho việc format indent

Configuration

 

và còn rất nhiều tùy chỉnh khác mọi người có thể tham khảo tại detail extension Indent-Rainbow

Theme Material

Theme Material Với rất nhiều theme đẹp vừa mắt. Ngoài thì chúng ta cũng có thể config một vài thông số cơ bản như sau

Ví dụ cơ bản

 

Ví dụ nâng cao

 

Tổng Kết

Trên đây là 10 extensions rất hữu ích của Vscode và hiện cũng đang được rất nhiều người sử dụng. Mong là chia sẻ này có thể giúp các bạn có thêm cho mình được những lựa chọn tốt nhất về các extensions vscode

Nguồn:

https://www.youtube.com/watch?v=c5GAS_PMXDs&feature=youtu.be

 

Trả lời