Настройка Visual Studio code (VS Code)

Используете VS Code на новом устройстве? Или просто пользуетесь впервые? Тогда эта статья для вас!

Зачастую бывает, что на новом устройстве нужно снова настроить редактор кода под себя. Чтобы ничего не забыть и не упустить в очередной раз - в статье настроим VS Code для удобной работы с кодом при вёрстке.

Содержание:

1. Где скачать VS Code и как поменять язык
2. Настройка VS Code
   2.1. Подключение Copilot
   2.2. Выбор темы интерфейса
3. Расширенные настройки VS Code
   3.1. Приветственное окно
   3.2. Убираем всплывающие подсказки в коде
   3.3. Возможность менять размер текста колесиком мышки
   3.4. Плавная прокрутка
   3.5. Язык по умолчанию для нового файла
   3.6. Убрать выделение русского текста
   3.7. Отключить отправку телеметрии

1. Установка плагинов VS Code
   4.1. Плагин Live Server
   4.2. Плагин BEM Helper
   4.3. Плагин eCSStractor for VSCode
   4.4. Плагин Image Preview

1. Где скачать VS code и как поменять язык

Устанавливаем с официального сайта. И проходим стандартный этап установки. Далее открываем VSCode, стартовое окно выглядит так:

Я советую не переводить язык с английского на русский. Огромная часть реально нужных статей, документации и гайдов по вебу на английском, так что со временем привыкнете и начнёте понимать их "на автомате". Это отличный бонус и скилл)

Но если всё же хочется видеть интерфейс на русском языке, то сделайте следующее:

1. Нажимаем на Extensions (расширения) - отмечено единицей на скрине ниже
2. Вводим в поиске "russian" и жмем на первый результат
3. Нажимаем на Install, чтобы установить расширение. И после этого перезапускаем программу.

2. Настройка VS Code

Сначала пройдем этап стандартных настроек в приветственном окне.

2.1 Подключение Copilot

На старте первым делом предлагают использовать возможности нейронки Copilot. Но в России без ВПН он недоступен (!), поэтому можно просто пропустить этот пункт.

Или не пропускать и сразу же связать VS Code со своей учеткой Github. Для этого просто жмем голубую кнопку Set up Copilot и связываем программу со своим аккаунтом Github.

2.2 Выбор темы интерфейса

На вкус и цвет, как говорится, выбираем тему под своё удобство.

Чтобы увидеть больше вариантов, жмем "See More Themes...". Если вы знаете название любимой темы, можно найти ее по поиску. Жмем на плюс:

Я пользуюсь темой Sublime Text 4 Theme от EmilijanMB. Она мне приглянулась из редактора кода Sublime Text - удобное выделение цветами функций, переменных и т.п. + глазам не напряжно длительно смотреть на код. Поэтому выбираю и советую её.

VS Code выдаст такое предупреждение:

Жмем всё равно "Trust Publisher & Install". Это нормально, VS Code просто предупреждает про установку расширения от стороннего разработчика.

Дальше в окне приветствия просто жмем "Next Section" и не проходя по остальным пунктам просто закрываем окно настройки. По кнопке Watch Tutorial откроется окно браузера с гайдами и документацией по VS Code.

Не проходим по остальным пунктам, потому что кастомно поменяем остальные настройки под себя.

3. Расширенные настройки VS Code

3.1 Приветственное окно

1. Если не хотим, чтобы страница "Welcome" открывалась каждый раз при запуске программы, то убираем чекбокс "Show welcome page on startup" внизу окна.

2. Чтобы вновь его увидеть, в верхнем меню можно открыть через "Help" -> "Welcome".

3.2 Убираем всплывающие подсказки в коде

Когда мы наводим курсор на, например, какой-то тег, автоматически всплывает подсказка. Уберем её.

Для этого переходим в "Settings" (Настройки - см. скрин ниже) или вызываем сочетанием клавиш Ctrl+б (на рус. раскладке)

1. Пишем в поиске "hover"
2. Снимаем галочку с пункта Hover: Enabled

Теперь подсказки всплывать и мешать не будут!

3.3 Возможность менять размер текста колесиком мышки

По умолчанию в редакторе стоит 14px размер текста. Но если мы хотим удобно менять его, сделать это можем колесиком мышки + зажатым Ctrl.

