---
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, в котором я грокаю код и пишу статьи.