VS Code - Знакомство и настройки

Содержание:

Интерфейс
Плагины (расширения)
Настройки
Режимы экрана
Сочетания клавиш

Интерфейс

Интерфейс у редактора кода достаточно простой, хотя некоторые детали требуют дополнительного рассмотрения и пояснений. Особенно это актуально для тех, кто только начинает изучать верстку или программирование и пока не знаком с базовыми рабочими элементами редакторов кода. Интерфейс редактора состоит:
- Сверху – Главное меню (Menu Bar)
- Слева - Панель действий (Active Bar)
  
  Содержит самые используемые функции редактора:
  - Проводник
    
    Здесь отображается файловая структура выбранного проекта с папками и файлами. С его помощью удобно открывать нужный файл для редактирования. Также во встроенном проводнике можно создавать новые файлы и директории проекта.
  - Поиск
    
    Позволяет находить определенный фрагмент кода в открытых файлах проекта.
  - Система управлений версий
    
    Позволяет осуществлять контроль версий проекта, например, с помощью Git.
  - Запуск и отладка
    
    С помощью этого инструмента можно запускать выполнение кода и смотреть на его поведение. Функциональность можно расширить за счет дополнительных плагинов.
  - Расширения
  - Настройка аккаунта
    
    Вы можете авторизоваться в своем профиле, чтобы применить уже установленные ранее настройки для VS Code
  - Настройки
    
    Здесь представлены основные настройки, которые может менять пользователь. Их тут много и без сторонних плагинов.
    
    Данная панель может содержать и другие полезные функции, которые можно добавить самостоятельно при установке расширений и настройке панели. Данные инструменты можно как включать, так и отключать при необходимости.
- Снизу – строка состояния (Status Bar)
  
  В самой нижней части интерфейса окна программы находится строка состояния. Там показывается количество ошибок и предупреждений, которые возникли в ходе выполнения кода (слева).
- По центру – рабочая область
  
  Рабочая область состоит:
  - Основной боковой панели слева (Primary SideBar)
    
    Управляет проводником, поиском, системой контроля версий и другими функциями; Ctrl+b – включение и отключение панели.
  - Справа (по центру) область набора кода
    
    Код располагается во вкладках и в каждом окне есть мини-карта.
  - Снизу – нижняя панель
    
    Проблемы, выходные данные, консоль отладки и терминал и др.; Ctrl+j – включение и отключение панели.
Плагины (расширения)

Начнем с плагинов, потому что именно с помощью плагинов или расширений можно изменить языковые настройки, и выбрать русский или украинский язык. Итак - приступим... В панели действий (Active Bar) выбираем вкладку “расширения”(extensions)
- Russian Language Pack – руссификатор.
  Программа по умолчанию на английском языке. Для изменения языка на русский необходимо установить данный плагин:
  - В поисковой строке основной боковой панели слева (Primary SideBar) введите “Russian Language Pack for Visual Studio Code”.
  - В результатах выдачи сразу покажут страницу этого плагина. Нажмите кнопку “Install”. После этого программа попросит перезапустить ее и откроется уже с русифицированным интерфейсом.
