![](https://habrastorage.org/getpro/habr/upload_files/98d/b83/549/98db83549246b158d542b19a8aa3aa9a.jpg)
Как при помощи небольших твиков можно улучшить интерфейс VS Code, убрав ненужные визуальные элементы интерфейса.
Содержание:
Вступление
Подготовка
Основная часть
Заключение
Вступление
Обилие всевозможных тем для VS Code радует. На вкус и цвет недостатка в темах нет. Но что делать, если новые темы уже не вызывают восторга, а появляется желание скрыть тот или иной, не такой уж и нужный лично вам, элемент интерфейса. Попробуем сегодня в этом разобраться.
Давайте сначала посмотрим, к какому результату мы придём:
![](https://habrastorage.org/getpro/habr/upload_files/8d2/2ee/fc9/8d22eefc96638fe8838536300e878ce5.jpg)
Было скрыто много чего: горизонтальная и вертикальная полосы прокрутки, миникарта, нумерация строк, вкладки, статус бар, хлебные крошки, иконки и прочие, труднопереводимые на русский язык штуки.
Подготовка
Если вы уже знаете, как обращаться с Settings.JSON, переходите к следующему разделу, нового тут нет ничего.
Для тех, кому это всё впервые, открываем файл настроек Settings.JSON:
Нажимаем комбинацию клавиш: CTRL+SHIFT+P
В выпавшем окне печатаем: "settings.json" и выбираем "Preferences: Open Settings(JSON)".
![](https://habrastorage.org/getpro/habr/upload_files/a80/a25/428/a80a25428a7ca93f032a5c86e32ab93c.jpg)
Открывшийся файл настроек будет наподобие этого(у вас могут быть другие значения):
![](https://habrastorage.org/getpro/habr/upload_files/fe8/dce/6b6/fe8dce6b69b165a95602c5fe254576a4.jpg)
В этот файл, в конец списка, через запятую мы и будем добавлять наши твики. Чтобы визуально разграничить наши твики от того, что уже было до нас в этом файле, добавьте пару пробелов и(или) комментарий, как показано ниже:
![](https://habrastorage.org/getpro/habr/upload_files/40f/da5/a25/40fda5a2532aa13f0fd96c56c6f48560.gif)
Основная часть
Убираем горизонтальную полосу прокрутки
![](https://habrastorage.org/getpro/habr/upload_files/ab9/b98/bee/ab9b98beeb1a72a7944da7d587675891.gif)
Твик:
"editor.scrollbar.horizontal": "hidden"
Убираем вертикальную полосу прокрутки
![](https://habrastorage.org/getpro/habr/upload_files/19c/c00/8dd/19cc008dd55b78e466f33240694b9160.gif)
Твик:
"editor.scrollbar.vertical": "hidden"
Избавляемся от миникарты
![](https://habrastorage.org/getpro/habr/upload_files/35f/5b1/f1a/35f5b1f1abdefa91b8ba75a8ffd3f7d8.gif)
Твик:
"editor.minimap.enabled": false
Скрываем полосу рядом с вертикальной полосой прокрутки
![](https://habrastorage.org/getpro/habr/upload_files/3cb/edc/8ff/3cbedc8ffa6b09a6c9c724bcbe7db090.gif)
Твик:
"editor.overviewRulerBorder": false
Скрываем нумерацию строк
![](https://habrastorage.org/getpro/habr/upload_files/0a8/fde/801/0a8fde8013c6bfbfdcace943e4b18e04.gif)
Твик:
"editor.lineNumbers": "off"
Если возникнет вопрос, как найти нужную строку(например десятую строку):
Жмём CTRL+P
Вбиваем двоеточие и номер строки
Убираем Glyph Margin. Используется при дебаггинге
![](https://habrastorage.org/getpro/habr/upload_files/7e9/e9a/0cb/7e9e9a0cb8798c6bc84e98d4fbed2f00.gif)
Твик:
"editor.glyphMargin": false
Перемещаем Side Bar и Activity Bar на правую сторону
![](https://habrastorage.org/getpro/habr/upload_files/df7/6f9/752/df76f9752218962f9ede7c6e8163d53e.gif)
Твик:
"workbench.sideBar.location": "right"
Скрываем Activity Bar
![](https://habrastorage.org/getpro/habr/upload_files/ad6/fc2/9eb/ad6fc29ebc635ac112f08a0a6de2f542.gif)
Твик:
"workbench.activityBar.visible": false
Показать скрыть Side Bar: CTRL+B
Проводник файлов: CTRL+SHIFT+E
Установки: CTRL+SHIFT+X
Глобальный поиск: CTRL+SHIFT+F
Cкрываем статус бар
![](https://habrastorage.org/getpro/habr/upload_files/1b4/6d7/925/1b46d79253912a6526d88ddde16f0f83.gif)
Твик:
"workbench.statusBar.visible": false
Убираем иконки на вкладках и на "хлебных крошках"
![](https://habrastorage.org/getpro/habr/upload_files/cf1/1fa/b77/cf11fab77a13e37ab596192299f0a2b1.gif)
Твик:
"workbench.editor.showIcons": false
Скрываем вкладки
![](https://habrastorage.org/getpro/habr/upload_files/ad7/722/52b/ad772252b75eee3674118b57b3b4503a.gif)
Твик:
"workbench.editor.showTabs": false
Навигация по вкладкам: CTRL+TAB
Скрываем "хлебные крошки"
![](https://habrastorage.org/getpro/habr/upload_files/d99/556/1dd/d995561dd7a05057e97658049a373c69.gif)
Твик:
"breadcrumbs.enabled": false
Скрываем визуальные границы функций
![](https://habrastorage.org/getpro/habr/upload_files/6a2/d45/437/6a2d45437effd60852a42b9e7b4da756.gif)
Твик:
"editor.renderIndentGuides": false
Избавляемся от подсветки строки, на которой установлен курсор
![](https://habrastorage.org/getpro/habr/upload_files/f17/d12/dba/f17d12dbaf1ed1fe807d91fc8b8cfa0f.gif)
Твик:
"editor.renderLineHighlight": "none"
Получилось довольно неплохо. Давайте сравним до и после:
![](https://habrastorage.org/getpro/habr/upload_files/c89/02b/ed5/c8902bed59b129768abaadf14ad6072f.gif)
Заключение
Разумеется, для кастомизации можно и разных расширений поставить, позволяющих сделать это всё, и ещё много чего. Но, когда расширений итак уже десятки, то с определённого момента, каждое следующее расширение уже как гвоздь в крышку гроба производительности софтины.
Эти твики также применимы и к веб версии Visual Studio Code. По крайней мере те, что я пробовал.
Кстати, именно так выглядит моё рабочее пространство в VS Code, в котором я грокаю код и пишу статьи.