Для этого всё в тех же Настройках пишем в поиске "mouse" и ставим галочку на пункт "Mouse Wheel Zoom".

3.4 Плавная прокрутка

По умолчанию прокрутка в VSCode "дёрганная", чтобы это поправить:

1. В поиске настроек вводим "Smooth"
2. Отмечаем галочку в пункте "Smooth Scrolling"

3.5 Язык по умолчанию для нового файла

При создании нового файла через VSCode будет удобнее, если он будет сразу в формате .html (или любом другом). Чтобы задать формат, делаем:

1. В поиске вводим "default language"
2. Вписываем в пункт "Default Language" желаемый формат. Например, html.

3.6 Убрать выделение русского текста

VS Code по умолчанию выделяет русские буквы и слова желтой рамкой. Уберём это.

Сначала уберем выделение слов и букв комментариях:

1. В поиске настроек вписываем Include Comments
2. Выбираем false из списка в Unicode Highlight: Include Comments

И уберём выделение в самом коде:

1. Вписываем в поиске non basic ASCII
2. Выбираем false в списке

Отлично! Теперь не будет никаких желтых рамок для русского текста.

3.7 Отключить отправку телеметрии

По умолчанию VS Code отправляет анонимную телеметрию - техническую статистику использования. А это:

• Отчеты о падениях (Crash Reports)
• Неожиданные ошибки (Error Telemetry)
• Статистика использования (Usage Data)

Отключим отправку. Для этого:

1. В поиске настроек вписываем telemetry level
2. Выбираем из списка Off

4. Установка плагинов VS Code

Плагины упрощают работу с редактором и открывают дополнительный возможности. Установим нужные!

4.1 Плагин Live Server

Этот плагин - база для удобной вёрстки. Автоматически обновляет страницу при сохранении файлов проекта и запускает локальный сервер на порту 5500.

1. Открываем "Расширения". Вводим в поиске Live Server
2. Жмем Install

4.2 Плагин BEM Helper

Дабы ускорить процесс написания классов по методологии БЭМ, установим плагин BEM Helper.

1. Жмем "Расширения"
2. В поиске пишем "bem"
3. Устанавливаем расширение от Box-Of-Hats, жмем Install.

С помощью сочетания клавиш Alt+B и после них нажатие на англ. E автоматически добавится div с именем родителя, останется только дописать полное название нового класса. Удобно!

4.3 Плагин eCSStractor for VSCode

Данный плагин позволяет мгновенно добавить в CSS файл имеющиеся классы для задания стилей.

1. Вводим в поиске "ecss"
2. Устанавливаем, нажав "install"

Как работает плагин:

Допустим, у нас есть такая структура:

Выделяем кусок кода, для которого нужно задать стили и жмем eCSStractor Run.

Переходим в файл со стилями и жмем Ctrl+V - т.е. вставляем. И видим, что в CSS файл перенеслись все названия классов, которые были в выделенном коде. Полезный плагин!

4.4 Плагин Image Preview

Этот плагин позволяет посмотреть картинку прямо в файле с html кодом.

1. Вводим в поиске image
2. Жмем "Install". Плагин от Kiss Tamas.

Плагин работает так:

Слева рядом с номером строки видим подключенную картинку из src="". Удобно, когда изображений много и важно не запутаться в них. Если навести курсор на картинку, покажется превью картинки и ее размеры.

*Отмечу, что превью картинки при наведении курсора работает только с включенным пунктом Hover:Enabled в настройках (который мы отключили в пункте 3.2 этой статьи).

Вот и все настройки!

😄👌 Было полезно и нужно?

Поделись статьёй со знакомыми и друзьями! Мне будет приятно!

Подпишись на мой Телеграм-канал, там я рассказываю про всё, что связано с современным ВЕБом: чистая вёрстка, фронтенд, немного бэкенда и полезные фишки. Заходи - ТЕЛЕГРАМ КАНАЛ (тык)

А вот еще какие статьи написаны мной:

1. Сборник статей "Разгоняем показатели PageSpeed и Lighthouse до 100"
2. Как запустить первый проект на React: инструкция (через Vite)
3. Установка Open Server Panel 6.3.5 и инструкция: как его настроить

...и много других в блоге Телетайп - перейти в блог