- indent-rainbow – раскрашивает отступы для удобства ориентирования в коде.
- htmltagwrap – для оборачивания выбранного содержимого в тег. Выделяем текст, который хотим обернуть в тег и нажимаем сочетание клавиш alt+w.
- eCSStractor for VSCode – для быстрого копирования классов в css и scss файлы с html.
- HTML to CSS autocompletion – это расширение добавляет автодополнение и подсказки для имен классов созданных в HTML-коде при редактировании файла стилей CSS Это существенно облегчает процесс написания кода, так как вы можете быстро и точно выбирать нужные классы из доступных вам в HTML-коде. Работает подобно расширению IntelliSense for CSS class names in HTML, только в обратном направлении.
- IntelliSense for CSS class names in HTML – это расширение добавляет автодополнение и подсказки для имен классов CSS в HTML-коде. Это существенно облегчает процесс написания кода, так как вы можете быстро и точно выбирать нужные классы из доступных вам стилей.
- HTML End Tag Labels – это расширение для Visual Studio Code, которое помогает улучшить работу с HTML-кодом, делая его более читаемым и удобным. Оно добавляет подсказки с названием классов к закрывающим тегам HTML-элементов, чтобы облегчить визуальное отслеживание структуры кода. Это особенно полезно при работе с большими и сложными HTML-документами.
- CSS Peek – поиск классов с HTML в CSS и SCSS.
- Live Preview – предварительный просмотр результатов прямо в редакторе (встроенный браузер).
- Live Server – Помогает смотреть изменения файла в реальном времени в браузере и даже в нескольких (разных) браузерах.
- Image preview – предварительный вывод подключаемого изображения в тексте кода. Добавляет мини изображение в поле написания кода.
- Google Translate –(ctrl+alt+t – выделенный текст будет переведен,alt+t -перевести и скопировать, ctrl+shift+t – просто перевести (можно увидеть перевод просто наведением на выделенную фразу при включенном плагине в панели состояния)).
- Google Fonts – подключение шрифтов Google (ctrl+shift+p – ищем в списке пункт google fonts insert <link> - нажимаем на него - получаем список шрифтов – ищем необходимый нам и нажимаем на нем).
- CSS Responsive – для легкого преобразования значений в % без применения калькулятора.
- CSS Flexbox Cheatsheet – подсказки по flexbox.
- Live Sass Compiler – компилирует scss файлов в css файлы (в его комплект входит расширение Live Server).
- SCSS IntelliSense –подсказки при работе с препроцессором Sass.
- SCSS Formatter – форматирует scss файлы.
- Better Comments –– работа с комментариями, для выделения комментариев другими цветами в зависимости от их назначения.
- BEM Helper – помощник в работе с методологией БЭМ.
- Project Manager – управление несколькими проектами.
- ftp-simple – для загрузки, выгрузки нашего проекта на и с sftp/ftp-server. Работа на удаленном сервере.
- px to rem – перевод пикселей в условные единицы при помощи горячих клавиш Alt+Z.
- Compare Folders – помогает сравнивать папке с файлами проекта при их дублировании, то есть контролировать изменения в папках и файлах если не используем систему контроля версий.
- CSS Grid Snippets – добавляющее фрагменты CSS Grid в VS Code
- Bookmarks – создает закладки в коде, чтобы быстро перемещаться между разными участками вашего проекта.
- Debugger for Firefox – позволяет разработчикам отлаживать веб-приложения, работающие в браузере Mozilla Firefox.
- Easy LESS – помогает работать с препроцессором LESS в Visual Studio Code.
- GitHub Pull Requests and Issues – это расширение позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code.
- Code Spell Checker + Russian - Code Spell Checker + Ukrainian - Code Spell Checker - проверка орфографии при написании текста и кода.
Настройки

Visual Studio Code позволяет выполнить настройку параметров как для всей программы в целом, так и задать их индивидуально для определенных проектов. Для получения доступа к параметрам кликните по иконке "шестеренки" (см.поз.1 на рис.) и выберите в контекстном меню “Параметры” (см.поз.2 на рис.) или воспользуйтесь сочетанием клавиш “Ctrl+,”. Для удобного и быстрого поиска необходимых параметров в настройках есть строка поиска. Введя название необходимого параметра мы можем быстро его найти.

