Visual Studio Code là gì? Là một công cụ “Code Editing” mới được Microsoft phát hành  từ 2015. Một trong những lựa chọn hàng đầu của front-end developer trong việc quản lý code, editing hay debug và tôi là một trong số đó.

Trong những năm qua, tôi đã sử dụng một loạt các Code Editor khác nhau; TextMate, Coda, Sublime Text, Atom, và mỗi cái có những ưu điểm và nhược điểm khác nhau. Tuy nhiên, Visual Studio Code thì tôi đã hoàn toàn bị thuyết phục và sử dụng tới giờ :D, chúng ta hãy xem một số tính năng của nó.

Bắt đầu bằng cách tải về phiên bản cho hệ thống của bạn (Windows, Mac OS, Linux) tại code.visualstudio.com (dĩ nhiên là nó miễn phí).

Một trong những lý do tôi rất thích Visual Studio Code là giao diện của nó – nó thực sự đơn giản. Trong những năm đầu mới ra mắt VSCode thực sự nhẹ nhưng trong những bản update mới đây nó được bổ xung thêm nhiều tính năng hay ho và tất nhiên nó nặng hơn kha khá, đừng lo vẫn không là gì so với các IDE khác.

Nó có một vài thanh sidebar, mà có thể được bố trí bên trái hoặc bên phải theo ý thích của bạn. Cái đầu tiên cung cấp cho bạn một số biểu tượng để chuyển đổi giữa các bảng điều khiển. Từ Explorer, Search, Git, Debug, và Extensions. Vào View để thay đổi kiểu hiển thị (full screen, zen mode, vân vân).

Di chuyển chuột lên trên Explorer nó sẽ cung cấp cho chúng ta một vài lựa chọn: New File, New Folder, Refresh và Collapse All. Nhấp chuột phải mang đến một menu ngữ cảnh.

Nhấn Shift-Command-P để bật Command Palette.

Trong bảng điều khiển này bạn có thể tìm kiếm bất cứ điều gì bạn thích ví dụ như những hành động nhanh chóng và dễ dàng; lệnh Git, thay đổi theme, cài đặt extension—đều có thể được thực hiện thông qua Command Palette.

Tương tự, Command-P sẽ bật bảng Go to file….

Nhấn Command-` (Mac) sẽ mở terminal tích hợp sẵn, cái mà tôi rất thích.

Điều này sẽ mở ra terminal trực tiếp trong thư mục gốc của dự án của bạn, giúp bạn tiết kiệm việc phải điều chuyển. Nhấp vào dấu + mở thêm cửa sổ terminal có thể được hoán đổi từ menu thả xuống. Tất cả điều này cung cấp một tính năng thực sự hữu ích, đặc biệt là nếu bạn sử dụng compiler khi viết code.

Một tính năng khác mà tôi là một fan hâm mộ lớn là sự tích hợp Git. Những thay đổi bạn thực hiện trong các tập tin của bạn được đánh dấu khác để bạn biết chính xác những gì đang xảy ra:

Trong hình ở trên, bạn có thể thấy thanh thông báo nói với tôi một sự thay đổi chưa được commit, sự thay đổi được liệt kê trong bảng điều khiển Git, và một dòng đánh dấu chỉ cho tôi nơi thay đổi trong chính tập tin.

VSC cũng sẽ hiển thị phiên bản so sánh nằm cạnh nhau, chỉ để cho thêm rõ ràng.

Các lệnh Git tiêu chuẩn khác chẳng hạn như sync, pull, và vân vân, có sẵn trong bảng điều khiển Git.

Tin tốt: Emmet đã được tích hợp vào VSC. Không cần cài đặt hoặc cấu hình, bạn chỉ cần bắt đầu sử dụng nó (với Tab là phím nóng mặc định để kích hoạt các đoạn snippet của bạn) ngay sau khi bạn mở editor.

Khi bạn đánh dấu một mẫu code trong tập tin của bạn, VSC sẽ tự động đánh dấu tất cả các chuỗi tương tự. Bạn có thể nhấn Command-D để thêm một con trỏ đến phần tiếp theo, hoặc Shift-Command-L để thêm một con trỏ đến tất cả trường hợp. Chỉnh sửa hàng loạt, một cách dễ dàng.

Trang cài đặt trong VSC là rất trực quan. Giống như Sublime Text, các thiết lập được lưu trữ trong một tập tin (JSON trong trường hợp này) cho phép bạn duyệt qua tất cả các giá trị mặc định. Bằng cách nhấn vào biểu tượng edit bên cạnh mỗi cài đặt, bạn sẽ sao chép nó vào một tập tin tùy biến, nơi bạn có thể tạo ra thay đổi:

Nhấn Save và xem các thay đổi có hiệu lực ngay lập tức.

IntelliSense là một tính năng bên trong VSC mà tôi đã rất muốn thử ngay khi lần đầu tiên mở Editor. Đó là một tính năng tự động hoàn tác được cải tiến, trợ lý cú pháp và hơn những gì bạn mong đợi về tính năng này.

Di chuyển chuột lên trên CSS selector sẽ cung cấp cho bạn một ví dụ về cách bạn có thể sử dụng HTML tương ứng (rất hữu ích cho người mới bắt đầu):

Di chuyển chuột lên trên các thuộc tính sẽ hiện ra tài liệu hướng dẫn về những gì chúng thực hiện, và giá trị màu sắc được đưa vào một bảng màu nho nhỏ để cho bạn thấy chúng xuất hiện như thế nào trên màn hình. Những gợi ý khi bạn gõ code cũng cực kỳ tốt.

VSCode có kho extension rất lớn và chất lượng. Bạn có thể tham khảo và tải về các extension phục vụ mình tại đây

Theme

Với mình gắn bó với Sublime khá lâu nên rất quen với giao diện này, VSCode hoàn toàn phục vụ được “gu” của bạn với nhiều option khác nhau. Vào Code > Preferences > Color Theme sẽ mở ra (chắc là bạn đã đoán được) bảng theme. Di chuyển qua các mẫu và bạn sẽ thấy UI thay đổi tương ứng. Nhấn Enter để lưu những thay đổi.

Ngoài theme mặc định, còn có một marketplace rất lớn (hiện đang miễn phí) với các theme sẵn có, cộng với các extension với tất cả các thể loại để bạn thoả sức sử dụng.

Tổng kết

Đó chỉ là tổng hợp một số tính năng yêu thích của tôi trong Visual Studio Code, ngoài ra nó còn có rất nhiều, rất nhiều tính năng có sẵn để đề cập. Với kinh nghiệm của tôi trong việc sử dụng VSC đến nay, tôi chỉ có thể nói rằng nó rất tích cực. Trước đây tôi đã sử dụng Atom, và tôi không hối tiếc khi thực hiện một sự chuyển đổi. Tất nhiên, bạn có thể không đồng ý với tôi, nhưng theo ý kiến cá nhân của tôi, bạn sẽ không thất vọng khi tải về và dùng thử Code Editor này.