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