Давайте приступим к рассмотрению, некоторых основных настроек, которые может изменить пользователь:
- Настройка отображения кода
  
  Для удобного редактирования кода в редакторе кода VS Code есть возможность настроить его отображение. Например, изменить размер и семейство шрифта, отступы и табуляцию. Давайте рассмотрим настройку этих параметров.
  - Font Size - размер шрифта
    
    В VS Code по умолчанию установлен 14-й размер шрифта, но его можно изменить на любой другой удобный для нас. Для этого развернем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.), находим блок “Шрифт” (поз. 2 на рис.) и находим пункт “Font Size” (поз. 3 на рис.), и в поле (поз. 4 на рис.) вводим необходимый нам размер шрифта.
    
    Этим мы настроим сохраненный размер шрифта который у нас будет отображаться при открытии редактора. Но если мы захотим в процессе работы его изменить, то это можно сделать сочетанием клавиш ctrl + или ctrl - (что позволяет поменять размер шрифта во всей программе, включая размер шрифта в меню программы), или зажав ctrl прокручиваем колесико мышки вверх - вниз (это позволяет менять шрифт только в области редактирования кода).
  - Font Family - настройка семейства шрифта
    
    Кроме размера шрифта в VS Code есть возможность поменять и сам шрифт. Для этого разворачиваем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.), находим блок “Шрифт” (поз. 2 на рис.) и находим пункт “Font Family” (поз. 3 на рис.), и в поле (поз. 4 на рис.) вручную прописываем название шрифта, который мы хотим использовать по умолчанию для отображения нашего кода, а также указываем его тип (это мы можем сделать если стандартные настройки шрифта нас не устраивают).
  - Tab Size - Настройка шага табуляции в пробелах
    
    По умолчанию размер Tab-ов установлен на значении в 4 пробела, что для некоторых команд разработчиков является стандартом в оформлении кода. Однако если в вашей команде установлены другие стандарты, то данная настройка позволит нам изменить данный параметр шага табуляции, то есть изменить количество пробелов на любое необходимое для нас значение.
    
    Для выполнения данной настройки выбираем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.), находим пункт “Tab Size” (поз.2 на рис.) и в поле (поз. 3 на рис.) вводим необходимое количество пробелов для вашего кода (если это количество нужно изменить)
  - Render Whitespace - управляет отрисовкой пробелов в редакторе
    
    Данная настройка помогает увидеть, где поставлены пробелы и их количество. Благодаря отрисовке пробелов мы можем увидеть, где мы поставили лишний пробел или же не установили его в том месте, где он должен быть.
    
    Выбираем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.), находим пункт “Render Whitespace” (поз. 2 на рис.) и в поле (поз. 3 на рис.) выбираем подходящий для нас вариант отрисовки пробелов:
    - none: нет никакой дополнительной отрисовки;
    - boundary: отрисовываются все пробелы, кроме одиночных между слов;
    - selection: пробелы отрисовываются только в выделенном тексте (этот параметр выбран по умолчанию);
    - trailing: отрисовываются конечные пробелы;
    - all: отрисовываются все пробелы.
  - Cursor Style - настройка стиля курсора
    
    В данных настройках можно выбрать стиль курсора. Разворачиваем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.), находим блок “Курсоры” (поз. 2 на рис.) и находим пункт “Cursor Style” (поз. 3 на рис.), и в поле (поз. 4 на рис.) выбираем один из доступных 6-ти стилей курсора.
  - Insert Space - настройка отображения табуляции
    
    Данная настройка отвечает за действие редактора при нажатии на клавишу Tab. По умолчанию при нажатии клавиши Tab будут отображатся пробелы. Если снять галочку в настройке, то редактор будет вставлять знаки табуляции. Данная настройка необходима в случае если в команде вместо пробелов, как стандарт, используются знаки табуляции. Выбираем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.), находим пункт “Insert Space” (поз. 2 на рис.) и можем установить или убрать галочку с параметра.
