Làm cách nào để bạn định dạng mã trong Visual Studio Code (VSCode)

990
Brandon Clapp 2015-05-01 06:43.

Tương đương với Ctrl+ K+ FCtrl+ K+ Dtrên Windows trong Visual Studio để định dạng hoặc "làm đẹp" mã trong trình chỉnh sửa Visual Studio Code là gì?

29 answers

4185
Brandon Clapp 2015-05-01 06:43.

Định dạng mã có sẵn trong Visual Studio Code thông qua các phím tắt sau:

  • Trên Windows Shift+ Alt+F
  • Trên Mac Shift+ Option+F
  • Trên Linux Ctrl+ Shift+I

Ngoài ra, bạn có thể tìm phím tắt, cũng như các phím tắt khác, thông qua 'Command Palette' được cung cấp trong trình chỉnh sửa với dấu Ctrl+ Shift+ P(hoặc Command+ Shift+ Ptrên Mac), sau đó tìm kiếm tài liệu định dạng .

Đối với các đoạn mã chưa được lưu

  1. Mở bảng lệnh (Win: F1 hoặc Ctrt + Shift + P)

  2. Tìm 'Mô hình ngôn ngữ thay đổi'

  3. Chọn ngôn ngữ, ví dụ json. Bây giờ cú pháp sẽ được đánh dấu.

  4. Định dạng tài liệu (ví dụ: Open Command Palette -> ' Format Document ')

Không định dạng

  1. Chọn văn bản
  2. Bảng lệnh -> Tham gia dòng

' Hiển thị các bức ảnh '

495
Bharathi Devarasu 2016-05-25 20:25.

Lối tắt định dạng mã:

Mã Visual Studio trên Windows - Shift+ Alt+F

Mã Visual Studio trên MacOS - Shift+ Option+F

Visual Studio Code trên Ubuntu - Ctrl+ Shift+I

Bạn cũng có thể tùy chỉnh lối tắt này bằng cách sử dụng cài đặt tùy chọn nếu cần.

Định dạng mã trong khi lưu tệp:

Visual Studio Code cho phép người dùng tùy chỉnh cài đặt mặc định.

Nếu bạn muốn tự động định dạng nội dung của mình trong khi lưu, hãy thêm đoạn mã bên dưới vào cài đặt vùng làm việc của Visual Studio Code.

Menu TệpTùy chọnCài đặt không gian làm việc

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Lưu ý: bây giờ bạn có thể tự động định dạng tệp TypeScript. Kiểm tra cập nhật của tôi.

218
hardkoded 2015-05-02 03:49.

Bạn có thể thêm liên kết bàn phím trong menu TệpTùy chọnPhím tắt.

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Hoặc Visual Studio như:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }
209
Siddarth Kanted 2018-02-14 00:34.
  1. Nhấp chuột phải vào đâu đó trong vùng nội dung (văn bản) cho tệp
  2. Chọn Định dạng Tài liệu từ menu:
    • Các cửa sổ: Alt Shift F
    • Linux: Alt Shift I
    • hệ điều hành Mac: F

118
César 2015-07-10 00:57.

Tổ hợp phím bên phải là Shift+ Alt+ F.

66
Dariusz 2016-10-28 21:26.

Visual Studio Code 1.6.1 hỗ trợ " Định dạng khi lưu " sẽ tự động chọn các phần mở rộng định dạng được cài đặt có liên quan và định dạng toàn bộ tài liệu trên mỗi lần lưu.

Bật "Định dạng khi lưu" bằng cách cài đặt

"editor.formatOnSave": true

Và có sẵn các phím tắt (Visual Studio Code 1.7 trở lên):

Định dạng toàn bộ tài liệu : Shift+ Alt+F

Chỉ Định dạng Lựa chọn : Ctrl+ K, Ctrl+F

64
Niklas R. 2015-09-11 22:36.

Trên Linux là Ctrl+ Shift+ I.

Trên Windows, nó là Alt+ Shift+ F. Đã thử nghiệm với HTML / CSS / JavaScript và Visual Studio Code 1.18.0.

