Hướng dẫn sử dụng visual studio code

-

Những thủ thuật trong bài viết này sẽ giúp cho bạn sử dụng Visual Studio để code phần mềm được thông minh, gọn gàng và sạch sẽ hơn. Thông qua bài viết này, bạn sẽ được làm quen với các tính năng chỉnh sửa, kiểm soát mã nguồn mạnh mẽ và thông minh, cùng những phím tắt hữu ích. Để có cái nhìn tổng quan về chủ đề này bạn hãy tham khảo thêm bài viết hướng dẫn bắt đầu và hướng dẫn sử dụng.Bạn đang xem: Hướng dẫn sử dụng visual studio code, mẹo và thủ thuật visual studio code

Nếu bạn chưa có Visual Studio Code hãy tải tại đây

 Cơ bản

Màn hình giới thiệu của Visual Studio


*

Phía dưới cùng bên phải của màn hình giới thiệu có liên kết tới trang giúp bạn có thể tương tác và thử các tính năng cơ bản của Visual Studio. Help > Interactive Playground


*

*

Default keyboard shortcuts (phím tắt mặc định)

Tất cả lệnh nằm trong Command Palette đều có sự liên kết ràng buộc với key (nếu nó tồn tại). Nếu bạn quên một lệnh nào đó, có thể dùng Command Palette để tìm lệnh bạn cần.

Bạn đang xem: Hướng dẫn sử dụng visual studio code


*

*

Điều hướng giữa các tệp được mở gần đây

Lặp lại phím tắt Quick Open để xoay vòng nhanh giữa các tệp được mở gần đây.

Mở nhiều file từ Quick Open

Bạn có thể mở nhiều file từ Quick Open bằng cách nhấn phím mũi tên bên phải. Thao tác này sẽ mở file được chọn trong nền và bạn có thể tiếp tục chọn file từ Quick Open.

Điều hướng giữa các Folder được mở gần đây và không gian làm việc(workspaces)

Open Recent

Phím tắt: Ctrl+R

Màn hình chọn nhanh (Quick Pick) thả xuống với danh sách File > Open Recent với các Folder và Workspaces được mở gần đây.

Code

Code VS (Visual Studio) có giao diện dòng lệnh mạnh mẽ (CLI) cho phép bạn tùy chỉnh cách khởi chạy trình chỉnh sửa để hỗ trợ các tình huống khác nhau.

# open code with current directorycode .# open the current directory in the most recently used code windowcode -r .# create a new windowcode -n# change the languagecode --locale=es# open diff editorcode --diff # open file at specific line and column code --goto package.json:10:5# see help optionscode --help# disable all extensionscode --disable-extensions .

Folder .vscode

Các file cụ thể của workspaces nằm trong một .vscode folder root.

Ví dụ: tasks.json đối với Task Runner và launch.json cho debugger.

Status Bar

Lỗi và cảnh báo

Phím tắt: Ctrl + Shift + M

Nhanh chóng nhảy đến phần cảnh báo và lỗi bên trong project

Chuyển qua lại các lỗi với F8 hoặc Shift + F8


Bạn có thể lọc các vấn đề theo loại (‘errors’, ‘warnings’) hoặc khớp văn bản.

Thủ thuật – Change language mode (Chế độ thay đổi ngôn ngữ)

Phím tắt: Ctrl + KM


Nếu bạn muốn duy trì ngôn ngữ mới cho file đó, bạn có thể sử dụng lệnh Configure File Association for liên kết để mở rộng file hiện tại với ngôn ngữ đã được cài.

Customization

Có rất nhiều điều bạn có thể làm để tùy chỉnh code VS.

Thay đổi theme

Thay đổi phím tắtĐiều chỉnh cài đặtThêm xác thực JSONTạo đoạn tríchCài đặt tiện ích mở rộng

Thay đổi theme

Phím tắt: Ctrl + K hoặc Ctrl + T


Bạn có thể cài đặt thêm các chủ đề từ phần mở rộng của VS Marketplace.

Ngoài ra, bạn có thể cài đặt và thay đổi chủ đề của icon file của mình


Keymaps

