sử dụng Visual Studio Code WDI Blog

Hướng dẫn sử dụng Visual Studio Code toàn tập14 phút đọc

Một trong những công cụ quan trọng bậc nhất và gắn liền với một lập trình viên đó chính là trình soạn thảo code.Trên thế giới hiện nay có rất nhiều trình soạn thảo code tuyệt vời như Sublime Text, Bracktes hay Atom.

Nhưng đặc biệt có một trình soạn thảo code vượt trội hơn tất cả phần còn lại về tính năng mà bạn không thể bỏ qua đó là Visual Studio Code.
Và trong bài viết ngày hôm nay mình sẽ chia sẻ với các bạn cách sử dụng Visual Studio Code toàn tập dựa trên chính kinh nghiệm của mình.Bài viết hơi dài nên bạn cố gắng theo dõi hết nhé.

Visual Studio Code là gì ?

Visual Studio Code hay VSCode là trình soạn thảo code do gã khổng lồ công nghệ Microsoft sáng tạo và phát triển.Chỉ trong một thời gian ngắn trình soạn thảo này đã vượt qua tất cả những trình soạn thảo code nổi tiếng khác như Sublime text, Brackets, Atom… để trở thành trình soạn thảo code phổ biến nhất trên thế giới.

Khi gõ từ khóa Visual Studio Code trên Google Trends và so sánh với những từ khóa khác như Brackets, Atom hay Sublime Text bạn sẽ thấy được tốc độ phát triển chóng mặt của Visual Studio Code.

sử dụng visual studio code ảnh 01

Visual Studio Code là gì ?

Tại sao nên sử dụng Visual Studio Code ?

Mình đã sử dụng Visual Studio Code được một thời gian và mình hoàn toàn bị thuyết phục bởi những tính năng tuyệt vời mà trình soạn thảo này mang lại.Dưới đây là một số lý do khiến Visual Studio Code trở thành trình soạn thảo code tốt nhất trên thế giới hiện nay theo quan điểm của mình.

  • Giao diện đẹp, hiện đại và dễ thao tác
  • Hoạt động hiệu quả, trơn tru
  • Dễ dàng tùy biến chức năng nếu như chịu khó mày mò
  • Dễ sử dụng và miễn phí 100%
  • Hỗ trợ tối đa và toàn diện nhiều ngôn ngữ lập trình
  • Số lượng lập trình viên tham gia phát triển extension đông đảo
  • Tài liệu hướng dẫn phong phú hơn bất kì trình soạn thảo nào khác

Ngoài ra sau khi Microsoft mua lại Github thì rất nhiều chức năng của Visual Studio Code đã được kết nối với Github.Đây là một tin tuyệt vời cho bất kì lập trình viên chuyên nghiệp nào đang làm việc với Git.

Hay nhất có lẽ là Microsoft đã tạo ra môi trường mở để ai cũng có thể tham gia phát triển extension cho Visual Studio Code, do đó số lượng extension của VSCode đang tăng lên từng ngày với nhiều chức năng tuyệt vời.

Cách sử dụng Visual Studio Code

Cài đặt Visual Studio Code

sử dụng Visual Studio Code ảnh 02

Download Visual Studio Code và cài đặt

Trước khi đọc phần hướng dẫn sử dụng Visual Studio Code bạn hãy download và tiến hành cài đặt Visual Studio Code ngay.Mình sẽ để link phía bên dưới đây để bạn tiện đến trang chủ của VSCode và tải nó về.Phần cài đặt hết sức đơn giản nên mình sẽ không hướng dẫn ở bài viết này.

 

Sau khi cài đặt Visual Studio Code

sử dụng Visual Studio Code ảnh 09

Màn hình sau khi cài đặt VSCode

Sau khi cài đặt VSCode và khởi động nó lên bạn sẽ thấy màn hình chào mừng như ảnh trên đây.Từ giờ mỗi lần bật VSCode lên bạn sẽ thấy màn hình này hiện ra.Nếu bạn thấy điều này bất tiện thì có thể bỏ tích ở chỗ “Show welcome page on starup” cuối góc màn hình bên trái để màn hình chào mừng này không hiển thị nữa.

Làm quen với giao diện của Visual Studio Code

Mình sẽ chia màn hình làm việc của Visual Studio Code thành 6 phần như hình dưới đây.Mình sẽ giải thích kĩ chức năng của từng phần ở bên dưới.Bạn hãy quan sát kĩ và ghi nhớ số thứ tự các vùng để tiện theo dõi nhé.

