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

  • Hỗ trợ nhiều ngôn ngữ
  • Phím tắt tiện lợi
  • Thư viện ngày càng phát triển với hơn 24000 tiện ích mở rộng
  • Rất nhiều chủ đề để tùy chỉnh không gian làm việc của bạn theo nội dung trái tim của bạn

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 đầu

1. chế độ thiền

Chế độ 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

Phím tắt để viết mã html trong mã so với mã là gì?
Chế độ Zen trong mã VS

2. Bảng lệnh

Bả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

Phím tắt để viết mã html trong mã so với mã là gì?
Bảng lệnh

3. Tìm tập tin

Nế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ống

Bạ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

Phím tắt để viết mã html trong mã so với mã là gì?
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

Phím tắt để viết mã html trong mã so với mã là gì?
Thêm nhiều con trỏ trong mã vs

Trong 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

Phím tắt để viết mã html trong mã so với mã là gì?

8. Xóa dòng

Bạ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ận

Nhậ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+/

Phím tắt để viết mã html trong mã so với mã là gì?

10. Chọn tất cả kết quả của thao tác tìm

Bạ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ên

Cần thêm không gian màn hình?

Windows/Linux. Ctrl+b

Mac. cmd+b


12. tự động lưu

Quê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

  • Mở cài đặt. json bằng Ctrl + ,  (Mac. cmd +,)
  • Đặt "tệp. lưu tự động". "sau sự chậm trễ"
  • Ngoài ra, bạn cũng có thể chuyển đổi Tự động lưu từ bằng cách điều hướng đến Tệp > Lưu tự động

13. Chế độ xem chia nhỏ / Chỉnh sửa song song

Mã 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

Phím tắt để viết mã html trong mã so với mã là gì?

Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks


15. Chuyển đổi giữa các chế độ xem

Chú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ống

Bấ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

Phím tắt để viết mã html trong mã so với mã là gì?

17. Thu hẹp/Mở rộng lựa chọn

Thu 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ối

Cá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

  • Định dạng mã nguồn hiện được chọn

Windows/Linux. Ctrl+k, Ctrl+f

Mac. cmd+k, cmd+f

  • Định dạng tài liệu hoàn chỉnh

Windows/Linux. ca+alt+f

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks

22. Chọn dòng hiện tại

Chọ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+]

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks

24. 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 song

Chỉ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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks

Một số tính năng hữu ích hơn trong mã VS

1. Emmet Cú pháp

Emmet 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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/microsoft/vscode-tips-and-tricks

2. công cụ CLI

Mã 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

  • mã -r

Tạo một cửa sổ mới

  • mã -n

Thay đổi ngôn ngữ

  • mã --locale=es

Mở trình chỉnh sửa khác biệt

  • code --diff

Xem các tùy chọn trợ giúp

  • mã --trợ giúp

Vô hiệu hóa tất cả các tiện ích mở rộng

  • mã --disable-extensions

3. Duyệt kho github

Bạ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? .

Ví dụ: để xem https. //github. com/microsoft/vscode trong github1s,
bạn có thể truy cập https. //github1s. com/microsoft/vscode


4. Thiết lập mã VS làm công cụ hợp nhất mặc định

Nế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ã VS

1. Trình xem mẫu ARM

Mẫ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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //thương trường. Visual Studio. com/items?itemName=bencoleman. cánh tay

2. Con công

Peacock 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ỗi

Theo 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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/viatsko/awesome-vscode

4. GitLink

Tiệ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 IntelliCode

Tiệ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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/viatsko/awesome-vscode ‌‌

6. hầu tước

Marquee 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

Phím tắt để viết mã html trong mã so với mã là gì?

7. Máy chủ trực tiếp

Live 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. GitLens

GitLens 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ã VS

Ngrok 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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/viatsko/awesome-vscode

11. Đường dẫn tự động hoàn thành

Ghi 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?

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/viatsko/awesome-vscode

12. 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ừ xa

Cho 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 đặt

Tiệ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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/viatsko/awesome-vscode

16. cây todo

Todo 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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/viatsko/awesome-vscode

17. 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

Phím tắt để viết mã html trong mã so với mã là gì?
Nguồn. https. //github. com/viatsko/awesome-vscode

18. 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.