- Настройка форматирования
  
  В Visual Studio Code есть несколько параметров, отвечающих за форматирование кода. С помощью него можно, например, быстро исправить съехавшую табуляцию в документе (по умолчанию для этого используется сочетание клавиш Shift+Alt+F) или же настроить правильное форматирование HTML документов в соответствии общепринятых стандартов оформления. Также есть возможность выбрать параметры для автоматического форматирования кода в файлах.
  - Настройка форматирования HTML документов в соответствии с общепринятыми стандартами оформления.
    - Добавление отступов (табуляции) перед началом разделов <head> и <body>
      
      Для данной настройки перейдите в “Параметры”. В дереве параметров разворачиваем вкладку “Расширения” (см. поз.1 на рис.). Находим пункт “HTML” (см. поз.2 на рис.). Ищем параметр “HTML > Format: Indent Inner HTML” (см. поз.3 на рис.) И устанавливаем галочку напротив “Отступ для разделов и”
    - Удаление пустой строки перед началом разделов <head> и <body>
      
      Для настройки данного параметра перейдите в “Параметры”. В дереве параметров разворачиваем вкладку “Расширения” (см. поз.1 на рис.). Находим пункт “HTML” (см. поз.2 на рис.). Ищем параметр “HTML > Format: Extra Liners” (см. поз.3 на рис.). И нажимаем “Изменить в settings.json“ (см. поз.4 на рис.). В открывшемся файле “settings.json” в строке "html.format.extraLiners": "" в “кавычках” прописываем параметр “null” (см. поз.5 на рис.), который убирает пустые строки разделяющие открывающий тег раздела <html> и подраздел <head></head> и подраздел <body></body> и закрывающий тег раздела </html>, а также между подразделами <head></head> и <body></body>.
  - Настройка автоматического форматирования кода в файлах
    
    Для настройки этого параметра разворачиваем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.), находим блок “Форматирование” (поз. 2 на рис.) и выбираем в поле (поз.3 на рис.) подходящий или подходящие нам варианты форматирования и устанавливаем на них галочки.
    
    Нам предлагает такие варианты:
    - Format On Paste - автоматическое форматирование при вставке кода, например, из буфера обмена;
    - Format On Paste - автоматическое форматирование при вставке кода, например, из буфера обмена;
    - Format On Paste - автоматическое форматирование при вставке кода, например, из буфера обмена;
    В настройках можно сделать активным как один из рассмотренных параметров, так и несколько. По умолчанию они все неактивны. Автоматическое форматирование полезно для того, чтобы получить читаемый и структурированный код, что существенно экономит наше время.
- Настройка области написания кода
  
  В VS Code можно настроить несколько рабочих областей, разделив область написания кода на несколько частей. Это удобно, когда часто приходится взаимодействовать одновременно с несколькими файлами. Например, при верстке веб-страниц, когда разработчик пишет HTML-разметку и одновременно налаживает CSS-стили и добавляет JS-скрипты в отдельных файлах.
  
  Разделение на несколько рабочих областей можно сделать найдя в “Главном меню” (поз. 1 на рис.) пункт “Вид” (поз. 2 на рис.). Далее выбираем раздел “Макет редактора” (поз. 3 на рис.) и выбираем наиболее удобную для нас сетку (ее можно настроить как угодно для вашего удобства).
- Автосохранение
  
  По умолчанию автоматическое сохранение файлов отключено, но его можно включить. Данная настройка может помочь не потерять важные данные из-за вылета редактора или из-за других проблем.
  
  Для настройки этого параметра разворачиваем в дереве параметров строку “Текстовый редактор” (поз. 1 на рис.) и выбераем пункт “Файлы” (поз. 2 на рис.). Далее находим параметр “Auto Save” (поз. 3 на рис.). В поле ниже (поз.4 на рис.) выбрав один из предложенных вариантов автосохранения:
  - При открытии параметров редактора найдите и разверните в дереве слева блок “Текстовый редактор” (поз. 1 на рис.) и выберите пункт “Файлы” (поз. 2 на рис.).
  - Далее найдите параметр “Auto Save” (поз. 3 на рис.). В поле ниже (поз.4 на рис.) выбрав один из предложенных вариантов автосохранения:
    - afterDelay: Файл сохраняется раз в промежуток времени, настроенный пользователем (время настраиваете самостоятельно);
    - onfocusChange: Сохранение файла производится, когда вы переходите в другой файл проекта;
    - onWindowChange: Сохранение производится при переключении на другое окно.
    По умолчанию параметр автосохранения отключен (значение “Off”).
Режимы экрана

