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

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

Đị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 máy Mac Shift+ Option+F
• Trên Linux Ctrl+ Shift+I

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

Mã định dạng phím tắt:

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

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

Mã Visual Studio trên Ubuntu - Ctrl+ Shift+I

Bạn cũng có thể tùy chỉnh phím 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ác 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ã dưới đây vào cài đặt không gian làm việc của Visual Studio Code.

Tệp menu → Tùy chọn → Cà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.

Bạn có thể thêm một phím bấm trong menu Tệp → Tùy chọn → Phí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" }

1. Nhấp chuột phải vào tập tin
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

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

Đố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ó thể thay đổi nó là tốt. 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 liên kết phím 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 ý: cmdkhóa 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 Visual Code, 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.formatDocumentvà editor.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ư 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.

Trên Linux, nó 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 phải cài đặt một gói ngôn ngữ cụ thể.

Visual Studio Code 1.6.1 hỗ trợ " Format On Save " 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ó các phím tắt có sẵn (Visual Studio Code 1.7 trở lên):

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

Chỉ chọn định dạng : Ctrl+ K, Ctrl+F

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

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

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.

Menu Tệp → Tùy chọn → Cà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.

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

Vì một số lý do Alt+ Shift+ Fkhông hoạt động với tôi trên Mac Visual Studio Code 1.3.1 và thực tế lệnh "Format Document" 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 Trình định dạng hoặc tạo lối tắt của riêng mình trong menu Tệp → Tùy chọn → Phím tắt → Command+ K Command+ Ssau đó nhập Trình định dạng và thêm phím tắt.

Xem một ví dụ:

Mã định dạng 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 dưới đây.

1. Bấm vào Xem trên thanh menu trên cùng, rồi bấm vào Bảng màu 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 dạng

   Shift+ Alt+F

   

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

Phím tắt định dạng trong C # không hoạt động với tôi cho đến khi tôi cài đặt Mono cho Mac OS X, DNVM và DNX .

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

Trên Mac, Shift+ Alt+ Fhoạt động với tôi.

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

Tệp menu → Tùy chọn → Phím tắt và bộ lọc theo từ khóa 'định dạng'.

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 với 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 gia hạn
• 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. Truy cập: Tệp menu → Tùy chọn → Cà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).

   

Cấp độ 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 tweeking để cai trị tất cả (cài đặt :))

Kết quả

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

Làm thế nào để?

1. Truy cập: menu Tệp → Tùy chọn → Cà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í người dùng Visual Studio Code của bạn là:

Vị trí cài đặt tệp tùy thuộc vào nền tảng của bạn, tệp cài đặt người dùng được đặt ở đâ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 cài đặt không gian làm việc nằm trong thư mục .vscode trong dự án của bạn.

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

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 định dạng phổ biến JS-CSS-HTML 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!

Chọn văn bản, nhấp chuột phải vào 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.

Chỉ cần cài đặt Visual Studio Keymap của Microsoft. Giải quyết vấn đề. : p

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

Đối với những người muốn tùy chỉnh các tệp JavaScript cần định dạng, 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 XML vào tùy chọn HTML.

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

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

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 có liên quan và lưu tệp với tiện ích mở rộng phù hợp.

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

Chọn văn bản mà 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" .

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

Tệp menu → Tùy chọn → Cài đặt không gian làm việc , "Editor.formatOnType" : true

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 Visual Studio Code và Quick Open ( Ctrl+ P), dán lệnh sau và nhấn Enter.

mở rộng cài đặt định dạng khi lưu

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

Mã Visual Studio trên Linux:

Ctrl + [ để khối mã không liên kết và

Ctrl+ ]để làm cho một vết lõm lớn