Visual Studio Code Guide

Hướng dẫn Visual Studio Code từ làm quen đến thuần thục chỉ trong 1 bài viết duy nhất.

Phát triển: Microsoft
Phát hành: 29/4/2015
Được viết bằng TypeScript, JavaScript, CSS
Hệ điều hành: Windows 7 hoặc mới hơn, OS X 10.10 hoặc mới hơn, Linux
Kích thước: Windows: 32.8 MB * Debian, Ubuntu: 34.1 MB * Fedora, Red Hat: 50.4 MB * macOS: 51.8 MB
Ngôn ngữ có sẵn: Tiếng Anh, tiếng Pháp, tiếng Đức, tiếng Ý, tiếng Nhật, tiếng Hàn, tiếng Nga, tiếng Tây Ban Nha, tiếng Trung Quốc (giản thể và phồn thể)
Thể loại: Source code editor, debugger
Trang chủ: Visual Studio Code

Nhắc đến IDE của Microsoft, ai cũng sẽ nghĩ đến Visual Studio chuyên dung cho C, C#, ASP.NET, những ngôn ngữ, framework của Microsoft phát triển. Microsoft tạo ra Visual Studio Code là IDE hỗ trợ cho các ngôn ngữ, framework khác. Sản phẩm nhanh chóng được cộng đồng yêu thích vì những ưu điểm:

_ Dung lượng nhẹ.
_ Giao diện quen thuộc, tương tự Sublime Text.
_ Nhiều Extension hỗ trợ highlight code, syntax.
_ Hoàn toàn miễn phí, không cần bẻ crack.

Nói ngắn gọn, Visual Studio Code là sản phẩm nâng cấp rõ rệt của Sublime Text.

Tại sao tôi làm quen được với Visual Studio Code?

Khi tôi đi học khóa NodeJS ở trung tâm tin học Khoa Phạm, thầy đã sử dụng Visual Studio Code. Thứ mà tôi thích nhất khi mới dùng đó là màu sắc giao diện và bảng Terminal phía dưới. Kế đến là việc nó nhẹ hơn nhiều so với PHPStorm – IDE chuyên dụng của tôi khi code PHP và JavaScript. Và sau này, tôi biết đến các Extension xóa dòng thừa, khoảng cách thừa và download các extension dùng để highlight code nào cần thiết.

Thay đổi theme

File -> Preferences -> Color Theme

Các phím nóng thường dùng

  • [Ctrl+P] Mở file mới
  • [Ctrl+Shilf+N] Mở cửa số Visual Studio Code mới
  • [Ctrl+ `] Mở Terminal

Hướng dẫn cách bỏ dòng thừa, khoảng trống cuối dòng.

Hướng dẫn Visual Studio Code

Trong code của bạn có thể sẽ có những khoảng cách thừa cuối dòng, những dòng trống được bấm vào vài space hoặc tab hay cuối file có cả chục dòng trống. Hãy download 2 Extension Blank Line at the End of File và Blank Line Organizer.

Bạn thử chọn 1 file code bất kỳ, xuống cuối file Enter tạo dòng thừa rồi Save file. Hiện tượng chớp chớp giựt giựt hiện ra do nó vừa phải xóa tất cả dòng thừa, vừa phải tạo 1 dòng mới cuối file.

Vào File -> Preferences -> Setting. Ở nút góc trên phải, chọn Open setting.json để mở file setting.json

Hướng dẫn Visual Studio Code

Copy đoạn code sau vào USER SETTING

{
“editor.renderWhitespace”: “all”,
“editor.wordWrap”: “on”,

“files.insertFinalNewline”: true,
“files.trimTrailingWhitespace”: true,
“files.eol”: “\n”,

“blankLine.removeExtraLines”: false,

“git.enabled”: false,
“window.zoomLevel”: 0,
“editor.rulers”: [120],
}

Hướng dẫn Visual Studio Code

Quay lại file code, Enter xuống dòng cuối file và tạo nhiều khoảng cách cuối dòng rồi Save để xem kết quả.

Mẹo: thậm chí bạn cũng không cần download 2 Extension Blank Line at the End of File và Blank Line Organizer. Chỉ cần lưu code JSON của Blank Line at the End of File này là đủ. Copy đoạn JSON này của Blank Line at the End of File và dán vào USER SETTING là vẫn tự động bỏ dòng trắng, chừa dòng trống cuối file và bỏ khoảng cách thừa cuối dòng.

Hướng dẫn Visual Studio Code

Tự động lưu file

Hướng dẫn Visual Studio Code

Nếu bạn không muốn bấm Ctrl+S mỗi khi chỉnh sửa file, hãy vào Setting -> Auto Save -> after delay. Chỉ cần ngưng code 1 giây là file sẽ tự động lưu.

Leave a Comment