tech-tips/Программное обеспечение/Текстовые редакторы/VSCode/Твикаем VS Code - убираем визуальный шум, доводим до совершенства.md

178 lines
6.2 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
source: https://habr.com/ru/post/650561/
tags:
- vscode
---
![[98db83549246b158d542b19a8aa3aa9a.jpg]]
Как при помощи небольших твиков можно улучшить интерфейс :dev_vscode_original: VS Code, убрав ненужные визуальные элементы интерфейса.
## Вступление
Обилие всевозможных тем для VS Code радует. На вкус и цвет недостатка в темах нет. Но что делать, если новые темы уже не вызывают восторга, а появляется желание скрыть тот или иной, не такой уж и нужный лично вам, элемент интерфейса. Попробуем сегодня в этом разобраться.
Давайте сначала посмотрим, к какому результату мы придём:
![[Pasted image 20240106211227.jpg]]
Было скрыто много чего: горизонтальная и вертикальная полосы прокрутки, миникарта, нумерация строк, вкладки, статус бар, хлебные крошки, иконки и прочие, труднопереводимые на русский язык штуки.
## Подготовка
Если вы уже знаете, как обращаться с Settings.JSON, переходите к следующему разделу, нового тут нет ничего.
Для тех, кому это всё впервые, открываем файл настроек Settings.JSON:
Нажимаем комбинацию клавиш: CTRL+SHIFT+P
В выпавшем окне печатаем: "settings.json" и выбираем "Preferences: Open Settings(JSON)".
![[a80a25428a7ca93f032a5c86e32ab93c.jpg]]
Открывшийся файл настроек будет наподобие этого(у вас могут быть другие значения):
![[fe8dce6b69b165a95602c5fe254576a4.jpg]]
В этот файл, в конец списка, через запятую мы и будем добавлять наши твики. Чтобы визуально разграничить наши твики от того, что уже было до нас в этом файле, добавьте пару пробелов и(или) комментарий, как показано ниже:
![](Pasted%20image%2020240106205144.jpg)
## Основная часть
### Убираем горизонтальную полосу прокрутки
![](Pasted%20image%2020240106210453.jpg)
```json
"editor.scrollbar.horizontal": "hidden"
```
### Убираем вертикальную полосу прокрутки
![](Pasted%20image%2020240106205217.jpg)
```json
"editor.scrollbar.vertical": "hidden"
```
### Избавляемся от миникарты
![](Pasted%20image%2020240106205223.jpg)
```json
"editor.minimap.enabled": false
```
### Скрываем полосу рядом с вертикальной полосой прокрутки
![](Pasted%20image%2020240106205233.jpg)
```json
"editor.overviewRulerBorder": false
```
### Скрываем нумерацию строк
![](Pasted%20image%2020240106205258.jpg)
```json
"editor.lineNumbers": "off"
```
Если возникнет вопрос, как найти нужную строку(например десятую строку):
- Жмём `CTRL`+`P`
- Вбиваем двоеточие и номер строки
### Убираем Glyph Margin. Используется при дебаггинге
![](Pasted%20image%2020240106205324.jpg)
```json
"editor.glyphMargin": false
```
### Перемещаем Side Bar и Activity Bar на правую сторону
![](Pasted%20image%2020240106205458.jpg)
```json
"workbench.sideBar.location": "right"
```
### Скрываем Activity Bar
![](Pasted%20image%2020240106205518.jpg)
```
"workbench.activityBar.visible": false
```
- Показать скрыть Side Bar: `CTRL`+`B`
- Проводник файлов: `CTRL`+`SHIFT`+`E`
- Установки: `CTRL`+`SHIFT`+`X`
- Глобальный поиск: `CTRL`+`SHIFT`+`F`
### Скрываем статус бар
![](Pasted%20image%2020240106205554.jpg)
```json
"workbench.statusBar.visible": false
```
### Убираем иконки на вкладках и на "хлебных крошках"
![](Pasted%20image%2020240106205629.jpg)
```json
"workbench.editor.showIcons": false
```
### Скрываем вкладки
![](Pasted%20image%2020240106205642.jpg)
```json
"workbench.editor.showTabs": false
```
Навигация по вкладкам: `CTRL`+`TAB`
### Скрываем "хлебные крошки"
![](Pasted%20image%2020240106205705.jpg)
```json
"breadcrumbs.enabled": false
```
### Скрываем визуальные границы функций
![](Pasted%20image%2020240106205723.jpg)
```json
"editor.renderIndentGuides": false
```
### Избавляемся от подсветки строки, на которой установлен курсор
![](Pasted%20image%2020240106205750.jpg)
```json
"editor.renderLineHighlight": "none"
```
Получилось довольно неплохо. Давайте сравним до и после:
![[c8902bed59b129768abaadf14ad6072f.gif]]
## Заключение
Разумеется, для кастомизации можно и разных расширений поставить, позволяющих сделать это всё, и ещё много чего. Но, когда расширений итак уже десятки, то с определённого момента, каждое следующее расширение уже как гвоздь в крышку гроба производительности софтины.
Эти твики также применимы и к [веб версии](https://vscode.dev/) Visual Studio Code. По крайней мере те, что я пробовал.
Кстати, именно так выглядит моё рабочее пространство в VS Code, в котором я грокаю код и пишу статьи.