Làm cách nào để thu gọn các phần mã trong Visual Studio Code cho Windows?

Làm cách nào để gấp hoặc thu gọn các phần mã trong Visual Studio Code?

Tính năng này có được hỗ trợ không?

Folding đã được triển khai và hiện được triển khai kể từ phiên bản Visual Studio Code 0.10.11 . Có những phím tắt có sẵn:

• Gấp các khu vực không bị che khuất trong cùng ở con trỏ:

  • Ctrl+ Shift+ [trên Windows và Linux
  • ⌥+ ⌘+ [trên macOS

• Mở ra vùng bị sụp đổ tại con trỏ:

  • Ctrl+ Shift+ ]trên Windows và Linux
  • ⌥+ ⌘+ ]trên macOS

• Gấp tất cả các nếp gấp tất cả các vùng trong trình chỉnh sửa:

  • Ctrl+ ( K=> 0) (không) trên Windows và Linux
  • ⌘+ ( K=> 0) (không) trên macOS

• Mở ra Tất cả mở ra tất cả các vùng trong trình chỉnh sửa:

  • Ctrl+ ( K=> J) trên Windows và Linux
  • ⌘+ ( K=> J) trên macOS

Tài liệu tham khảo: https://code.visualstudio.com/docs/getstarted/keybindings

Kể từ Visual Studio Code phiên bản 1.12.0, tháng 4 năm 2017, hãy xem phần Chỉnh sửa cơ bản> Phần gấp trong tài liệu.

Các khóa mặc định là:

Gấp tất cả: CTRL+ K, CTRL+ 0(không)

Cấp độ gấp [n]: CTRL+ K, CTRL+ [n]*

Mở ra tất cả: CTRL+ K, CTRL+J

Khu vực gấp: CTRL+ K, CTRL+[

Vùng chưa mở: CTRL+ K, CTRL+]

* Cấp độ gấp: để gấp tất cả trừ các lớp bên ngoài nhất, hãy thử CTRL+ K, CTRL+1

Máy Mac: sử dụng ⌘thay vì CTRL(cảm ơn Prajeet)

Mã gấp theo khu vực đã đến với v1.17. Gấp theo tài liệu khu vực . Và v1.19 và 1.23 .

