Visual Studio Code пошаговая инструкция с нуля

Это очень интересный, а главное полностью бесплатный редактор кода, который я полюбил буквально с первого знакомства и не с проста… Не буду скрывать до знакомства с этим редактором, для верстки сайтов я пользовался программой Sublime Text и по большому счету меня все устраивало, я настроил её под свои нужды, установил плагины и получал качественный результат, а когда тебя все устраивает, и ты доволен тем, что имеешь с трудом захочется переходить на что-то новое, но не в этот раз….

Не буду скрывать VS studio мне понравилась сразу, ну прям зашла без каких-либо вопросов, а те решения, которые там организованы в базе меня порадовали и я решил поделиться своим восхищением со всеми. В этом уроке я покажу и расскажу, как установить Visual Studio Code покажу основной функционал этого редактора, поделюсь тем как я его настроил под себя и какие плагины добавил для максимально комфортной работы.

Для начала необходимо скачать дистрибутив данной программы, а лучшее решение для этого это естественно официальный сайт https://code.visualstudio.com/, после скачивания программа ставится элементарно и тут я не буду заострять на этом внимание. Ни чего сложного и нового в самой программе все её возможности как обычно спрятаны в верхней строке и некоторые элементы вынесены в левой боковой панели.

Основные настройки редактора

После первого запуска редактор может предложить установить плагин Russian Language pack (бывает после второго запуска), это по сути плагин для русификации редактора, не знаю кому как я лично его устанавливаю и не мучаюсь, но опять-таки дело каждого.

После запуска редактора я первым делом отключаю проверку безопасности файлов, поскольку не понимаю зачем она вообще нужна, для этого нам нужно попасть в настройки, где в дальнейшем так же будем многое настраивать. Для этого переходим по вкладке Файл->Настройки->Параметры или используя сочетание клавиш CTRL + , а здесь необходимо поменять параметр Security › Workspace › Trust: Untrusted Files установив для него значение open и тогда все файлы будут открываться без проблем и лишних подтверждений.

После того как я открываю настройки, у меня перед глазами сразу 2 параметра которые я меняю для своего удобства, это в первую очередь AutoSave выбираю значение afterDelay, это очень удобно и дает возможность автоматически сохранять изменения в файле после их внесения, так же как правило изменяю параметр font-size, как вы догадались это размер шрифта если я использую монитор с высоким разрешением то ставлю значение 16 а если это стандартный FullHd то не боле 15, но тут опять таки кому как удобно поскольку зрение у всех свое и восприятие так же.

Далее я обязательно устанавливаю значение Files: Default Language так как я использую данный редактор в основном для верстки я устанавливаю значение html. И остался последний пункт, который я сразу настраиваю это плавная прокрутка Editor: Smooth Scrolling ставим галочку и получаем плавную прокрутку. На этом с настройками у меня все поскольку все остальное это уже вкусовщина и не так уж важно для работы.

Основные плагины для комфортной работы

После основных настроек давайте перейдем к плагинам, и первый плагин который может возникнуть в головах уже опытных людей это конечно Emmet, но весь фокус в том, что ставить его не нужно так как он устанавливается вместе с редактором, согласитесь приятная мелочь…

Для установки плагинов вы можете использовать сочетание клавиш Ctrl+Shift+X которое откроет панель установки или тупо в левой части экрана нажать на иконку кубика-рубика…:)

Продолжим, и первым плагином, который мы будем ставить это HtmlTagWrap, он помогает автоматически подставлять теги в начале и конце. Предположим вы написали какой-то абзац текста, вы его тупо выделяете и нажав ALT+W вы подставите в начале и конце абзаца тег <p></p>

Следующий плагин, который я рекомендую поставить это eCSStractor for VSCode суть его работы заключается в том, что он собирает названия классов и вставляет в файл стилей. Простой пример вы написали примерную разметку какого-либо блока сайта, и естественно заложили туда названия 5-6-ти классов которые еще не прописаны в таблице стилей, и чтобы вам не переписывать название каждого класса, вы выделяете этот блок и правой кнопкой запускаете плагин, а после этого легко и просто вставляете скопированные стили непосредственно в css файл где уже прописываете все необходимые свойства.

Далее ещё один очень интересный плагин CSS Navigation благодаря ему вы легко сможете найти описание любого класса достаточно просто навести на него курсор мыши, очень удобно и значительно ускоряет процесс написания.

Так же есть очень удобный плагин для работы со шрифтами Google Fonts после его установки время которое вы тратите на добавление шрифтов сократится до минимума, достаточно просто нажать сочетание клавиш Ctrl+Shift+p и появившейся строке вводите Google Fonts и выбираете нужный вам шрифт и метод его подключения.

Ещё один интересный плагин от Google это Google Translate, очень часто на практике его применяю полезно тем, кто не в совершенстве знает английский язык. Вы просто пишите слово или предложение выделяете его и жмете нехитрое сочетание клавиш Ctrl+Shift+T и все перевод готов.

Live server этот плагин создает виртуальный сервер благодаря чему все изменения которые вы будете делать в своем проекте тут же будут скомпилированы и отражены в браузере, это очень удобно и значительно ускоряет разработку.

CSS formatter плагин который нужен не каждому но все же я им пользуюсь, его единственная и основная задача красиво отформатировать css код, что в свою очередь хороший кодер должен автоматически делать сам…

IntelliSense for CSS class names in HTML ещё один плагин который ускоряет разработку, при написании html кода он автоматически дополняет название CSS класса в атрибуте class находя подходящий стиль в таблице стилей.

One Darck Pro это по сути не плагин а просто тема, для оформления редактора которая, по моему скромному мнению очень красива и удобна, изменят цвет тегов для более приятного восприятия.

И последний плагин которым я хотел бы поделиться CSS autoprefix, он существует для легкой реализации кроссплатформенности, и соответственно, там где необходимо добавить префиксы для старых версий браузеров, он это делает автоматически экономя ваше время.

Есть, ещё огромное количество всевозможных дополнений, которые безусловно упрощают жизнь разработчикам, я лишь описал свой базовый набор именно для верстки сайта. Надеюсь этот урок будет полезен и вы узнали много нового для себя.

Освой PHP 8 и MySQL с нуля

Видеокурс "PHP и MySQL с Нуля до Гуру 3.0"

Получить курс