Показать пробельные символы в коде Visual Studio


411

Можно ли отображать пробельные символы, такие как пробел, в коде Visual Studio?

Похоже, что нет опции для этого settings.json(хотя это опция в Atom.io ), и я не смог отобразить пробельные символы с помощью CSS.

Ответы:


608

VS Code 1.6.0 и выше

Как упомянуто aloisdg ниже , editor.renderWhitespaceтеперь enum принимает либо none, boundaryлибо all. Чтобы просмотреть все пробелы:

"editor.renderWhitespace": "all", 

До VS Code 1.6.0

До версии 1.6.0, вы должны были набор editor.renderWhitespaceдля true:

"editor.renderWhitespace": true

25
Есть ли способ сделать это только для выбранных символов, как "draw_white_space": "selection"вариант Sublime ?
noio

10
@noio Пока нет, но github уже в
revo

Но это только показывает пробелы в начале и конце строк?
drzaus

14
@drzaus, "editor.renderWhitespace": "boundary"будет началом и концом строк, где as "deitor.renderWhitespace": "all"будет показывать все пробелы. @AlexanderGonchiy, я нашел полезным открыть файл> настройки> настройки пользователя (или настройки рабочего пространства) и использовать команду «найти» в папке настроек по умолчанию, чтобы найти то, что мне нужно.
JackChance

1
Файл -> Настройки -> Настройки. Ищите «пробел». Под «Редактор: Render Whitespace» есть выпадающий список, чтобы выбрать новый параметр. (v1.13.2)
CRice


67

ОБНОВЛЕНИЕ (июнь 2019 г.)

Для тех, кто хочет переключать пробельные символы с помощью сочетания клавиш, вы можете легко добавить связывание клавиш для этого.

В последних версиях кода Visual Studio теперь имеется удобный графический интерфейс (т.е. нет необходимости вводить данные JSON и т. Д.) Для просмотра и редактирования всех доступных сочетаний клавиш. Это все еще под

Файл> Настройки> Сочетания клавиш (или использовать Ctrl+ K Ctrl+ S)

Существует также поле поиска, которое поможет быстро найти (и отфильтровать) нужные сочетания клавиш. Так что теперь добавлять новые и редактировать существующие сочетания клавиш теперь намного проще:

введите описание изображения здесь


Переключение пробельных символов не имеет привязки по умолчанию, поэтому вы можете добавить ее. Просто нажмите +знак слева от соответствующей строки (или нажмите Enter, или дважды щелкните в любом месте этой строки) и введите нужную комбинацию во всплывающем окне.

И если выбранная вами привязка клавиш уже используется для каких-либо других действий, появится удобное предупреждение, по которому можно щелкнуть и посмотреть, какие действия уже используют выбранную привязку клавиш:

введите описание изображения здесь

Как видите, все очень интуитивно понятно и удобно.
Хорошая работа, Microsoft!


Оригинальный (старый) ответ

Для тех, кто хочет переключать пробельные символы с помощью сочетания клавиш , вы можете добавить пользовательскую привязку к файлу keybindings.jsonФайл»> «Установки»> «Сочетания клавиш» ).

Пример :

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

Здесь я назначил комбинацию Ctrl+ Shift+ iдля переключения невидимых символов, вы можете, конечно , выбрать другую комбинацию.


2
Моя Visual Studio использует ctrl+e ctrl+sпо умолчанию. Для сочетаний клавиш, подобных этой, вам нужно поставить пробел между двумя комбинациями, а не запятую.
t3chb0t

50

Показать пробельные символы в коде Visual Studio

измените setting.json, добавив следующие коды!

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

именно так!
(PS: нет «истинного» варианта!, Даже он тоже работает.) введите описание изображения здесь


"editor.renderWhitespace": "все"
xgqfrms

29

Просто , чтобы продемонстрировать изменения , которые editor.renderWhitespace : none||boundary||allбудут делать для вашего VSCode я добавил этот скриншот:
введите описание изображения здесь.

Где Tabэто и Spaceесть.


2
PS Цветовая схема не является частью изменения (у меня есть дополнительный плагин для этого)
Зак S

1
Плагин можно найти здесь: marketplace.visualstudio.com/…
Зак С

16

Это booleanбольше не Они перешли на enum. Теперь мы можем выбирать между: none, boundaryи 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",

Вы можете увидеть оригинальный diff на GitHub .


2
Также возможно установить расширение под названием Trailing Spaces, чтобы показывать только конечные пробелы.
Стефан

11

* Обновление от февраля 2020 г. * см. Https://github.com/microsoft/vscode/issues/90386.

В версии 1.43 значениеselection по умолчанию будет изменено с того, noneчто было в версии 1.4.2.

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

Обновление для v1.37: добавлена ​​возможность отображать пробелы только внутри выделенного текста. Смотрите v1.37 примечания к выпуску, визуализируйте пробелы .

Параметр editor.renderWhitespaceтеперь поддерживает selectionпараметр. Если эта опция установлена, пробел будет отображаться только на выделенном тексте:

"editor.renderWhitespace": "selection"

а также

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

демонстрация пробела рендеринга в выделении



это изменение цвета потрясающе, спасибо.
Ян Смит

Если вы хотите сделать его немного менее существующим, то против кода также принимает альфа-канал, поэтому # fbff0040 также будет действительным, делая точки более прозрачными,
Relief.melone

6

Для того , чтобы получить диф для отображения пробельного аналогичен git diffнабор diffEditor.ignoreTrimWhitespaceв ЛОЖЬ. edit.renderWhitespaceтолько незначительно полезно.

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

Для обновления настроек перейдите на

Файл> Настройки> Настройки пользователя

Примечание для пользователей Mac: меню «Настройки» находится в разделе «Код, а не файл». Например, Код> Настройки> Настройки пользователя.

Это открывает файл под названием «Настройки по умолчанию». Расширить область //Editor. Теперь вы можете увидеть, где editor.*находятся все эти загадочные настройки. Поиск (CTRL + F) для renderWhitespace. На моей коробке у меня есть:

// 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",

Чтобы добавить к путанице, левое окно «Настройки по умолчанию» не редактируется. Вам необходимо переопределить их, используя правое окно с названием «settings.json». Вы можете скопировать настройки вставки из «Настройки по умолчанию» в «settings.json»:

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

Я закончил тем, что выключил renderWhitespace.


5

Параметр, позволяющий сделать пробел видимым, теперь отображается как параметр в меню «Вид» как «Переключить визуализацию пробелов» в версии 1.15.1 кода Visual Studio.


5

Нажмите кнопку F1, затем введите «Toggle Render Whitespace» или ее части, которые вы можете вспомнить :)

Я использую vscode версии 1.22.2, так что это может быть функция, которая не существовала еще в 2015 году.


1
это работает! Но он только переключается между «все» и «нет», пропуская параметр «граница».
DiegoDD

5
  1. Откройте настройки пользователя. Сочетание клавиш: CTR + SHIFT + P-> Настройки: Открыть настройки пользователя;

  2. Вставьте в поле поиска Пробелы и выберите все параметры введите описание изображения здесь


Кроме того, для VS Code 1.45 (в OSX) по умолчанию было выбрано.
Шейн
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.