[Nói chung, bạn có thể thêm một dấu cách, ví dụ // region and // endregionđể //region and //endregionvà nó cũng sẽ làm việc.]

TypeScript/JavaScript: //#region and //#endregion or // #region and // #endregion
C#:                    #region and #endregion
C/C++:                 #pragma region and #pragma endregion
F#:                    //#region and //#endregion
PowerShell:            #region and #endregion
Python:                #region and #endregion
VB:                    #Region and #End Region
PHP:                   #region and #endregion
Bat:                   ::#region and ::#endregion or REM #region and REM #endregion
Markdown:              <!-- #region --> and <!-- #endregion -->
Golang                 //region and //endregion or //#region and //#endregion
Java                   //#region and //#endregion
CSS/SCSS/Less:         /* #region */ and /* #endregion */ or /*#region*/ and /*#endregion*/
SCSS/Less:             // #region and // #endregion
Go:                    // region, // endregion and // #region, // #endregion
shellscript:           # region and # endregion
Perl5                  #region and #endregion or =pod and =cut`

Quan trọng: Nếu bạn không thấy ngôn ngữ của mình trong danh sách ::

Mỗi ngôn ngữ cũng có đoạn trích có sẵn cho các điểm đánh dấu. Nhập '#' và gọi hoàn thành mã để xem chúng. Để có các điểm đánh dấu khu vực được cấu hình cho ngôn ngữ của bạn, hãy liên hệ với nhà cung cấp tiện ích mở rộng ngôn ngữ.

Vì vậy, gõ #và sau đó Ctrl+ Spaceđể xem các điểm đánh dấu khu vực cho bất kỳ ngôn ngữ.

Tính năng này có sẵn trong bản dựng tiêu chuẩn bây giờ. Để làm cho các điều khiển thu gọn / mở rộng xuất hiện, bạn cần di chuột qua khu vực ngay bên phải các số dòng như trong ảnh chụp màn hình này:

Bạn nên thêm cài đặt người dùng:

{
    "editor.showFoldingControls": "always",
    "editor.folding": true,
    "editor.foldingStrategy": "indentation", 
}

Phím tắt mặc định cho thu gọn / mở rộng là:

Ctrl+ Shift+ [: "Gấp"

Ctrl+ Shift+ Alt+ [: "Gấp tất cả"

Ctrl+ Shift+ ]: "Mở ra"

Ctrl+ Shift+ Alt+ ]: "Mở ra tất cả"

Hoặc truy cập keybindings.json và thay đổi theo ý muốn.

Ví dụ:

{
    "key": "cmd+k cmd+m",
    "command": "editor.foldAll",
    "when": "editorFocus"
},
{
    "key": "cmd+m cmd+k",
    "command": "editor.unfoldAll",
    "when": "editorFocus"
},

Nếu không có phím tắt nào hoạt động (như đối với tôi), như một cách giải quyết, bạn cũng có thể mở bảng lệnh ( Ctrl+ 3hoặc Xem -> Bảng màu lệnh ...) và nhập fold all:

ctrl+ k+ 0: Gấp tất cả các cấp (không gian tên, lớp, phương thức, khối)

ctrl+ k+ 1: không gian tên

ctrl+ k+ 2: lớp

ctrl+ k+ 3: phương thức

ctrl+ k+ 4: khối

ctrl+ k+ [hoặc ]: khối con trỏ hiện tại

ctrl+ k+ j: Chưa hoàn thành

Thu gọn hiện được hỗ trợ trong phiên bản 1.0 :

Mã nguồn gấp

Có các hành động gấp mới để thu gọn các vùng mã nguồn dựa trên mức độ gấp của chúng.

Có những hành động để gấp cấp 1 ( Ctrl+ K Ctrl+ 1) lên cấp 5 ( Ctrl+ K Ctrl+ 5). Để mở ra, sử dụng Mở ra tất cả ( Ctrl+ Shift+ Alt+ ]).

Các hành động gấp cấp không áp dụng cho vùng chứa con trỏ hiện tại.

Tôi gặp vấn đề khi tìm ]nút trên bàn phím (bố cục tiếng Na Uy) và trong trường hợp của tôi, đó là Ånút. (Hoặc hai nút trái và một nút bắt đầu từ nút backspace.)

Với JavaScript:

//#region REGION_NAME
   ...code here
//#endregion

Kể từ phiên bản 1.3.1 (2016-07-17), Block sụp đổ thuận tiện hơn nhiều.

Bất kỳ dòng nào được theo sau bởi một dòng thụt lề sẽ có ký tự '-' để cho phép thu gọn. Nếu khối bị sụp đổ, thì nó sẽ được thay thế bằng ký tự '+' sẽ mở khối bị sụp đổ.

