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. Show
Nếu bạn chưa có Visual Studio Code hãy tải tại đây
Màn hình giới thiệu của Visual Studio Nguồn: Visual Studio Code 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 Nguồn: Visual Studio Code
Màn hình chứa bảng lệnh có sẵn mà bạn cần Phím tắt: Ctrl + Shift + P Nguồn: Visual Studio Code
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. Nguồn: Visual Studio Code
Nguồn: Visual Studio Code Tải tại đây
Phím tắt: Ctrl + P Nguồn: Visual Studio Code Tips: Gõ ? để xem các lệnh đề xuất. Nguồn: Visual Studio Code 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 Nguồn: 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 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 --diff <file1> <file2> # open file at specific line and column <file:line[:character]> code --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions . Folder .vscodeCá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 BarLỗ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 Nguồn: Visual Studio Code Bạn có thể lọc các vấn đề theo loại (‘errors’, ‘warnings’) hoặc khớp văn bản.
Phím tắt: Ctrl + KM Nguồn: Visual Studio Code 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 theme Phím tắt: Ctrl + K hoặc Ctrl + T Nguồn: Visual Studio Code 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 Nguồn: Visual Studio Code 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 Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code Xem thêm Key Bindings for Visual Studio Code Đ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 "[Log]": { "editor.fontSize": 15 } Thay đổi mức thu phỏng "window.zoomLevel": 5 Phông chữ "editor.fontFamily": "Fira Code", "editor.fontLigatures": true Tips: 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 Nguồn: Visual Studio 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. Format on save "editor.formatOnSave": true Format on paste "editor.formatOnPaste": true Change the size of Tab characters "editor.tabSize": 4 Spaces or Tabs "editor.insertSpaces": true Render 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. Nguồn: Visual Studio Code 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", "description": "The name of the entry" } } } }, Xem thêm tài liệu JSON Tiện ích mở rộng Phím tắt: Ctrl + Shift + X Tìm extensions
Cài đặt tiện ích mở rộngTrong 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. Nguồn: Visual Studio Code Extensions được gợi ý Trong giao diện Extensions, nhấp vào Show Recommended Extensions trong More Actions (…) Nguồn: Visual Studio Code 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à foldersTích hợp thiết bị đầu cuối Phím tắt: Ctrl + ` Nguồn: Visual Studio Code Đọc thêm:
Thanh bênPhím tắt: Ctrl + B Nguồn: Visual Studio Code Chuyển đổi Panel Phím tắt: Ctrl + J Zen Mode Phím tắt: Ctrl + KZ Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code Chuyển đổi giữa các editor Phím tắt: Ctrl + 1, Ctrl + 2, Ctrl + 3 Nguồn: Visual Studio Code Di chuyển cửa sổ Explorer Phím tắt: Ctrl + Shift + E Mở hoặc tạo tệp Phím tắt: Windows (Ctrl + click) macOS (Cmd + click) Bạn có thể nhanh chóng mở tệp hoặc hình ảnh, tạo tệp mới bằng cách di chuyển con trỏ đến liên kết tệp và sử dụng Ctrl + click Nguồn: Visual Studio Code Đóng folder đang mở Phím tắt: Ctrl + F4 Lịch sử điều hướng
Nguồn: Visual Studio Code 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) Nguồn: Visual Studio Code 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 hacksDướ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 Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code Column (box) selectionBạ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. Nguồn: Visual Studio Code 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] } Nguồn: Visual Studio Code Vertical rulers Nhấn phím Altcho 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ốngPhím tắt: Shift + Alt + Up hoặc Shift + Alt + Down Các lệnh Sao chép dòng lên / xuống không bị ràng buộc trên Linux vì các tổ hợp phím mặc định của VS sẽ xung đột với các tổ hợp phím của Ubuntu, xem thêm tại đây . Bạn vẫn có thể đặt các lệnh editor.action.copyLinesUpAction và editor.action.copyLinesDownAction các phím tắt ưa thích của riêng bạn. Nguồn: Visual Studio Code Di chuyển dòng lên và xuống Phím tắt: Alt + Up hoặc Alt + Down Nguồn: Visual Studio Code Shrink / expand selectionPhím tắt: Shift + Alt + Left hoặc Shift + Alt + Right Nguồn: Visual Studio Code Bạn tìm hiểu thêm tại đây Go to Symbol in FilePhím tắt: Ctrl + Shift + O Nguồn: Visual Studio Code 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 WorkspacePhím tắt: Ctrl + T Nguồn: Visual Studio Code 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ở. Nguồn: Visual Studio Code Đ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ấuPhím tắt: Ctrl + K Ctrl + X Nguồn: Visual Studio Code Chuyển đổi lệnh văn bảnBạ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. Nguồn: Visual Studio Code Đị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 Nguồn: Visual Studio Code Code formattingPhím tắt: Ctrl + Shift + [ và Ctrl + Shift + ] Nguồn: Visual Studio Code 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ạiPhím tắt: Ctrl + L Điều hướng đến đầu và cuối tệpPhím tắt: Ctrl + Home và Ctrl + End Mở xem trước MarkdownTrong tệp Markdown, sử dụng Phím tắt: Ctrl + Shift + V Nguồn: Visual Studio Code Chỉnh sửa và xem trước MarkdownTrong 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. Nguồn: Visual Studio Code IntelliSense Ctrl + Space để kích hoạt Suggestions widget. Nguồn: Visual Studio Code 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.PeekChọ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. Nguồn: Visual Studio Code Go to DefinitionChọn một biểu tượng sau đó nhập F12 . Ngoài ra, bạn có thể sử dụng menu ngữ cảnh hoặc Ctrl + click(Cmd + click macOS). Bạn có thể quay lại vị trí trước đó bằng lệnh Go > Back hoặc Alt + Left Go to ReferencesChọ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. Nguồn: Visual Studio Code Thủ thuật – Rename SymbolChọ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. Nguồn: Visual Studio Code Thủ thuật – tìm kiếm và sửa đổiBê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 .* (Alt + R) 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. Nguồn: Visual Studio Code .eslintrc.jsonCà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 .jsonXem IntelliSense cho package.json tệp của bạn. Nguồn: Visual Studio Code Cú pháp EmmetSupport for Emmet syntax Nguồn: Visual Studio Code Snippets Tạo snipptes tùy chỉnh File > Preferences > User Snippets (Code > Preferences > User Snippets trên macOS), chọn ngôn ngữ và tạo snippet. "create component": { "prefix": "component", "body": [ "class $1 extends React.Component {", "", "\trender() {", "\t\treturn ($2);", "\t}", "", "}" ] }, Xem thêm tại đây. Diff Chọn tệp để mở từ khung Source Control. Nguồn: Visual Studio Code Thủ thuật tích hợp GitPhí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ệtTừ 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. Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code 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 Xem diff decorations trong màn hình biên tập. Xem thêm tại đây để biết thêm chi tiết. Nguồn: Visual Studio Code Thủ thuật – giải quyết vấn đề xung độtTrong quá trình hợp nhất, hãy chuyển đến chế độ xem Source Control (Ctrl + Shift + G) và thực hiện các thay đổi trong chế độ xem khác. 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 merge.tool vscode git config --global mergetool.vscode.cmd 'code --wait $MERGED' Đặt VS Code làm diff tool mặc định git config --global diff.tool vscode git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE' Debugging Cấu hình trình Debugging Mở Command Palette (Ctrl + Shift + P) và chọn Debug: Open launch.json, sẽ nhắc bạn chọn môi trường phù hợp với dự án của bạn (Node.js, Python, C ++, v.v.). Điều này sẽ tạo ra một launch.json file. Hỗ trợ Node.js được tích hợp sẵn và các môi trường khác yêu cầu cài đặt các phần mở rộng ngôn ngữ phù hợp. Xem thêm tại đây để biết thêm chi tiết. Nguồn: Visual Studio Code Breakpoints and stepping through Đặt breakpoints bên cạnh số dòng. Điều hướng về phía trước Debug widget. Nguồn: Visual Studio Code Kiểm tra dữ liệu Kiểm tra các biến trong bảng Run và trong Panel control. Nguồn: Visual Studio Code 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 (‘{}’). Nguồn: Visual Studio Code 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. { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "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 TerminalChọ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 Nguồn: Visual Studio Code 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. Nguồn: Visual Studio Code 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) Nhóm Visual Studio Code sử dụng phiên bản Insiders để kiểm tra các tính năng mới nhất và sửa lỗi của VS Code. Bạn cũng có thể sử dụng phiên bản Insiders builds cách tải xuống tại đây .
Nguồn: Visial Studio Code Nordic Coder |