sử dụng Visual Studio Code ảnh 03

Làm quen với giao diện của Visual Studio Code

Vùng số 01 gọi là Activity Bar.Activity Bar bao gồm các icon đại diện cho các chức năng chính của trình soạn thảo code VSCode.Chức năng ẩn bên trong các icon này như sau :

  • Icon hình hai tờ giấy xếp chồng lên nhau : nhấn vào icon này thì vùng số 2 sẽ được thu ra đóng vào để tạo không gian tối đa cho các vùng khác.
  • Icon hình kính lúp : nhấn vào icon này sẽ giúp bạn tìm kiếm hoặc tìm kiếm thay thế kí tự trong toàn bộ tài liệu ở dự án hiện tại.Kết quả được hiển thị ở vùng số 2.
  • Icon biểu tượng Git : nhấn vào icon này thì vùng số 2 sẽ hiển thị những thay đổi bạn đã thực hiện trên các file.
  • Icon hình con bọ X : nhấn vào icon này vùng số 2 sẽ hiển thị ra nút để bạn tiến hành phân tích lỗi trên file.
  • Icon hình khối vuông tách rời : nhấn vào icon này vùng số 2 sẽ hiển thị những extension và theme của VSCode.

Hai icon dưới cùng là hai icon xuất hiện sau khi mình cài thêm một số extension nên bạn đừng thắc mắc sao không thấy nó khi cài đặt xong VSCode nhé.

Vùng số 2 gọi là Side Bar. Side Bar là nơi hiển thị những chức năng của VSCode tương ứng với từng icon của Activity Bar.Bạn hãy nhấn Command + B trên Mac hoặc Ctrl + B trên Window để đóng mở nhanh Side Bar này nhé.

Vùng số 3 gọi là Editor Bar. Editor Bar là nơi bạn thực hành viết code.Mặc định thì tùy theo từng ngôn ngữ mà code của bạn sẽ được thay đổi màu sắc text sao cho dễ nhìn.Sau này bạn có thể cài đặt thêm một số extension để hỗ trợ việc hiển thị và viết code.

Vùng số 4 gọi là Minimap.Minimap là nơi hiển thị thu nhỏ toàn bộ code của file bạn đang thao tác, bạn có thể di chuyển nhanh đến đoạn code mình mong muốn bằng cách kéo khoảng sáng trong Minimap đến đúng vị trí.

Vùng số 5 gọi là Panel. Panel là nơi hiển thị những thông tin như Problems,Output, Debug Console và Terminal.

Vùng số 6 gọi là Status Bar.Status Bar là nơi hiển thị thông tin ngắn gọn của file bạn đang thao tác như chủng loại file, encoding, tab space, số dòng con trỏ chuột đang trỏ tới…Bạn có thể thay đổi nhanh những thông tin này bằng cách nhấn vào chúng.

Cài đặt và xóa extension / theme cho Visual Studio Code

sử dụng Visual Studio Code ảnh 04

Cài đặt extension cho Visual Studio Code

Như nhiều trình soạn thảo code khác thì VSCode cũng cần phải cài đặt thêm một số extension để hoàn thiện chức năng của mình.Với số lượng extension đồ sộ mà VSCode đang sở hữu thì chắc chắn bạn sẽ tìm được extension phù hợp cho công việc của mình và nâng cao hiệu suất công việc.

Để cài đặt extension cho VSCode, ở Activity Bar bạn nhấn vào biểu tượng hình khối vuông tách rời.Trong Side Bar bạn hãy nhập vào khung tìm kiếm tên hoặc từ khóa liên quan tới extension mà bạn muốn cài đặt (1).

Lúc này toàn bộ extension liên quan đến từ khóa hay tên mà bạn đã nhập sẽ hiện ra (2).Bạn hãy chọn extension mà bạn mong muốn.Nếu còn phân vân và muốn tìm hiểu thêm về extension thì bạn hãy nhấn vào extension đó để thông tin của nó hiện ra (3).

Nếu ok rồi thì bạn hãy nhấn nút Install để tiến hành cài đặt, mọi thứ hoàn toàn tự động nên bạn yên tâm.Một số trường hợp bạn phải khởi động lại VSCode để extension đã cài đặt có hiệu lực.

sử dụng Visual Studio Code ảnh 05

Tùy chỉnh hiển thị các extension theo ý muốn

