Màn hình giới thiệu của Visual Studio
Màn hình chứa bảng lệnh có sẵn mà bạn cần
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ảng tổng hợp phím tắt trong Visual Studio
Gõ các lệnh edit và term sau khoảng trắng sẽ hiển thị một danh sách được thả xuống
Đ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
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 directory code . # open the current directory in the most recently used code window code -r . # create a new window code -n # change the language code --locale=es # open diff editor code --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions .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.
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
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ữ)
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.
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 đặt
Thêm xác thực JSON
Tạo đoạn trích
Cài đặt tiện ích mở rộng
Thay đổi theme
Keymaps
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
"editor.fontSize": 18, "terminal.integrated.fontSize": 14, "[Log]": { "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"Format on save
"editor.formatOnSave": trueFormat on paste
"editor.formatOnPaste": trueChange the size of Tab characters Spaces 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ữ.
"[languageid]": { }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": [ { "fileMatch": [ "/bower.json" ], "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": [ { "fileMatch": [ "/foo.json" ], "url": "./myschema.json" } ]hoặc một lược đồ tùy chỉnh
"json.schemas": [ { "fileMatch": [ "/.myconfig" ], "schema": { "type": "object", "properties": { "name" : { "type": "string", } } } },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
Danh sách cộng động: awesome-vscode
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.
Files và folders
Tích hợp thiết bị đầu cuối
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
Nhấn Esc 2 lần để thoát Zen Mode
Chỉnh sửa Side by side
Phím tắt: Ctrl+
Bạn cũng có thể ké/thả các nhóm editor giữa các nhóm.
Chuyển đổi giữa các editor
Phím tắt: Ctrl + 1, Ctrl + 2, Ctrl + 3
Di chuyển cửa sổ Explorer
Phím tắt: Ctrl + Shift + E
Mở hoặc tạo tệp
Đóng folder đang mở
Phím tắt: Ctrl + F4
Lịch sử điều hướng
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.
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ỏ
Để đặt con trỏ ở trên hoặc dưới vị trí hiện tại, hãy sử dụng:
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": [20, 40, 60] }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)
Sao chép dòng lên / xuống
Di chuyển dòng lên và xuống
Shrink / expand selection
Go to Symbol in File
Phím tắt: Ctrl + Shift + O
Bạn có thể nhóm các biểu tượng theo loại bằng cách thêm dấu hai chấm, @: .
Go to Symbol in Workspace
Phím tắt: Ctrl + T
Outline view
Khung nhìn Outline trong File Explorer (mặc định được thu gọn ở phía dưới) hiển thị cho bạn các ký hiệu của file hiện đang mở.
Điều hướng đến một dòng cụ thể
Phím tắt: Ctrl + G
Hoàn tác vị trí con trỏ
Phím tắt: Ctrl + U
Cắt khoảng trắng dấu
Phím tắt: Ctrl + K Ctrl + X
Chuyển đổi lệnh văn bản
Bạn có thể thay đổi văn bản đã chọn thành chữ hoa, chữ thường và trường hợp tiêu đề bằng các lệnh Transform từ Command Palette.
Định dạng mã
Mã nguồn được chọn hiện tại: Ctrl + K Ctrl + F
Toàn bộ định dạng tài liệu: Shift + Alt + F
Code formatting
Bạn cũng có thể fold / unfold tất cả các vùng trong trình chỉnh sửa bằng Fold All (Ctrl + K Ctrl + 0) và Unfold All (Ctrl + K Ctrl + J).
Chọn dòng hiện tại
Phím tắt: Ctrl + L
Điều hướng đến đầu và cuối tệp
Mở xem trước Markdown
Trong tệp Markdown, sử dụng
Phím tắt: Ctrl + Shift + V
Chỉnh sửa và xem trước Markdown
Trong tệp Markdown, sử dụng
Phím tắt: Ctrl + K V
Bản xem trước và trình chỉnh sửa sẽ đồng bộ hóa với cuộn của bạn trong cả hai chế độ xem.
IntelliSense
Ctrl + Space để kích hoạt Suggestions widget.
Bạn có thể xem các phương thức có sẵn, gợi ý tham số, tài liệu ngắn, v.v.
Peek
Chọn một biểu tượng sau đó nhập Alt + F12 . Ngoài ra, bạn có thể sử dụng menu ngữ cảnh.
Go to Definition
Go to References
Chọn một biểu tượng sau đó nhập Shift + F12. Ngoài ra, bạn có thể sử dụng menu ngữ cảnh.
Thủ thuật – Rename Symbol
Chọn một biểu tượng rồi nhấn F2. Bạn cũng có thể sử dụng menu ngữ cảnh để thao tác.
Thủ thuật – tìm kiếm và sửa đổi
Bên cạnh việc tìm kiếm và thay thế các biểu thức, bạn cũng có thể tìm kiếm và sử dụng lại các phần của những gì đã khớp, sử dụng các biểu thức thông thường với các nhóm capturing. Bật biểu thức chính quy trong hộp tìm kiếm bằng cách nhấp vào nút Use Regular Expression .* và sau đó viết biểu thức chính quy và sử dụng dấu ngoặc đơn để xác định nhóm. Sau đó bạn có thể tái sử dụng các nội dung phù hợp trong mỗi nhóm bằng cách sử dụng $1, $2 vv trong Replace field.
.eslintrc.json
Cài đặt Extension ESLint . Cấu hình linting theo cách bạn muốn. Tham khảo ESLint specification để biết chi tiết về các quy tắc và tùy chọn linting..
Đây là cấu hình để sử dụng ES6.
{ "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "classes": true, "defaultParams": true } }, "rules": { "no-const-assign": 1, "no-extra-semi": 0, "semi": 0, "no-fallthrough": 0, "no-empty": 0, "no-mixed-spaces-and-tabs": 0, "no-redeclare": 0, "no-this-before-super": 1, "no-undef": 1, "no-unreachable": 1, "no-use-before-define": 0, "constructor-super": 1, "curly": 0, "eqeqeq": 0, "func-names": 0, "valid-typeof": 1 } }Gói .json
Xem IntelliSense cho package.json tệp của bạn.
Cú pháp Emmet
Support for Emmet syntax
Snippets
Tạo snipptes tùy chỉnh
"create component": { "prefix": "component", "body": [ "class $1 extends React.Component {", "", "trender() {", "ttreturn ($2);", "t}", "", "}" ] },Diff
Chọn tệp để mở từ khung Source Control.
Thủ thuật tích hợp Git
Phím tắt: Ctrl + Shift + G
Tích hợp Git đi kèm với VS Code “out-of-the-box”. Bạn có thể cài đặt các nhà cung cấp SCM khác từ Marketplace. Phần này mô tả tích hợp Git nhưng phần lớn giao diện người dùng và cử chỉ được chia sẻ bởi các nhà cung cấp SCM khác.
Khác biệt
Từ khung nhìn Source Control, chọn mở một tệp để khác.
Hoặc, nhấp vào nút Open changes ở góc trên bên phải để tìm tệp mở hiện tại.
Thủ thuật chuyển đổi Inline View
Chế độ xem mặc định cho diffs là chế độ xem side by side .
Chuyển đổi Inline View bằng cách nhấp vào nút More Action(…) ở trên cùng bên phải và chọn Toggle Inline View.
Nếu bạn thích chế độ Inline View, bạn có thể đặt “diffEditor.renderSideBySide”: false.
Thủ thuật xem lại khung
Điều hướng qua các khác biệt với F7 và Shift + F7. Điều này sẽ trình bày chúng trong một định dạng patch thống nhất. Các dòng có thể được điều hướng bằng các phím mũi tên và nhấn Enter sẽ nhảy trở lại trong trình chỉnh sửa khác và dòng đã chọn.
Thủ thuật – chỉnh sửa các thay đổi đang chờ xử lý
Bạn có thể chỉnh sửa trực tiếp trong các thay đổi đang chờ xử lý của chế độ diff view.
Branches
Dễ dàng chuyển đổi giữa các nhánh Git thông qua Status Bar.
Staging
Thủ thuật – thay đổi Staging File
Di chuột qua số lượng tệp và nhấp vào nút dấu cộng.
Nhấp vào nút trừ để thay đổi giai đoạn.
Stage selected
Stage selected một phần của fle bằng cách chọn file đó (sử dụng phím mũi tên Lên) sau đó chọn Stage Selected Ranges từ Command Palette.
Undo last commit
Nhấp vào nút (…) và sau đó chọn Undo last commit để hoàn tác commit trước đó. Các thay đổi được thêm vào phần Staged Changes.
See Git output
VS Code giúp dễ dàng xem các lệnh Git đang thực sự chạy. Điều này hữu ích khi học Git hoặc gỡ lỗi một vấn đề kiểm soát nguồn khó khăn.
Sử dụng lệnh Toggle Output ( Ctrl + Shift + U) và chọn Git trong trình đơn thả xuống.
Gutter indicators
Thủ thuật – giải quyết vấn đề xung đột
Bạn có thể giải quyết xung đột hợp nhất với CodeLens nội tuyến cho phép bạn Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes.
Đặt VS Code làm công cụ hợp nhất mặc định
git config --global chúng tôi vscode git config --global chúng tôi 'code --wait $MERGED'Đặt VS Code làm diff tool mặc định
git config --global chúng tôi vscode git config --global chúng tôi 'code --wait --diff $LOCAL $REMOTE'Debugging
Cấu hình trình Debugging
Breakpoints and stepping through
Đặt breakpoints bên cạnh số dòng. Điều hướng về phía trước Debug widget.
Kiểm tra dữ liệu
Kiểm tra các biến trong bảng Run và trong Panel control.
Inline values
Bạn có thể đặt “debug.inlineValues”: true để xem các giá trị biến trong inline debugger. Tính năng này có thể tốn thời gian và có thể làm chậm công việc, do đó mặc định tính năng này bị tắt.
Logpoints
Logpoints hoạt động giống như các điểm dừng nhưng thay vì tạm dừng debugger khi chúng bị tấn công, chúng sẽ ghi thông báo vào panel control. Thủ thuật này đặc biệt hữu ích cho việc ghi nhật ký trong khi gỡ lỗi các máy chủ không thể sửa đổi hoặc tạm dừng.
Thêm một Logpoints bằng lệnh Add Logpoint bên trái trình soạn thảo và nó sẽ được hiển thị dưới dạng biểu tượng hình “diamond”. Log messages là văn bản thuần túy nhưng có thể bao gồm các biểu thức được đánh giá trong dấu ngoặc nhọn (‘{}’).
Task runner
Auto detect tasks
Chọn Terminal từ menu cấp cao nhất, chạy lệnh Configure Tasks, sau đó chọn loại tác vụ bạn muốn chạy. Điều này sẽ tạo ra một tasks.json tập tin với nội dung như sau. Xem tài liệu để biết thêm chi tiết.
{ "version": "2.0.0", "tasks": [ { "type": "npm", "script": "install", "group": { "kind": "build", "isDefault": true } } ] }Đôi khi có vấn đề với thế hệ tự động. Kiểm tra các tài liệu để làm cho mọi thứ hoạt động đúng.
Thủ thuật – chạy các tác vụ từ menu Terminal
Chọn Terminal từ menu cấp cao nhất, chạy lệnh Run Task và chọn tác vụ bạn muốn chạy. Chấm dứt tác vụ đang chạy bằng cách chạy lệnh Terminate Task
Xác định các phím tắt cho các tác vụ
Bạn có thể xác định một phím tắt cho bất kỳ tác vụ. Từ Command Palette ( Ctrl + Shift + P), chọn Preferences: Open Keyboard Shortcuts File , liên kết phím tắt mong muốn với workbench.action.tasks.runTask lệnh và xác định Task là args.
Ví dụ: để liên kết Ctrl + H với Run tests tác vụ, hãy thêm vào như sau:
{ "key": "ctrl+h", "command": "workbench.action.tasks.runTask", "args": "Run tests" }Chạy npm scripts dưới dạng tasks from the explorer
Với cài đặt npm.enableScriptExplorer, bạn có thể kích hoạt Explorer hiển thị các tập lệnh được xác định trong workspace của bạn.
Từ Explorer, bạn có thể mở một script trong trình soạn thảo, chạy nó như một tác vụ và khởi chạy nó với trình gỡ lỗi nút (khi tập lệnh xác định tùy chọn gỡ lỗi như thế nào -inspect-brk). Hành động mặc định khi nhấp là để mở tập lệnh. Để chạy tập lệnh chỉ bằng một cú nhấp chuột, hãy đặt npm.scriptExplorerAction thành “run”. Sử dụng cài đặt npm.exclude để loại trừ các tập lệnh trong package.json các tệp có trong các thư mục cụ thể.
Với cài đặt npm.enableRunFromFolder, bạn có thể kích hoạt để chạy các tập lệnh npm từ menu ngữ cảnh của Explorer cho một thư mục. Cài đặt cho phép lệnh NPM Script in Folder… khi thư mục được chọn. Lệnh hiển thị danh sách Quick Pick các tập lệnh npm có trong thư mục này và bạn có thể chọn tập lệnh sẽ được thực thi dưới dạng task.
Portable mode (Chế độ di động)
VS Code có Portable mode cho phép bạn giữ các cài đặt và dữ liệu ở cùng vị trí với cài đặt của bạn, ví dụ: trên ổ USB.
Insiders builds (bản thử nghiệm)
Dành cho người dùng sớm: các bản insiders có các thay đổi để người dùng và người viết được dùng thử
Bản dựng thường xuyên: Bản cập nhật mỗi ngày với các tính năng sửa lỗi mới nhất.
Cài đặt song song: Người dùng nội bộ cài đặt bên cạnh bản ổn định cho phép bạn sử dụng độc lập.