Đối với các ngôn ngữ khác, bạn có thể cần cài đặt một gói ngôn ngữ cụ thể.

62
abyshukla 2016-08-05 19:26.

Đối với Fedora

  1. Bấm File-> Preferences-> Keyboard shortcuts.
  2. Dưới Default Keyboard Shortcuts, tìm kiếm ( Ctrl+ F) cho editor.action.format.

Của tôi đã đọc "key": "ctrl+shift+i"

Bạn cũng có thể thay đổi nó. Tham khảo câu trả lời này về cách ... hoặc nếu bạn cảm thấy hơi lười biếng khi cuộn lên:


Bạn có thể thêm một keybinding trong "Tùy chọn-> Phím tắt"

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

Hoặc Visual Studio như:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }


Xin lưu ý: cmdkey chỉ dành cho máy Mac. Đối với Windows và Fedora (bàn phím Windows), sử dụngCtrl


CHỈNH SỬA :

Theo phiên bản Mã trực quan, 1.28.2đây là những gì tôi tìm thấy.

editor.action.formatkhông còn tồn tại. Bây giờ nó đã được thay thế bởi editor.action.formatDocumenteditor.action.formatSelection.

Nhập editor.action.formatvào hộp tìm kiếm để xem các phím tắt hiện có.

Để thay đổi các tổ hợp phím, hãy làm theo các bước sau:

  1. Bấm editor.action.formatDocumenthoặceditor.action.formatSelection
  2. Một biểu tượng giống như cây bút xuất hiện ở bên trái - nhấp vào nó.
  3. Một cửa sổ bật lên xuất hiện. Nhấn tổ hợp phím mong muốn và nhấn enter.
44
ranbuch 2015-12-13 20:57.

Trên Ubuntu là Ctrl+ Shift+ I.

35
M Fatih Koca 2018-02-01 20:52.

Menu TệpTùy chọnCài đặt

"editor.formatOnType": true

Khi bạn nhập dấu chấm phẩy, nó sẽ được định dạng.

Ngoài ra, bạn cũng có thể sử dụng "editor.formatOnSave": true.

34
Gerfried 2016-10-01 01:15.

Chỉ cần nhấp chuột phải vào văn bản và chọn "Mã định dạng".

Visual Studio Code sử dụng js-beautifynội bộ, nhưng nó thiếu khả năng sửa đổi kiểu bạn muốn sử dụng. Tiện ích mở rộng "làm đẹp" cho phép bạn thêm cài đặt.

25
Aleksander Tymczenko 2017-06-30 22:28.

Vì một số lý do Alt+ Shift+ Fkhông hoạt động đối với tôi trên Mac Visual Studio Code 1.3.1 và thực sự lệnh "Định dạng tài liệu" hoàn toàn không hoạt động. Nhưng lệnh Formatter hoạt động rất tốt.

Vì vậy, bạn có thể sử dụng Command+ Shift+ Pvà nhập Định dạng hoặc tạo phím tắt của riêng bạn trong menu TệpTùy chọnPhím tắtCommand+ K Command+ Ssau đó nhập Định dạng và thêm phím tắt của bạn.

Xem một ví dụ:

25
Piotrek Hryciuk 2017-10-20 00:40.

Shift+ Alt+ Fthực hiện công việc tốt trong 1.17.2 trở lên.

23
afeef 2018-02-09 23:03.

Định dạng mã trong Visual Studio.

Tôi đã cố gắng định dạng trong Windows 8.

Chỉ cần làm theo các ảnh chụp màn hình bên dưới.

  1. Bấm vào Xem trên thanh menu trên cùng, sau đó bấm vào Bảng lệnh.

  2. Sau đó, một hộp văn bản sẽ xuất hiện nơi chúng ta cần nhập Định dạng

    Shift+ Alt+F

20
Burk 2015-06-29 06:42.

Trong Visual Studio Code, Shift+ Alt+ Fđang làm những gì Ctrl+ K+ Dđang làm trong Visual Studio.

19
Lukasz Czerwinski 2018-01-09 00:06.