Bạn đã quen với các phím tắt từ một trình soạn thảo khác? Bạn có thể cài đặt tiện ích mở rộng Keymap mang các phím tắt từ trình chỉnh sửa yêu thích của bạn sang VS. Preferences > Keymap Extensions để xem danh sách hiện tại trên Marketplace. Một số phần mở rộng phổ biến:

Tùy chỉnh phím tắt của bạn

Phím tắt: Ctrl + K Ctrl + S


Bạn có thể tìm kiếm các phím tắt và thêm các tổ hợp phím của riêng bạn vào file keybindings.json.


Điều chỉnh cài đặt của bạn

Theo mặc định, VS hiển thị trình chỉnh sửa Settings, bạn có thể tìm thấy các cài đặt được liệt kê bên dưới trong thanh tìm kiếm, nhưng vẫn có thể chỉnh sửa settings.json file bên dưới bằng cách sử dụng lệnh Open Settings (JSON) hoặc bằng cách thay đổi trình chỉnh sửa cài đặt mặc định của mình bằng cài đặt workbench.settings.editor.

Mở User setting settings.json

Phím tắt: Ctrl +,

Thay đổi phông chữ của các thành phần UI khác nhau

// Main editor"editor.fontSize": 18,// Terminal panel"terminal.integrated.fontSize": 14,// Output panel"": { "editor.fontSize": 15}Thay đổi mức thu phỏng

"window.zoomLevel": 5Phông chữ

"editor.fontFamily": "Fira Code","editor.fontLigatures": trueTips: Bạn sẽ cần cài đặt phông chữ hỗ trợ chữ ghép chứ. FiraCode là phông chữ phổ biến trong nhóm VS Code


Auto Save

"files.autoSave": "afterDelay"Bạn cũng có thể chuyển Auto Save từ menu cấp cao nhất với File > Auto Save.

Xem thêm: Ngân Hàng Câu Hỏi Trắc Nghiệm Excel, Câu Hỏi Trắc Nghiệm Excel 2010 Có Đáp Án

Format on save

"editor.formatOnSave": trueFormat on paste

"editor.formatOnPaste": trueChange the size of Tab characters

"editor.tabSize": 4Spaces or Tabs

"editor.insertSpaces": trueRender whitespace

"editor.renderWhitespace": "all"Các ký tự Whitespaces được hiển thị theo mặc định trong lựa chọn văn bản

Ignore files/folders (bỏ qua các file/folder)

Xóa các file/folder khỏi cửa sổ soạn thảo

"files.exclude": { "somefolder/": true, "somefile": true}Xóa các file/folder khỏi kết quả tìm kiếm

"search.exclude": { "someFolder/": true, "somefile": true}Và nhiều tùy chỉnh khác

Cài đặt ngôn ngữ cụ thể

Đối với các cài đặt mà bạn chỉ muốn cho các ngôn ngữ cụ thể, bạn có thể cài đặt theo mã định danh ngôn ngữ. Bạn có thể tìm thấy danh sách các id ngôn ngữ thường được sử dụng trong tham chiếu Định danh ngôn ngữ.

"": {}Tips: Bạn cũng có thể tạo cài đặt cụ thể cho ngôn ngữ bằng lệnh Configure Language Specific Settings.


Thêm xác thực JSON

Được bật theo mặc định cho nhiều loại tệp. Tạo lược đồ và xác nhận của riêng bạn trong settings.json

"json.schemas": , "url": "https://json.schemastore.org/bower" }>hoặc cho một lược đồ được xác định trong không gian làm việc của bạn

"json.schemas": , "url": "./myschema.json" }>hoặc một lược đồ tùy chỉnh

Tiện ích mở rộng

Phím tắt: Ctrl + Shift + X

Tìm extensions

Tìm kiếm bên trong VS Code trong giao diện Extensions.Lời khuyên tiện ích mở rộng

Cài đặt tiện ích mở rộng

Trong chế độ xem Extensions, bạn có thể tìm kiếm thông qua thanh tìm kiếm hoặc nhấp vào nút More Actions (…) để lọc và sắp xếp số lượt cài đặt.


Extensions được gợi ý

Trong giao diện Extensions, nhấp vào Show Recommended Extensions trong More Actions (…)


Tạo extension của riêng bạn