( Ctrl+ Shift+ Alt+ ]) Vẫn sẽ ảnh hưởng đến tất cả các khối, đóng một cấp. Mỗi lần sử dụng lặp lại đóng thêm một cấp. ( Ctrl+ Shift+ Alt+ [) Hoạt động theo cách ngược lại.

Hoan hô, sụp đổ khối cuối cùng hoạt động hữu ích.

Không có mẹo kỹ thuật nào ở đây, chỉ cần điều chỉnh đơn giản các tùy chọn của VsCode.

Tôi đã quản lý để hiển thị các điều khiển gập mã luôn trong VsCode bằng cách đi tới Tùy chọn và tìm kiếm 'gấp'. Bây giờ chỉ cần chọn để luôn hiển thị các điều khiển. Điều này hoạt động với mã typecript và HTML của các mẫu trong giải pháp Angular 8 mà tôi đã thử nghiệm với nó.

Điều này đã được thử nghiệm với VsCode Insiders 1.37.0 chạy trên HĐH Windows 10.

v1.42 đang thêm một số tinh chỉnh đẹp mắt vào cách thức và chức năng của nếp gấp. Xem https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#printed-range-highlighting :

Làm nổi bật phạm vi gấp

Phạm vi gấp bây giờ dễ dàng hơn để khám phá nhờ màu nền cho tất cả các phạm vi gấp.

Gấp màu tô đậm Chủ đề: Tối +

Tính năng này được điều khiển bởi trình soạn thảo cài đặt.foldingHighlight và màu sắc có thể được tùy chỉnh với trình chỉnh sửa màu. FoldBackground.

"workbench.colorCustomizations": { "editor.foldBackground": "#355000" }

Tinh chỉnh gấp

Shift + Clicktrên chỉ báo gấp đầu tiên chỉ gấp các phạm vi bên trong. Shift + Clickmột lần nữa (khi tất cả các phạm vi bên trong đã được gấp lại) cũng sẽ gấp cha mẹ. Shift + Clickmột lần nữa mở ra tất cả.

Khi sử dụng lệnh Fold (kb ( editor.fold))] trên một phạm vi đã được gấp lại, phạm vi cha mở ra tiếp theo sẽ được gấp lại.

Trên máy Mac, đó là phím Lệnh RHS ⌘K, không phải bên trái cho các lệnh gấp mã.

Nếu không, phím lệnh bên trái sẽ xóa dòng hiện tại , ⌘K.

Tính năng này hiện được hỗ trợ, kể từ Visual Studio Code 1.17 . Để gấp / thu gọn khối mã của bạn, chỉ cần thêm các thẻ khu vực, chẳng hạn như //#region my block namevà //#endregionnếu mã hóa trong TypeScript / JavaScript.

Thí dụ:

Tiện ích mở rộng VSCode: Cấp độ gấp , một lần gập phím đến mức bạn muốn.

Tôi muốn Visual Studio Code có thể xử lý:

#region Function Write-Log
Function Write-Log {
    ...
}
#endregion Function Write-Log

Ngay bây giờ Visual Studio Code chỉ cần bỏ qua nó và sẽ không thu gọn nó. Trong khi đó Notepad ++ và PowerGUI xử lý việc này tốt.

Cập nhật: Tôi vừa nhận thấy một bản cập nhật cho Visual Studio Code. Điều này hiện được hỗ trợ!

Lưu ý: các phím tắt này chỉ hoạt động như mong đợi nếu bạn chỉnh sửa keybindings.json

Tôi không hài lòng với các phím tắt mặc định, tôi muốn chúng hoạt động như sau:

• Gấp: Ctrl+ Alt+]
• Gấp đệ quy: Ctrl+ ⇧ Shift+ Alt+]
• Gấp tất cả: Ctrl+ ksau đó Ctrl+]
• Mở ra: Ctrl+ Alt+[
• Mở ra đệ quy: Ctrl+ ⇧ Shift+ Alt+[
• Mở ra tất cả: Ctrl+ ksau đó Ctrl+[

Để thiết lập nó:

• Mở Preferences: Open Keyboard Shortcuts (JSON)( Ctrl+ ⇧ Shift+ p)
• Thêm đoạn mã sau vào tệp đó

  Đã có keybindings tùy chỉnh cho gấp / mở? Sau đó, bạn cần phải thay thế chúng.

    {
        "key": "ctrl+alt+]",
        "command": "editor.fold",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+alt+[",
        "command": "editor.unfold",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+shift+alt+]",
        "command": "editor.foldRecursively",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+shift+alt+[",
        "command": "editor.unfoldRecursively",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+[",
        "command": "editor.unfoldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+]",
        "command": "editor.foldAll",
        "when": "editorTextFocus && foldingEnabled"
    },