В Visual Studio Code предусмотрено несколько режимов работы с кодом, которые позволяют сосредоточиться на работе с ним:
- Полноэкранный режим
  
  При использовании "полноэкранного режима" скрывается верхнее меню и кнопки управления программой, а также меню пуска в Windows.
  
  Включить полнокранный режим можно в “Главном меню” в пункте “Вид” (поз. 2 на рис.), выбрав раздел “Внешний вид” (поз.3 на рис.) и затем “Полноэкранный режим” (поз. 4 на рис.).
  
  Второй способ включния этого режима производится при нажатии клавиши F11.
  
  Отключить этот режим можно повторным нажатием по клавише F11.
- Режим Zen
  
  Почти тоже самое, что и полноэкранный режим, но он скрывает все элементы управления VS Code, позволяя сфокусироваться только на коде. Включить этот режим можно в “Главном меню” в пункте “Вид” (поз. 2 на рис.), выбрав раздел “Внешний вид” (поз.3 на рис.) и затем “Режим Zen” (поз. 4 на рис.).
  
  Еще один способ активации этого режима это сочетание клавиш "CTRL+K Z"
Сочетания клавиш

VS Code включает в себя большое количество комбинаций клавиш, нажимая которые мы можем выполнять различные действия и команды в редакторе. Использование сочетаний клавиш существенно ускоряет работу с редактором, так как позволяют выполнять действия без необходимости переключаться на мышь или использовать контекстное меню. Одни из преимуществ использования сочетаний клавиш:
- Быстрота: Использование клавиш позволяет выполнять действия без необходимости искать и нажимать соответствующие кнопки на панели инструментов или в меню.
- Эффективность: При помощи сочетаний клавиш можно быстро выполнить действия, что особенно полезно при работе с повторяющимися задачами.
- Контроль: Сочетания клавиш могут предоставить больше контроля над функциональностью редактора иплагинами.
- Отсутствие переключения контекста: Используя сочетания клавиш, мы остаёмся сосредоточенными на рабочей среде, не отвлекаясь на меню или настройки.
Вот некоторые из них:
- На начальном экране:
  - Ctrl+Shift+P, F1 - Показать палитру команд
  - Ctrl+P - Быстрое открытие, переход в файл …
  - Ctrl + Shift + F - Найти в файлах
  - F11 - Полноэкранный режим
  - Ctrl+, - Пользовательские настройки
- файл
  - Ctrl + N - Новый файл
  - Ctrl + Shift + N - Новое окно редактора
  - Ctrl + W, Ctrl + F4 - Закрыть окно редактора
  - Ctrl + K O - Открыть папку
  - Ctrl + K W - Закрыть папку
  - Ctrl + O - Открыть файл
  - Ctrl + W - Закрыть файл
  - Ctrl + Shift + N - Новое окно редактора
  - Ctrl + Shift + W или F4 - Закрыть текущее окно редактора
  - Ctrl + S - Сохранить
  - Ctrl + Shift + S - Сохранить как
  - Ctrl + K S - Сохранить все
  - Ctrl + K F - Показать текущий файл в папке
  - Ctrl + K P - Копировать путь текущего файла
  - Ctrl + K V - Markdown превью и разделить редактор
  - Ctrl + Shift + V - Markdown превью
  - Ctrl + Q - Быстрое открытие
  - Ctrl + R - Открыть последний
  - Ctrl + P - Быстрый переход к файлу
  - Ctrl + G - Перейти к строке
  - Ctrl+K Ctrl+S - Горячие клавиши
- редактирование
  - Ctrl + A - Выделить все
  - Ctrl + Z - Отменить
  - Ctrl + Y - Вернуть
Открытие списка всех используемых "гарячих клавиш" осуществяется сочетанием клавиш Ctrl+K Ctrl+S

В данных параметрах есть возможность изменить все предложенные сочетания клавиш.

Web Site Builder

Ukraine, Krivoy Rog, Lisovoho, 27

Phone: +380988755733

[email protected]

© 2024 Tereta Alexander (www.tereta.dev)