Visual Studio Code – Một Text Editor hiện đại, đa năng

vscode-2021-hoadm_net-1200x630

Visual Studio Code là một Text Editor hiện đại, đa năng. Visual Studio Code là một công cụ không thể thiếu với các lập trình viên. Chúng ta hãy cùng cài đặt và xem qua những tiện ích mà VSC mang lại.

Tổng quan về Visual Studio Code

Visual Studio Code là một phần mềm mã nguồn mở, đa nền tảng, được phát triển vả phát hành bởi Microsoft. Trong bài viết về Text Editor (Một số người còn gọi là Code Editor) mình có phân biệt rõ về các IDE và Text Editor.

Visual Studio Code có thể xem là một Text Editor hiện đại, nó không tích hợp (integrate) quá nhiều thứ vào thời điểm ban đầu. Thay vào đó, các gói mở rộng (extensions) được phát hành kèm theo. Tùy theo nhu cầu, mục đích của người dùng, họ có thể cài đặt thêm các gói tương ứng.

Cài đặt và cấu hình

Cài đặt Visual Studio Code

Để cài đặt Visual Studio Code, các bạn có thể truy cập vào trang chủ. Hệ thống sẽ tự lựa chọn bản cài phù hợp nhất với hệ điều hành của bạn, nên bạn không cần lo lắng việc này nha.

Sau khi download được bản cài, các bạn chỉ cần để tất cả các lựa chọn mặc định. Chỉ cần liên tục bấm next, next và Ok là quá trình cài đặt đã thành công.

Cài đặt Extension cho Visual Studio Code

Để cài đặt extension mới, các bạn làm theo các bước như trong hình bên dưới

  1. Chuyển qua tab extension
  2. Tìm kiếm extension
  3. Chọn extension các bạn muốn cài
  4. Click vào button “install”
  5. Đọc kỹ phần hướng dẫn để có thể cấu hình phù hợp với extension

Cấu hình Visual Studio Code

Công việc cấu hình VSC cũng không có gì phức tạp. Khi các bạn cài 1 extension mới vào, các cấu hình mặc định sẽ được cung cấp sẵn. Các bạn chỉ cần nắm sơ sơ cấu hình file JSON là có thể thực hiện được hết.

Đối với mình, làm việc với VSC hầu hết ở tổ hợp phím “command + shift + P” (Windows thì các bạn đổi Ctrl thay thế command nha). Khi các bạn bấm tổ hợp phím này, một thanh search sẽ hiện lên, các bạn có thể tìm kiếm và thực thi bất kỳ câu lệnh, mở file cấu hình…vv

Và tùy thuộc lượng extensions các bạn cài, nhu cầu các bạn cần thì cấu hình sẽ hơi khác đôi chút. Các bạn chỉ cần nhớ tổ hợp phím phía trên và sau đó kiên nhẫn tìm kiếm là được.

Một số kịch bản mà mình thường sử dụng với Visual Studio Code

Các dự án đơn giản, gọn nhẹ

Thông thường, mình chỉ sử dụng Visual Studio Code cho các dự án nhỏ, ngắn hạn và không đòi hỏi các thao tác (debug) phức tạp. Rõ ràng, về các tính năng VSC mặc dù có kho extensions khổng lồ, cũng rất khó cạnh tranh được với các IDE tập trung vào 1 ngôn ngữ như PyCharm, PHPStorm… Tuy nhiên, với các các dự án vừa và nhỏ, VSC nhẹ nhàng và nhanh hơn rất nhiều, mỗi lần bắt đầu và thoát khỏi ứng dụng, bạn sẽ gần như không phải ngồi chờ.

Remote Code trên bo mạch Raspberry Pi

Khi làm việc với các bo mạch Raspberry Pi, đặc biệt là các phiên bản mới (Raspberry Pi 4). Có rất nhiều phương án để viết mã nguồn, xây dựng các dự án trên nó. Ví dụ: bạn có thể SSH vào, sử dụng command line, các editor của Linux như Vi, Vim, Nano… để lập trình. Hay đơn giản hơn, chúng ta có thể sử dụng các ứng dụng remote desktop, remote vào và làm việc. Còn nếu bạn có sẵn 1 màn hình, combo chuột + bàn phím thì chúng ta không còn gì để bàn nữa 🙂

Tuy nhiên, mình vẫn thích sử dụng extensions Visual Studio Code Remote Development để làm việc này. Thông qua giao thức SSH, Visual Studio Code sẽ ánh xạ thư mục dự án ở máy chủ (Raspberry Pi) lên máy của chúng ta (local). Và bạn có thể viết trực tiếp trên máy tính của bạn. Chỉ cần đường truyền với tốc độ bình thường, bạn sẽ không hề cảm thấy giật lag, cảm giác sẽ giống như bạn đang viết ứng dụng trực tiếp trên máy hiện tại.

Các extensions (gói mở rộng) hữu ích

Tới hiện tại (năm 2021), Visual Studio Code đang là một Text Editor rất phổ biến, được cộng động lập trình viên trên toàn thế giới yêu chuộng. Do đó, lượng extension cho phần mềm này là vô cùng lớn. Bạn có thể search “@popuplar” để tìm kiếm các extensions được sử dụng phổ biến nhất.

Các extensions trong danh sách này thật sự rất hữu ích. Tuy nhiên, để cụ thể hơn với mục đích của trang web, mình sẽ liệt kê 1 vài extensions phục vụ cho việc lập trình web mà mình đang sử dụng để các bạn tham khảo:

  • HTML Snippets: gợi ý, tự động điền các thẻ (tag) HTML, cũng như các thuộc tính mặc định của thẻ.
  • Material Icon Theme: Thay đổi icon của folder, file mặc định của Visual Studio Code. Style mặc định hơi khó sử dụng, nó khiến chúng ta dễ tạo folder/file nhầm chỗ.
  • HTML CSS Support: hỗ trợ viết code HTML nhanh hơn.
  • Live Sass Compiler: Hỗ trợ biên dịch Sass.
  • Live Server: giúp các dự án xây dựng giao diện trở nên nhanh hơn rất nhiều.
  • Vetur: Cho các dự án cần sử dụng VueJS.
  • Remote Development: Giúp chúng ta có thể viết code trực tiếp trên các máy chủ.