Bạn có quan tâm đến việc tạo phần mở rộng của riêng bạn? Bạn có thể tìm hiểu các thực hiện trong Extension API documentation, và tài liệu đặc biệt documentation on contribution points.

configurationcommandskeybindingslanguagesdebuggersgrammarsthemessnippetsjsonValidation

Files và folders

Tích hợp thiết bị đầu cuối

Phím tắt: Ctrl + `


Thanh bên

Phím tắt: Ctrl + B


Chuyển đổi Panel

Phím tắt: Ctrl + J

Zen Mode

Phím tắt: Ctrl + KZ


Liên kết tệp tin

Tạo các liên kết ngôn ngữ cho các tệp không được phát hiện chính xác. Ví dụ: nhiều tệp cấu hình có phần mở rộng tập tùy chỉnh thực sự là JSON

"files.associations": { ".database": "json"}Ngăn chặn viết lỗi

VS code sẽ hiển thị cho bạn một thông báo lỗi khi bạn cố lưu một tệp không thể lưu được vì nó đã thay đổi trên ổ đĩa. Khối VS code lưu tệp để ngăn các thay đổi ghi đè đã được thực hiện bên ngoài trình chỉnh sửa.

Để giải quyết xung đột, nhấp vào hành động Compare trong thông báo lỗi để mở trình chỉnh sửa khác biệt sẽ hiển thị cho bạn nội dung của tệp trên đĩa (bên trái) so với nội dung trong VS code (bên phải)


Sử dụng các hành động trong thanh công cụ biên tập để giải quyết xung đột. Bạn có thể Accept các thay đổi của mình và do đó ghi đè mọi thay đổi trên ổ đĩa hoặc Revert  về phiên bản trên ổ đĩa. Revert có nghĩa là những thay đổi của bạn sẽ bị mất.

Lưu ý: Tệp sẽ vẫn bị lỗi và không thể lưu cho đến khi bạn chọn một trong hai hành động để giải quyết xung đột.

Editing hacks

Dưới đây là một lựa chọn các tính năng phổ biến để chỉnh sửa Code. Nếu các phím tắt không phù hợp với bạn, hãy xem xét việc cài đặt extension cho trình chỉnh sửa cũ của bạn.

Tips: Bạn có thể thấy các extension key map được đề xuất trong chế độ xem extension với Ctrl + K Ctrl + M để lọc tìm kiếm recommended:keymaps.

Lựa chọn nhiều con trỏ

Để thêm con trỏ vào các vị trí tùy ý, chọn một vị trí bằng chuột và sử dụng Alt + Click (Option + click macOS).

Để đặt con trỏ ở trên hoặc dưới vị trí hiện tại, hãy sử dụng:

Phím tắt: Ctrl + Alt + Up hoặc Ctrl + Alt + Down


Bạn có thể thêm con trỏ bổ sung cho tất cả các lần xuất hiện của các lựa chọn hiện tại với phím tắt Ctrl + Shift + L.


Lưu ý: Bạn cũng có thể thay đổi công cụ sửa đổi thành Ctrl / Cmd để áp dụng nhiều con trỏ với editor.multiCursorModifier setting . Xem Công cụ Multi-cursor Modifier để biết chi tiết.

Nếu bạn không muốn thêm tất cả các lần xuất hiện của lựa chọn hiện tại, bạn có thể sử dụng Ctrl + D thay thế. Điều này chỉ chọn lần xuất hiện tiếp theo sau lần bạn chọn để bạn có thể thêm từng lựa chọn một.


Column (box) selection

Bạn có thể chọn các khối văn bản bằng cách giữ Shift + Alt (Shift + Option trên macOS) trong khi bạn kéo chuột. Một con trỏ riêng sẽ được thêm vào cuối mỗi dòng được chọn.


Bạn cũng có thể sử dụng phím tắt để kích hoạt lựa chọn cột.

{ "editor.rulers": }
Vertical rulers

Nhấn phím Alt cho phép cuộn nhanh trong trình chỉnh sửa và Explorers. Theo mặc định, cuộn nhanh sử dụng hệ số nhân tốc độ 5X nhưng bạn có thể điều khiển hệ số nhân với cài đặt Editor: Fast Scroll Sens Sens (editor.fastScrollSensitivity)