Trên Mac, Shift+ Alt+ phù Fhợp với tôi.

Bạn luôn có thể kiểm tra các ràng buộc chính trong menu:

Menu TệpTùy chọnPhím tắt và lọc theo từ khóa 'định dạng'.

18
Jo Smo 2015-11-03 04:18.

Lối tắt định dạng trong C # không hoạt động đối với tôi cho đến khi tôi cài đặt Mono cho Mac OS X, DNVMDNX .

Trước khi tôi cài đặt Mono, phím tắt tự động định dạng ( Shift+ Alt+ F) chỉ hoạt động cho các .jsontệp.

16
Ashutosh Jha 2017-05-24 23:07.

Cách đơn giản nhất tôi sử dụng trong Visual Studio Code (Ubuntu) là:

Chọn văn bản bạn muốn định dạng bằng chuột.

Nhấp chuột phải và chọn "Định dạng lựa chọn" .

14
Saturn Technologies 2016-09-08 22:13.

Trong khi thay đổi hành vi mặc định cho Visual Studio Code yêu cầu một tiện ích mở rộng, bạn có thể ghi đè hành vi mặc định trong không gian làm việc hoặc cấp người dùng. Nó hoạt động cho hầu hết các ngôn ngữ được hỗ trợ (tôi có thể đảm bảo HTML, JavaScript và C #).

Cấp không gian làm việc

Những lợi ích

  • Không yêu cầu phần mở rộng
  • Có thể được chia sẻ giữa các đội

Kết quả

  • .vscode/settings.json được tạo trong thư mục gốc của dự án

Làm thế nào để?

  1. Đi tới: Menu TệpTùy chọnCài đặt không gian làm việc

  2. Thêm và lưu "editor.formatOnType": truevào settings.json (ghi đè hành vi mặc định cho dự án bạn làm việc bằng cách tạo tệp .vscode / settings.json).

Mức độ môi trường người dùng

Những lợi ích

  • Không yêu cầu gia hạn
  • Môi trường phát triển cá nhân tweet để cai trị tất cả (cài đặt :))

Kết quả

  • Người dùng settings.jsonđược sửa đổi (xem vị trí theo hệ điều hành bên dưới)

Làm thế nào để?

  1. Đi tới: menu TệpTùy chọnCài đặt Người dùng

  2. Thêm hoặc thay đổi giá trị của "editor.formatOnType": falsethành "editor.formatOnType": truetrong cài đặt người dùng.json

settings.jsonVị trí của người dùng Visual Studio Code của bạn là:

Vị trí tệp cài đặt tùy thuộc vào nền tảng của bạn, tệp cài đặt người dùng nằm ở đây:

  • Các cửa sổ: %APPDATA%\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.jsonTệp thiết lập không gian làm việc nằm trong thư mục .vscode trong dự án của bạn.

Thêm chi tiết có thể được tìm thấy ở đây .

9
mumair 2017-01-10 08:16.

Theo mặc định, khóa này không hoạt động đối với tôi trên các tài liệu HTML, CSS và JavaScript.

Sau khi tìm kiếm, tôi đã tìm thấy plugin JS-CSS-HTML Formatter phổ biến với 133.796 lượt cài đặt .

Sau khi cài đặt, chỉ cần tải lại các cửa sổ và nhấn Ctrl+ Shift+ F, và nó hoạt động!

8
Akhil Ghatiki 2018-01-18 21:47.

Chọn văn bản, nhấp chuột phải vào vùng lựa chọn và chọn tùy chọn "bảng lệnh":

Một cửa sổ mới mở ra. Tìm kiếm "định dạng" và chọn tùy chọn có định dạng theo yêu cầu.

8
Rudy 2017-01-24 05:41.

Chỉ cần cài đặt Visual Studio Keymap (Visual Studio Keymap cho Visual Studio Code) của Microsoft. Vấn đề đã được giải quyết. : p

7
Gopal Devra 2017-06-15 01:54.

Trong Mac, sử dụng + Kvà sau đó + F.

7
Nigel Feasey 2016-09-09 10:34.

