Phím tắt để viết mã html trong mã so với mã là gì?
Visual Studio Code đã trở thành một trong những trình soạn thảo mã phổ biến nhất hiện có và vì những lý do chính đáng. Số lượng tính năng và khả năng mở rộng mà VS Code cung cấp ngày càng tốt hơn theo thời gian Show
Mã VS cung cấp tất cả các tính năng tốt nhất cần thiết để làm cho công việc phát triển trở nên thú vị và không gặp rắc rối Những lý do hàng đầu khiến các nhà phát triển yêu thích trình chỉnh sửa mã VS
Nếu bạn chưa quen với mã VS và muốn biết các phím tắt hữu ích nhất để tận dụng tối đa trình chỉnh sửa mã tuyệt vời này, bạn đã đến đúng nơi Blog này sẽ giới thiệu cho bạn các phím tắt mã studio trực quan hữu ích nhất, các tính năng và các tiện ích mở rộng tốt nhất để tăng năng suất của bạn và biến bạn thành một VS Code Ninja Phím tắt mã VS cho người mới bắt đầu1. chế độ thiềnChế độ Zen là chế độ xem không bị phân tâm, cho phép bạn tập trung hoàn toàn vào mã của mình và ẩn tất cả các thanh công cụ và nút Bạn có thể kích hoạt chế độ Zen với các cửa sổ. Ctrl+KZ Mac. cmd+K Z hoặc bằng cách vào Xem > Giao diện > Chuyển đổi Chế độ Zen Chế độ Zen trong mã VS2. Bảng lệnhBảng lệnh có thể sẽ trở thành tính năng được sử dụng nhiều nhất của Mã VS nếu bạn chưa quen với trình chỉnh sửa. Nó trình bày cho bạn mọi tùy chọn chức năng, lối tắt và cấu hình dưới dạng danh sách có thể tìm kiếm Giả sử bạn muốn định dạng mã của mình và không nhớ phím tắt. Hoặc bạn có thể chỉ muốn thay đổi một số cài đặt, tắt tất cả các tiện ích mở rộng và bạn không muốn gặp rắc rối khi tìm ra tùy chọn đó tồn tại ở đâu. Chỉ cần bắt đầu nhập những gì bạn muốn Mã VS thực hiện trong bảng lệnh và nó sẽ đưa ra tất cả các loại lệnh được đề xuất để giúp bạn giải quyết Bạn có thể truy cập bảng lệnh bằng tổ hợp phím sau các cửa sổ. Ctrl+Shift+P Mac. cmd+Shift+P Bảng lệnh3. Tìm tập tinNếu bạn muốn tìm kiếm một đoạn văn bản trong tất cả các tệp dự án hiện tại của mình, Mã VS cho phép bạn thực hiện điều đó bằng cách nhấp vào biểu tượng Tìm kiếm trên thanh bên hoặc bằng cách sử dụng phím tắt sau các cửa sổ. Ctrl+Shift+F Mac. cmd+Shift+F 4. Xóa từ trước đóBạn có thể tiết kiệm rất nhiều thời gian và tránh bị xóa nhầm do cách nhấn giữ Backspace thông thường. Chỉ cần xóa từ trước bằng cách sử dụng các cửa sổ. Ctrl+Xóa lùi Mac. cmd+Xóa lùi 5. Chọn văn bản từng từThay vì sử dụng nhấp và kéo để chọn văn bản, bạn có thể sử dụng các phím tắt khác nhau để nâng cao cả tốc độ và độ chính xác. Một phím tắt như vậy cho phép bạn mở rộng lựa chọn của mình theo từng từ. Sử dụng tổ hợp phím sau để đạt được điều đó các cửa sổ. Ctrl + Shift + Mũi tên Trái/Phải Mac. cmd + Shift + Mũi tên Trái/Phải 6. Di chuyển dòng lên/xuốngBạn muốn di chuyển một đoạn mã nhất định đến một vị trí khác trong tệp hiện tại? các cửa sổ. Alt+Mũi tên Lên/Xuống Mac. opt+Mũi tên lên/xuống Di chuyển dòng lên/xuống trong so với mã7. Thêm nhiều con trỏNhiều con trỏ trong mã VS là cách tiết kiệm thời gian tuyệt vời khi bạn muốn thực hiện cùng một chỉnh sửa ở nhiều nơi. Bạn có thể thêm con trỏ vào trên/dưới dòng hiện tại bằng các phím tắt sau các cửa sổ. Ctrl+Alt+Mũi tên lên/xuống Mac. opt+cmd+up hoặc opt+cmd+down Thêm nhiều con trỏ trong mã vsTrong trường hợp bạn muốn thêm con trỏ ở các vị trí khác nhau theo cách thủ công, bạn có thể sử dụng Alt+Click chuột trái 8. Xóa dòngBạn có thể nhanh chóng xóa dòng hiện tại trong một lần thay vì phải nhấn phím xóa lùi hoặc chọn toàn bộ dòng. Sử dụng phím tắt sau để đạt được điều đó các cửa sổ. Ctrl+Shift+K Mac. cmd+Shift+K 9. dòng bình luậnNhận xét mã cũ để kiểm tra một số dòng mã mới được viết? Sử dụng phím tắt sau để nhận xét dòng hiện tại hoặc nhiều dòng nếu chúng được chọn các cửa sổ. Ctrl+K Ctrl+C Mac. Cmd+K Cmd+C Xóa nhận xét khỏi dòng hiện tại hoặc nhiều dòng đã chọn bằng cách sử dụng các cửa sổ. Ctrl+K Ctrl+U Mac. cmd+K cmd+U Bạn có thể chuyển đổi nhận xét bằng cách sử dụng các cửa sổ. Ctrl+/ Mac. cmd+/ 10. Chọn tất cả kết quả của thao tác tìmBạn có thể nhanh chóng chọn tất cả các lần xuất hiện của thao tác tìm bằng phím tắt này. Nó tự động thêm nhiều con trỏ vào mỗi lần xuất hiện. Bạn có thể dễ dàng thay thế văn bản cũng như bắt đầu viết đồng thời ở mỗi lần xuất hiện. Khá hữu ích khi bạn phải thực hiện các chỉnh sửa tương tự ở nhiều nơi các cửa sổ. Alt+Enter Mac. chọn+nhập 11. Chuyển đổi thanh bênCần thêm không gian màn hình? Windows/Linux. Ctrl+b Mac. cmd+b 12. tự động lưuQuên lưu các thay đổi của bạn có thể khiến bạn chạy mã cũ trong khi kiểm tra. Mặc dù Mã VS lưu giữ các thay đổi của bạn trong bộ nhớ để bạn có thể lưu chúng theo cách thủ công sau này nếu muốn, bạn có thể bật tự động lưu công việc của mình bằng cách thực hiện theo các bước được cung cấp bên dưới
13. Chế độ xem chia nhỏ / Chỉnh sửa song songMã VS cho phép bạn sử dụng chế độ xem chia nhỏ trong khi chỉnh sửa tệp của mình. Để bạn có thể mở nhiều tệp cùng lúc trên màn hình. Chế độ xem tách rất hữu ích khi so sánh hoặc chỉnh sửa hai hoặc nhiều tệp liên quan Windows/Linux. Ctrl+\ Mac. cmd+\ hoặc cmd sau đó chọn tệp từ File Explorer 14. Tham gia dòngĐôi khi, một câu lệnh được viết trong một dòng hóa ra lại dễ đọc hơn nhiều so với câu lệnh nhiều dòng. Định dạng mã có thể tạo ra nhiều câu lệnh nhiều dòng mà bạn có thể muốn hoàn nguyên về một dòng. Sử dụng phím tắt nối các dòng, bạn có thể thực hiện điều đó một cách dễ dàng Windows/Linux. Theo mặc định, hành động này không bị ràng buộc với bất kỳ phím nào. Bạn có thể mở các phím tắt thông qua bảng lệnh và trình chỉnh sửa liên kết. hoạt động. joinLines với bất kỳ tổ hợp phím nào bạn chọn Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks 15. Chuyển đổi giữa các chế độ xemChúng ta đã thảo luận về chế độ xem phân tách là gì và cách kích hoạt nó. Khi bạn mở nhiều tệp trong chế độ xem chia nhỏ và bạn cần chuyển đổi giữa chúng, bạn có thể sử dụng Windows/Linux. Ctrl+1, Ctrl+2, Ctrl+3 Mac. cmd+1, cmd+2, cmd+3 Ghi chú. số đại diện cho vị trí của cửa sổ chế độ xem tách mà bạn muốn chuyển sang 16. Sao chép dòng lên/xuốngBất cứ khi nào bạn muốn thêm nhiều dòng tương tự vào một tệp (có thể là nhiều khai báo biến, cặp khóa-giá trị JSON, v.v. ), hầu như luôn luôn dễ dàng hơn để viết nó một lần và sau đó sao chép nó. Bạn có thể làm điều đó nhanh hơn nữa bằng cách chỉ sử dụng phím tắt này và sao chép nhanh dòng hiện tại lên trên cùng hoặc dưới cùng Windows/Linux. shift+alt+xuống hoặc shift+alt+lên Mac. opt+shift+up hoặc opt+shift+down 17. Thu hẹp/Mở rộng lựa chọnThu nhỏ/Mở rộng lựa chọn hiện tại thông qua các khối mã. Hữu ích khi bạn cần chọn nhanh và chính xác văn bản trong một khối mã cụ thể Windows/Linux. shift+alt+trái hoặc shift+alt+phải Mac. Ctrl+shift+cmd+trái hoặc Ctrl+shift+cmd+phải 18. Điều hướng đến một dòng cụ thểBạn hẳn đã thấy số dòng được đề cập trong thông báo lỗi. Bây giờ, thay vì cuộn tất cả các số dòng để sửa lỗi, tất cả những gì bạn phải làm là cho VS Code biết số dòng bạn muốn điều hướng đến và tiết kiệm cho mình nỗ lực cuộn thủ công. Tiện dụng, phải không? Windows/Linux. Ctrl+g Mac. Ctrl+g hoặc cmd+p 19. Hoàn tác vị trí con trỏTrả con trỏ về vị trí trước đó trong tệp. Hữu ích khi điều hướng đến các phần mã ở xa và sau đó phải quay lại Windows/Linux. Ctrl+u Mac. cmd+u 20. Cắt bớt khoảng trắng ở cuốiCác khoảng trắng ở cuối có thể trông vô hại nhưng chúng có thể trở thành nguyên nhân gây ra lỗi trong một số môi trường nhất định. Đó là lý do tại sao cách tốt nhất là không để chúng nằm lung tung trong mã của bạn, bất kể ngôn ngữ nào. Bạn có thể cắt bớt khoảng trắng ở cuối dòng hiện tại bằng cách sử dụng phím tắt này Windows/Linux. Ctrl+k Ctrl+x Mac. cmd+k cmd+x 21. định dạng mãViết mã được định dạng tốt và có thể đọc được là một cách thực hành được khuyến nghị. Nhưng tất cả chúng ta đều đã từng ở trong những tình huống mà việc làm thủ công là không khả thi. Mã VS cũng cho phép bạn nhanh chóng định dạng mã của mình
Windows/Linux. Ctrl+k, Ctrl+f Mac. cmd+k, cmd+f
Windows/Linux. ca+alt+f Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks22. Chọn dòng hiện tạiChọn dòng hiện tại nhanh chóng mà không cần phải sử dụng chuột hoặc bàn di chuột Windows/Linux. Ctrl+l Mac. cmd+l 23. gấp mãLàm việc với các tệp dài và nhiều khối mã? Windows/Linux. ctrl+shift[ và ctrl+shift+] Mac. alt+cmd+[ và alt+cmd+] Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks24. Mở bản xem trước đánh dấuđánh dấu (. md) được sử dụng rộng rãi cho tài liệu và readmes. Nó có cú pháp riêng đơn giản để định dạng và hiển thị văn bản theo nhiều cách khác nhau. Bạn cũng có thể dễ dàng kết xuất và hiển thị các tệp Markdown với định dạng phù hợp trong Mã VS Chỉ cần sử dụng tổ hợp phím sau khi bạn có Markdown (. md) mở tập tin Windows/Linux. ctrl+shift+v Mac. ca+cmd+v 25. Chỉnh sửa và xem trước Markdown song songChỉnh sửa README của riêng bạn. md cho repo dự án của bạn? . Tại đây, bạn sẽ có thể thực hiện các chỉnh sửa và xem chúng ngay lập tức trong bản xem trước Windows/Linux. ctrl+kv Mac. cmd+kv Nguồn. https. //github. com/microsoft/vscode-tips-and-tricksMột số tính năng hữu ích hơn trong mã VS1. Emmet Cú phápEmmet là một công cụ mở rộng đánh dấu cho phép bạn viết HTML trong nháy mắt. Nếu bạn đang làm việc trên bất kỳ dự án phát triển web nào, điều này có thể rất hữu ích vì nó sẽ giúp bạn tiết kiệm rất nhiều thời gian dành cho việc viết HTML thuần túy. Mã VS hỗ trợ cú pháp Emmet nguyên bản, không cần phần mở rộng Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks2. công cụ CLIMã VS cũng đóng gói trong phím tắt giao diện dòng lệnh (CLI). Vì vậy, nếu bạn là người thường xuyên sử dụng thiết bị đầu cuối, thì chắc chắn bạn sẽ thích mức độ tiện dụng của VS Code. Bạn có thể sử dụng lệnh 'code' để thực hiện nhiều tác vụ khác nhau. Một số trong số họ được liệt kê cho bạn Mở thư mục hiện tại trong cửa sổ mã được sử dụng gần đây nhất
Tạo một cửa sổ mới
Thay đổi ngôn ngữ
Mở trình chỉnh sửa khác biệt
Xem các tùy chọn trợ giúp
Vô hiệu hóa tất cả các tiện ích mở rộng
3. Duyệt kho githubBạn muốn duyệt các kho github trong trình chỉnh sửa mã yêu thích của mình? . 4. Thiết lập mã VS làm công cụ hợp nhất mặc địnhNếu bạn đang sử dụng git để kiểm soát phiên bản, bạn có thể gặp phải giao diện dòng lệnh không mấy trực quan khi cố gắng hợp nhất các thay đổi xung đột. Còn việc sử dụng thứ gì đó thân thiện hơn làm công cụ hợp nhất mặc định của git thì sao? git config --hợp nhất toàn cầu. mã công cụ Tiện ích mở rộng mã VS1. Trình xem mẫu ARMMẫu Trình quản lý tài nguyên Azure (ARM) được sử dụng để xác định tài nguyên Azure và mối quan hệ của chúng ở định dạng JSON. Chúng có thể được sử dụng để dễ dàng triển khai/tái triển khai tài nguyên Azure. Trình xem mẫu ARM cho phép bạn dễ dàng xem bản xem trước đồ họa của các tài nguyên và các liên kết giữa chúng. Tiện ích mở rộng này sẽ hữu ích nếu bạn mới bắt đầu sử dụng hoặc tìm hiểu thêm về Azure Cloud Nguồn. https. //thương trường. Visual Studio. com/items?itemName=bencoleman. cánh tay2. Con côngPeacock cung cấp các màu khác nhau cho các không gian làm việc Mã VS khác nhau, cho phép bạn dễ dàng mã hóa màu và phân biệt nhiều dự án mà bạn có thể đang thực hiện 3. Ống kính lỗiTheo mặc định, các lỗi và cảnh báo được thể hiện bằng các đường nguệch ngoạc màu đỏ và vàng bên dưới các đoạn mã có vấn đề. Và để đọc lỗi đó là gì, bạn phải di chuột qua đoạn mã đó. Error Lens là một tiện ích mở rộng hiển thị lỗi, cảnh báo và đề xuất ngay bên cạnh đoạn mã bị lỗi Nguồn. https. //github. com/viatsko/awesome-vscode4. GitLinkTiện ích mở rộng này cho phép bạn mở liên kết github của tệp hiện tại trong trình duyệt. Có thể hữu ích khi bạn muốn kiểm tra lịch sử, phiên bản nhánh, v.v. 5. Visual Studio IntelliCodeTiện ích mở rộng này cung cấp các tính năng phát triển được hỗ trợ bởi AI bao gồm tự động hoàn thành và các thông tin chi tiết khác dựa trên ngữ cảnh mã hiện tại Nguồn. https. //github. com/viatsko/awesome-vscode 6. hầu tướcMarquee là màn hình chính được cá nhân hóa cho Mã VS. Duyệt các câu chuyện tin tức, xu hướng repo github, tạo và theo dõi todo, mọi thứ mà không cần rời khỏi trình chỉnh sửa yêu thích của bạn 7. Máy chủ trực tiếpLive Server cho phép bạn khởi chạy một máy chủ phát triển cục bộ với hỗ trợ tải lại trực tiếp. Trình duyệt của bạn sẽ tự động làm mới bất cứ khi nào bạn thực hiện thay đổi để bạn có thể tránh khởi chạy lại 8. GitLensGitLens tăng cường trải nghiệm git của bạn trong Mã VS. Đối với mỗi dòng mã, nó có thể cho bạn biết ai đã thực hiện lần chỉnh sửa cuối cùng và khi nào (chú thích git-blame). GitLens cũng cho phép bạn duyệt tệp và lịch sử git-blame 9. ngrok cho Mã VSNgrok là một dịch vụ cho phép bạn hiển thị máy chủ web đang chạy trên máy cục bộ của mình với internet. Một tình huống mà điều này có thể trở nên hữu ích là khi bạn đang phát triển một ứng dụng web và cần nhanh chóng kiểm tra giao diện của nó trên thiết bị di động. Thay vì phải triển khai nó ở đâu đó, bạn chỉ cần tạo đường hầm localhost thông qua ngrok và truy cập nó thông qua thiết bị di động. Ngrok for VS Code cho phép bạn nhanh chóng điều khiển ngrok từ bảng lệnh VS Code 10. CSV cầu vồngĐánh dấu các cột trong các tệp được phân tách bằng dấu phẩy, tab, dấu chấm phẩy và dấu gạch ngang Nguồn. https. //github. com/viatsko/awesome-vscode11. Đường dẫn tự động hoàn thànhGhi nhớ đường dẫn tệp dài và phải gõ chúng ra trong khi làm việc là một rắc rối lớn. Mã VS đã có Intellisense để hoàn thành mã. Điều gì sẽ xảy ra nếu tôi nói với bạn, Tự động điền đường dẫn là một tiện ích mở rộng giống như Intellisense, nhưng dành cho đường dẫn tệp. Vì vậy, bất cứ khi nào bạn bắt đầu viết một đường dẫn tệp dài trong mã của mình, tiện ích mở rộng này sẽ cung cấp cho bạn các đề xuất và hoàn thành nó cho bạn. Đáng kinh ngạc. Đúng? Nguồn. https. //github. com/viatsko/awesome-vscode12. Dán JSON dưới dạng mãSuy ra cấu trúc của JSON và dán nó dưới dạng các loại tương đương trong nhiều ngôn ngữ lập trình 13. Phát triển từ xaCho phép người dùng mở bất kỳ thư mục nào trên máy từ xa, bộ chứa hoặc trong Hệ thống con Windows cho Linux (WSL) và tận dụng bộ tính năng đầy đủ của Mã VS 14. Đồng bộ hóa cài đặtTiện ích mở rộng này cho phép bạn lưu và đồng bộ hóa tất cả các cài đặt, đoạn trích, chủ đề, biểu tượng tệp, liên kết phím, không gian làm việc và tiện ích mở rộng với github và dễ dàng khôi phục chúng trên nhiều máy 15. Chuyển đổi báo giáDễ dàng xoay vòng giữa các trích dẫn đơn, kép và backtick trong văn bản nằm trong các trích dẫn này Nguồn. https. //github. com/viatsko/awesome-vscode16. cây todoTodo Tree thêm màu sắc và đánh dấu tùy chỉnh vào nhận xét TODO của bạn (hoặc từ khóa tùy chỉnh) để làm cho chúng nổi bật. Bạn có thể xem tất cả các thẻ của mình trong thanh bên Nguồn. https. //github. com/viatsko/awesome-vscode17. Bộ tô màu cặp giá đỡVới rất nhiều mã phức tạp và lồng nhau, sẽ rất khó khăn và tốn thời gian để biết các dấu ngoặc nào khớp với nhau. Tiện ích mở rộng này cung cấp các màu khác nhau cho các cặp dấu ngoặc khác nhau để giúp bạn phân biệt chúng tốt hơn Nguồn. https. //github. com/viatsko/awesome-vscode18. Tự động đổi tên thẻTiện ích mở rộng này tự động đổi tên các thẻ HTML/XML được ghép nối. Vì vậy, nếu bạn đổi tên một phần mở đầu gắn thẻ vào một thứ khác, đóng cặp của nó thẻ được đổi tên bởi chính nóPhím tắt HTML cho Mã VS là gì?HTML trong Visual Studio Code . Bạn có thể kích hoạt đề xuất bất kỳ lúc nào bằng cách nhấn Ctrl+Space Để cải thiện định dạng mã nguồn HTML của bạn, bạn có thể sử dụng lệnh Định dạng tài liệu Ctrl+Shift+I để định dạng toàn bộ tệp hoặc Lựa chọn định dạng Ctrl+K Ctrl+F để chỉ định dạng văn bản đã chọn Ctrl P trong Mã VS là gì?Điều hướng tệp nhanh
. Bạn có thể mở bất kỳ tệp nào theo tên của nó khi bạn gõ Ctrl+P (Mở nhanh). Explorer là công cụ tuyệt vời để điều hướng giữa các tệp khi bạn đang khám phá một dự án. Tuy nhiên, khi bạn đang thực hiện một nhiệm vụ, bạn sẽ thấy mình nhanh chóng nhảy giữa cùng một nhóm tệp. |