Nếu bạn muốn xem những thông tin liên quan đến extension như : những extension đã cài đặt, những extension phổ biến, những extension đã kích hoạt và vô hiệu hóa … thì bạn hãy nhấn vào icon hình dấu ba chấm góc trên cùng bên phải trong Side Bar (1).

Menu thông tin về extension sẽ hiển thị ra để bạn lựa chọn như hình trên.Bạn hãy chọn thông tin mà mình muốn biết tương ứng với menu (2).Để tắt tab thông tin hiển thị thông tin extension bạn hãy nhấn vào dấu X bên phải tab (3).

Ngoài ra bạn cũng có thể gõ từ khóa “Theme” vào khung tìm kiếm để lựa chọn những theme đẹp có sẵn trên thư viện của VSCode.

sử dụng Visual Studio Code ảnh 10

Xóa hoặc vô hiệu hóa extension đã cài đặt

Để xóa hoặc vô hiệu hóa extension / theme đã cài đặt bạn hãy chọn extension / theme muốn xóa hoặc vô hiệu bên trong Side Bar.Sau đó nhấn vào nó, thông tin về extension / theme sẽ hiện ra bên tab mới trong Editor Bar.

Ngay bên cạnh icon của extension / theme sẽ có hai nút đó là DisableUninstall.Bạn nhấn vào Disable để vô hiệu hóa extension / theme và nhấn vào Uninstall để xóa hẳn extension / theme khỏi VSCode.

Thêm folder hoặc file trong Visual Studio Code

sử dụng Visual Studio Code ảnh 07

Thêm file và folder vào trong dự án

Để thêm một dự án nào đó vào và bắt đầu làm việc với nó, bạn hãy kéo cả folder dự án vào trong Editor Bar và thả ra là xong.Toàn bộ file và folder trong dự án sẽ hiển thị phía bên Side Bar.

Side Bar  muốn chuyển qua làm việc với folder và file dự án thì trong Activity Bar bạn hãy nhấn vào icon hình hai tờ giấy xếp chồng lên nhau.Side Bar sẽ hiển thị ra những folder và file mà bạn đang thao tác.

Ở hình trên bạn có thấy mình khoanh đỏ một vùng gồm 4 icon không.Icon phía ngoài cùng bên trái sẽ giúp bạn thêm môt file mới và icon ngay bên cạnh sẽ giúp bạn thêm một folder.

Có cách khác để thêm file hoặc folder đó là trong Side Bar bạn nhấn chuột phải và chọn “New File” hoặc “New Folder“.Ngoài ra bạn có thể dùng phím tắt Ctrl + N trên Window hoặc Command + N trên Mac để thêm một file mới.

sử dụng Visual Studio Code ảnh 11

Thêm file sau khi khai báo tên file

Có một cách khác để thêm file vào trong dự án đó là khai báo tên file cùng đường dẫn rồi mới tạo ra file đó sau.Để thêm file theo cách này bạn hãy tạo ra đường dẫn giả định đến file, sau đó nhấn chuột trái vào đường dẫn đã tạo và nhấn giữ phím Command trên máy Mac hay Ctrl trên Window.

Một popup sẽ hiện ra xác nhận việc tạo file mới này có đúng hay không, nếu ok thì  nhấn nút Create File là file đó sẽ được tạo ra đúng tại vị trí theo như đường dẫn bạn đã khai báo.

Để xóa folder / file thì có hai cách.Cách số 1 là trong Side Bar bạn chuột phải lên folder / file rồi chọn Delete từ menu.Cách số 2 là vẫn trong Side Bar chuột trái chọn folder / file, sau đó nhấn tổ hợp phím tắt Command + Delete trên Mac và Ctrl +Delete trên Window.

Chia màn hình soạn thảo code

sử dụng Visual Studio Code ảnh 06

Thao tác với màn hình soạn thảo code

Đôi khi làm việc bạn sẽ phải thao tác với vài file cùng một thời điểm để nâng cao hiệu suất công việc.VSCode hỗ trợ bạn chia màn hình soạn thảo ngay trên giao diện của nó.

Bạn hãy nhấn vào icon hình cửa sổ ở góc trên cùng bên phải của màn hình soạn thảo code (1).Màn hình soạn thảo code sẽ tự động chia làm hai phần bằng nhau cho bạn.Nếu tiếp tục nhấn vào icon này thì màn hình sẽ tiếp tục được chia nhỏ hơn nữa.