Trước tiên, bạn phải cài đặt trình cắm thích hợp (ví dụ: XML, C #, v.v.).

Định dạng sẽ không khả dụng cho đến khi bạn đã cài đặt plugin liên quan và lưu tệp với phần mở rộng thích hợp.

7
Rick 2016-09-04 11:54.

Đối với những người muốn tùy chỉnh định dạng tệp JavaScript nào, bạn có thể sử dụng bất kỳ tiện ích mở rộng nào trên thuộc JSfilestính. Điều tương tự cũng áp dụng cho HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Điều này sẽ cho phép làm đẹp khi lưu cho TypeScript và bạn có thể thêm trong XML vào tùy chọn HTML.

6
Jerry Ni 2017-11-01 23:35.

Nếu bạn muốn tùy chỉnh kiểu định dạng-tài liệu, bạn nên sử dụng mở rộng Làm đẹp .

Tham khảo ảnh chụp màn hình này:

5
杨恩锋 2016-07-27 17:37.

Không phải cái này. Dùng cái này:

Menu TệpTùy chọnCài đặt không gian làm việc , "editor.formatOnType" : true

2
Gyuha Shin 2016-08-17 21:44.

Sử dụng tiện ích mở rộng ...

Cho phép tự động định dạng mã khi bạn lưu tệp.

Khởi chạy Mã Visual Studio và Mở nhanh ( Ctrl+ P), dán lệnh sau và nhấn Enter.

ext cài đặt định dạng-on-save

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

2
Hvitis 2016-09-21 04:43.

Mã Visual Studio trên Linux:

Ctrl+ [đến khối mã duy nhất và

Ctrl+ ]để thực hiện thụt lề hàng loạt

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman (Ảnh: Netflix) BoJack Horseman bắt đầu mùa thứ ba với sự xuất hiện của nhân vật tiêu biểu, người vẫn đang theo đuổi những lời khen ngợi từ giới phê bình trong một nỗ lực tuyệt vọng để tìm ra ý nghĩa trong cuộc sống của mình. Mùa thứ hai về số phận bi kịch của Raphael Bob-Waksberg dày đặc những trò đùa cũng như tuyệt vọng.

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Bản nâng cấp Phiên bản 8.0 gần đây của Tesla đối với hệ thống Lái xe tự động được thiết kế để cải thiện hệ thống và mối quan hệ của nó với người lái.

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

Chắc chắn khi con cái chúng ta xem lại các chương trình chúng ta đã xem vào khoảng năm 2015, chúng sẽ thấy UnREAL, một chương trình truyền hình mới chiếu vào tối Thứ Hai của Lifetime — bạn sẽ thấy đúng lúc, sẽ phát sóng ngay sau khi The Bachelor kết thúc — như một chương trình không thể được thực hiện vào bất kỳ thời điểm nào khác trong lịch sử truyền hình, nhưng một chương trình cảm thấy cần thiết để xem bây giờ. UnREAL có sự tham gia của Shiri Appleby trong vai Rachel, một nhà sản xuất truyền hình cho một chương trình về cơ bản là The Bachelor, mặc dù trong thế giới này, nó được gọi là Vĩnh viễn.

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Thông báo chính thức đến trực tiếp từ trang web của Star Wars: Fantastic Four, đạo diễn Josh Trank, một người bí ẩn không xuất hiện tại đại hội Star Wars Celebration gần đây, sẽ không chỉ đạo phần hai Star Wars Anthology. Đây là tuyên bố được đăng ngày hôm qua: Tất cả thực sự là ngôn ngữ rất lịch sự, nhưng một bài báo của Hollywood Reporter cho thấy tất cả đều không tốt ở hậu trường, gọi sự ra đi là "một vụ sa thải" một phần dựa trên "hành vi bất thường" của Trank trong khi quay Fantastic Four: The Bài báo trích dẫn các nguồn gọi là Trank “đôi khi thiếu quyết đoán và thiếu sáng tạo,” và lưu ý rằng Fantastic Four, khởi chiếu vào ngày 7 tháng 8, đã được khởi động lại vào cuối tháng 4.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language