Có thể hiển thị các ký tự khoảng trắng, như ký tự khoảng trắng, trong Visual Studio Code không?

Dường như không có tùy chọn nào cho nó trong settings.json(mặc dù đó là một tùy chọn trong Atom.io ) và tôi không thể hiển thị các ký tự khoảng trắng bằng CSS.

Mã VS 1.6.0 trở lên

Như được đề cập bởi aloisdg dưới đây , editor.renderWhitespacebây giờ là một enum dùng một trong hai none, boundaryhoặc all. Để xem tất cả các khoảng trắng:

"editor.renderWhitespace": "all", 

Trước mã VS 1.6.0

Trước 1.6.0, bạn phải đặt editor.renderWhitespacethành true:

"editor.renderWhitespace": true

Nó cũng có thể được thực hiện thông qua menu chính View -> Render Whitespace

CẬP NHẬT (tháng 6 năm 2019)

Đối với những người sẵn sàng để chuyển đổi khoảng trắng nhân vật sử dụng phím tắt, bạn có thể dễ dàng thêm một keybinding cho điều đó.

Trong các phiên bản mới nhất của Visual Studio Code, giờ đây đã có giao diện đồ họa thân thiện với người dùng (nghĩa là không cần nhập dữ liệu JSON, v.v.) để xem và chỉnh sửa tất cả các phím tắt có sẵn. Nó vẫn còn dưới

Tệp> Tùy chọn> Phím tắt (hoặc sử dụng Ctrl+ K Ctrl+ S)

Ngoài ra còn có một trường tìm kiếm để giúp nhanh chóng tìm (và lọc) các tổ hợp phím mong muốn. Vì vậy, bây giờ cả việc thêm mới và chỉnh sửa các tổ hợp phím hiện có dễ dàng hơn nhiều:

Các ký tự khoảng trắng không gian không có liên kết phím mặc định, vì vậy hãy thoải mái thêm một ký tự. Chỉ cần nhấn +dấu ở phía bên trái của dòng liên quan (hoặc nhấnEnter hoặc nhấp đúp vào bất cứ nơi nào trên dòng đó) và nhập kết hợp mong muốn trong cửa sổ bật lên.

Và nếu liên kết phím bạn đã chọn đã được sử dụng cho một số hành động khác, sẽ có một cảnh báo thuận tiện mà bạn có thể nhấp và quan sát (các) hành động nào đã sử dụng liên kết phím đã chọn của bạn:

Như bạn có thể thấy, mọi thứ đều rất trực quan và thuận tiện.
Làm tốt lắm, Microsoft!

Câu trả lời gốc (cũ)

Đối với những người sẵn sàng chuyển đổi các ký tự khoảng trắng bằng phím tắt , bạn có thể thêm một ràng buộc tùy chỉnh vào tệp keybindings.json ( Tệp> Tùy chọn> Phím tắt ).

Ví dụ :

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+i",
        "command": "editor.action.toggleRenderWhitespace"
    }
]

Ở đây tôi đã chỉ định kết hợp Ctrl+ Shift+ iđể chuyển đổi các ký tự vô hình, tất nhiên bạn có thể chọn kết hợp khác.

Hiển thị các ký tự khoảng trắng trong Visual Studio Code

thay đổi settings.json, bằng cách thêm các mã sau!

// Place your settings in this file to overwrite default and user settings.
{
    "editor.renderWhitespace": "all"
}

chỉ như thế này!
(PS: không có tùy chọn "đúng" !, Thậm chí nó cũng hoạt động.)

Chỉ để chứng minh những thay đổi editor.renderWhitespace : none||boundary||allsẽ làm với VSCode của bạn, tôi đã thêm ảnh chụp màn hình này :
.

Trong trường hợp Tabđang →và Spacelà.

Nó không booleancòn là một nữa. Họ chuyển sang một enum. Bây giờ chúng ta có thể lựa chọn giữa: none, boundary, và all.

// Controls how the editor should render whitespace characters,
// posibilties are 'none', 'boundary', and 'all'.
// The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

Bạn có thể thấy khác biệt ban đầu trên GitHub .

* Cập nhật Bản phát hành tháng 2 năm 2020 * xem https://github.com/microsoft/vscode/issues/90386

Trong v1.43, giá trị mặc định sẽ được thay đổi thànhselection từ nonetrong v1.42.

"editor.renderWhitespace": "selection"  // default in v1.43

Cập nhật cho v1.37: thêm tùy chọn hiển thị khoảng trắng trong văn bản đã chọn. Xem ghi chú phát hành v1.37, kết xuất khoảng trắng .

Các editor.renderWhitespacethiết lập bây giờ hỗ trợ một selectiontùy chọn. Với tùy chọn này được đặt, khoảng trắng sẽ chỉ được hiển thị trên văn bản đã chọn:

"editor.renderWhitespace": "selection"

và

"workbench.colorCustomizations": {    
  "editorWhitespace.foreground": "#fbff00"
}

Để có được sự khác biệt để hiển thị khoảng trắng tương tự như git diffđược đặt diffEditor.ignoreTrimWhitespacethành false. edit.renderWhitespacechỉ hữu ích một chút.

// Controls if the diff editor shows changes in leading or trailing whitespace as diffs
"diffEditor.ignoreTrimWhitespace": false,

Để cập nhật cài đặt, hãy truy cập

Tệp> Tùy chọn> Cài đặt người dùng

Lưu ý cho người dùng Mac: Menu Tùy chọn nằm dưới Mã không phải Tệp. Ví dụ: Mã> Tùy chọn> Cài đặt người dùng.

Điều này sẽ mở ra một tập tin có tiêu đề "Cài đặt mặc định". Mở rộng diện tích //Editor. Bây giờ bạn có thể thấy nơi tất cả các editor.*cài đặt bí ẩn được đặt. Tìm kiếm (CTRL + F) cho renderWhitespace. Trên hộp của tôi, tôi có:

// Controls how the editor should render whitespace characters, posibilties are 'none', 'boundary', and 'all'. The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

Để thêm vào sự nhầm lẫn, cửa sổ bên trái "Cài đặt mặc định" không thể chỉnh sửa. Bạn cần ghi đè chúng bằng cửa sổ bên phải có tiêu đề "settings.json". Bạn có thể sao chép cài đặt dán từ "Cài đặt mặc định" sang "settings.json":

// Place your settings in this file to overwrite default and user settings.
{
     "editor.renderWhitespace": "all",
     "diffEditor.ignoreTrimWhitespace": false
}

Tôi cuối cùng đã tắt renderWhitespace.

Tùy chọn để hiển thị khoảng trắng hiện xuất hiện dưới dạng tùy chọn trên menu View, dưới dạng "Toggle Render Whitespace" trong phiên bản 1.15.1 của Visual Studio Code.

Nhấn nút F1, sau đó nhập "Toggle Render Whitespace" hoặc các phần của nó bạn có thể nhớ :)

Tôi sử dụng phiên bản vscode 1.22.2 để đây có thể là một tính năng không tồn tại vào năm 2015.

1. Mở tùy chọn người dùng. Phím tắt: CTR + SHIFT + P-> Tùy chọn: Mở Cài đặt người dùng;

2. Chèn vào trường tìm kiếm Khoảng trắng và chọn tất cả tham số