Còn một cách nữa để chia nhỏ màn hình soạn thảo code đó là bạn nhấn vào đầu tab có chứa tên file bất kì (ví dụ ảnh trên là home.html) rồi kéo nó ra và di chuyển trong Editor Bar, lúc này sẽ xuất hiện vùng sáng riêng trong Editor Bar.Vùng sáng tối này đại diện cho mỗi màn hình làm việc khi chia nhỏ ra.

Kéo đến đúng vị trí mong muốn bạn hãy thả tay ra là lập tức màn hình Editor sẽ được chia nhỏ như ý bạn muốn.

Ngay bên dưới tên file đang mở trong vùng soạn thảo code bạn sẽ thấy một breadcrumbs hiển thị (2).Đây là những nút chính của code trong tài liệu, nhấn vào nút tương ứng bạn có thể di chuyển nhanh tới nút đó trên màn hình soạn thảo code.

Lưu lại tài liệu đã thao tác

sử dụng Visual Studio Code ảnh 12

Lưu lại tài liệu đã thao tác

Để lưu lại tài liệu thì không có gì khó cả, mình đoán bạn cũng nghĩ ngay tới tổ hợp phím Command + S hay Ctrl + S phải không.Đúng vậy đây là cách ai cũng sẽ sử dụng kể cả mình.

Cái mình muốn nói ở đây là về chức năng thông báo khi bạn thao tác mà chưa tiến hành lưu lại file đã thao tác của VSCode.Khi bạn thực hiện một thay đổi nào đó trên file mà quên chưa lưu thì sẽ có số màu trắng nền xanh dương đại diện cho số file bạn chưa lưu hiển thị ở góc dưới bên phải icon như hình trên.

Đồng thời những file chưa lưu sẽ xuất hiện dấu chấm tròn màu xám ở bên trên tab hiển thị tên file thay vì dấu X như thông thường.Qua đó bạn sẽ biết chính xác file nào là file bạn chưa lưu trữ lại sau khi thao tác.

Tìm kiếm và thay thế kí tự trong Visual Studio Code

sử dụng Visual Studio Code ảnh 13

Tìm kiếm và thay thế kí tự trong VSCode

Tổ hợp phím tìm kiếm nhanh :

  • Window : Ctrl + F
  • Mac : Command + F

Tổ hợp phím tìm kiếm và thay thế :

  • Mac : Command + Option + F

Có hai cách để bạn có thể tìm kiếm và thay thế kí tự trong VSCode.Cách đầu tiên là sử dụng phần tìm kiếm thay thế trong Side Bar.Bạn lưu ý là khi bạn tìm kiếm và thay thế ở trong Side Bar thì nó sẽ áp dụng lên toàn bộ các file có trong dự án của bạn nhé.

Cách thứ hai để tìm kiếm thay thế kí tự đó là sử dụng phần tìm kiếm thay thế kí tự trong Editor Bar.Cách này chỉ áp dụng cho những file bạn đang làm việc với nó mà thôi nên khá an toàn.

Trong Editor Bar bên cạnh ô input mà mình nhập text là WDI Blog ở trên có hai icon nhỏ bên cạnh.Icon bên trái sẽ giúp bạn thay thế từng kí tự một và icon bên phải sẽ giúp bạn thay thế toàn bộ kí tự có trong file.Trong Side Bar chỉ có một icon duy nhất đại diện cho việc thay thế toàn bộ kí tự mà thôi.

Kết luận

So với Brackets thì trình việc sử dụng Visual Studio Code phức tạp hơn nhưng hiệu quả mà nó mang lại thì quá tuyệt vời.Giao diện thân thiện được tổ chức khoa học với nhiều chức năng hay.

Hi vọng sau khi đọc xong bài viết này bạn sẽ làm quen được với những chức năng cơ bản nhất của trình soạn thảo code Visual Studio Code và gắn bó với nó trong tương lai.

Đây là trình soạn thảo code mà mình khuyên bạn nên dùng ngay nếu bạn muốn theo con đường lập trình viên chuyên nghiệp.

Bài viết sau

Tham khảo bài viết 

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
2 Comments
Cũ nhất
Mới nhất Voted nhiều nhất
Inline Feedbacks
View all comments
ngọc
ngọc
1 tháng trước

cảm ơn ad nhé, nó bổ ích lắm

2
0
Hãy cùng thảo luận về bài viếtx
()
x