Как скачать visual studio code

Install Visual Studio Code

In this article we will look at the steps of How to Download and Install Visual Studio Code on Windows and Mac operating systems.

For the development of each programming language, there are multiple IDE (Integrated Development Environment) available. For JavaScript also there are numerous IDEs, and Visual Studio Code editor is one of them. It is a lightweight but strong source code editor that runs on your desktop and is available for Windows, macOS, and Linux. Visual Studio Code has built-in support for JavaScript, TypeScript, and Node.js. It has an extensive ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). At ToolsQA we are using VS Code for Protractor, Cypress, JavaScript, etc. In this article

We will cover the below topics in this article:

• How to download and carry out installation the Visual Studio Code?
• Procedure to install the Visual Studio Code on macOS?
• How to install Visual Studio Code on Windows?
• What are the essential components of the VS Code?
• What are the language-specific features provided by VS Code?

How to download and carry out the installation of the Visual Studio Code?

Getting up and running with Visual Studio Code is swift and straightforward. It is a small download so you can install it quickly and give the VS Code a try. VS Code is a free code editor. Additionally, it runs on the macOS, Linux, and Windows operating systems. Let’s see how we can set up the same in the different platforms we use.

The first step is shared across all the platforms irrespective of any OS you are using.

Download Visual Studio Code:

You can download Visual Studio code from URL "https://code.visualstudio.com/download" by selecting the right platform:

You can click any of the icons mentioned above, depending on the operating system for which you are planning to download the visual studio code editor.

How to install Visual Studio Code on macOS?

Follow the below steps*(shown in gif file and mentioned in bullet points)* to install the VS Code on macOS:

1. Download Visual Studio Code for macOS.
2. After clicking on the Mac option on the download site, it will download a zip file, as shown below:
3. Double-click on the downloaded zip to expand the contents. It will give a file, as shown below:
4. Drag "Visual Studio Code.app" to the "Applications" folder, so as it available in the "Launchpad."
5. Double click on the "Visual Studio Code" to open.
6. Add VS Code to your Dock by right-clicking on the icon to bring up the context menu and choosing Options => Keep in Dock.

How to Install Visual Studio Code on Windows?

Firstly, download the Visual Studio Code installer for Windows. Once it is downloaded, run the installer (VSCodeUserSetup-.exe). It will only take a minute.

Secondly, accept the agreement and click on next.

Thirdly, click on "create a desktop icon" so that it can be accessed from desktop and click on Next.

After that, click on the install button.

Finally, after installation completes, click on the finish button, and the visual studio code will get open.

By default, VS Code installs under C:\users\AppData\Local\Programs\Microsoft VS Code.

After the successful installation, let’s move to the next section to understand the various components of the User Interface of Visual Studio Code Editor.

What are the essential components of the VS Code?

Visual Studio Code is a code editor at its core. Like many other code editors, VS Code adopts a standard user interface and layout of an explorer on the left, showing all of the files and folders you have access to. Additionally, it has an editor on the right, showing the content of the files you have opened. Below are a few of the most critical components the VSCode editor:

VS Code comes with a straight-forward and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse. Additionally, it allows access to the full context of your folder or project. The UI is divided into five areas, as highlighted in the above image.

1. Editor — It is the main area to edit your files. You can open as many editors as possible side by side vertically and horizontally.
2. SideBar — Contains different views like the Explorer to assist you while working on your project.
3. Status Bar — It contains the information about the opened project and the files you edit.
4. Activity Bar — It is located on the far left-hand side. It lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
5. Panels — It displays different panels below the editor region for output or debug information, errors, and warnings, or an integrated terminal. Additionally, the panel can also move to the right for more vertical space.

VS Code opens up in the same state it was last in, every time you start it. It also preserves folder, layout, and opened files.

What are the language-specific features provided by VS Code?

Visual Studio Code supports the maximum of the modern programming languages. It provides various features that can be language-specific but are available in almost all the supported programming languages. Few of them are:

Visual Studio Code скачать бесплатно на русском языке

Visual Studio Code (также известный под более коротким названием «VSCode») — это бесплатный редактор исходного кода, который получил большую поддержку со стороны разработчиков программного обеспечения, которые в 2020 году назвали его самым популярным редактором у программистов.

Ниже вы можете скачать Visual Studio Code бесплатно.

Windows 7, 8, 10, 11

Debian, Ubuntu .deb

Red Hat, Fedora, SUSE .rpm

Примечание: Если вы хотите внести свой вклад в VS Code, исправить или сообщить об ошибках, пожалуйста, вносите свой вклад непосредственно в кодовую базу на GitHub.

История разработки

Первоначально анонсированная компанией Microsoft весной 2015 года, первая публичная версия Visual Studio Code была выпущена год спустя, в апреле 2016 года. С тех пор этот редактор исходного кода и отладчик несколько раз расширял свою функциональность.

Пример использования Git в VS Code

Одной из самых популярных и полезных функций является Source Control — сервис контроля версий, который регистрирует все изменения, вносимые в текущий проект, синхронизирует состояние локального проекта с резервной копией данных на облачной платформе хранения GitHub.

Интерфейс программы

Пользовательский интерфейс оптимизирован для быстрого обнаружения всех доступных встроенных инструментов и внешних сервисов, предлагаемых менеджером расширений.

Важно отметить, что эти расширения работают как отдельные процессы, что гарантирует целостность и стабильность софта.

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

Интерфейс vs code

Пользовательский интерфейс разделен на пять областей:

1. Редактор — основная область редактирования файлов. Можно открыть столько редакторов, сколько хотите, рядом друг с другом по вертикали и горизонтали.
2. Боковая панель — содержит различные представления, такие как Проводник, чтобы помочь во время работы над проектом.
3. Строка состояния — информация об открытом проекте и редактируемых файлах.
4. Панель активности — расположена на крайней левой стороне, позволяет переключаться между представлениями и предоставляет дополнительные индикаторы, специфичные для контекста, например, количество исходящих изменений, когда Git включен.
5. Вкладки — можно отображать различные вкладки над областью редактора.Каждый раз, когда вы запускаете программу, он открывается в том же состоянии, в котором он был при последнем закрытии. Папка, макет и открытые файлы сохраняются.

Интерфейс можно настраивать под себя и сделать редактор максимально персонализированным под ваши потребности. Но это еще не все возможности, которые предлагает редактор.

Особенности программы

Познакомьтесь с IntelliSense.

Выйдите за рамки подсветки синтаксиса и автозаполнения с IntelliSense, который обеспечивает интеллектуальное завершение на основе типов переменных, определений функций и импортированных модулей.

Отладка операторов печати осталась в прошлом.

Отлаживайте код прямо из редактора. Запускайте или подключайтесь к запущенным приложениям и отлаживайте их с помощью точек останова, стеков вызовов и интерактивной консоли.

Встроенные команды Git.

Работа с Git и другими SCM-провайдерами еще никогда не была такой простой. Просматривайте диффы, ставьте файлы и делайте коммиты прямо из редактора. Проталкивайте и вытаскивайте данные из любой размещенной службы SCM.

Расширяемость и настраиваемость.

Хотите еще больше возможностей? Установите расширения, чтобы добавить новые языки, темы, отладчики и подключиться к дополнительным сервисам. Расширения запускаются в отдельных процессах, что гарантирует, что они не замедлят работу вашего редактора.

Горячие клавиши

Команда	Клавиши
Вырезать строку	Ctrl+X
Скопировать строку	Ctrl+C
Вставить	Ctrl+V
Удалить строку	Ctrl+Shift+K
Вставить строку ниже	Ctrl+Enter
Вставить строку выше	Ctrl+Shift+Enter
Переместить линию вниз	Alt+Down
Переместить линию вверх	Alt+Up
Копировать строку вниз	Shift+Alt+Down
Копировать строку вверх	Shift+Alt+Up
Назад	Ctrl+Z
Вперед	Ctrl+Y
Добавить выбор в следующий поиск совпадений	Ctrl+D
Переместить последний выбор в следующий поиск совпадений	Ctrl+K Ctrl+D
Отмена последней операции с курсором	Ctrl+U
Вставить курсор в конец каждой выбранной строки	Shift+Alt+I
Выделить все вхождения текущего выделения	Ctrl+Shift+L
Выделить все вхождения текущего слова	Ctrl+F2
Выделить текущую строку	Ctrl+L
Вставить курсор ниже	Ctrl+Alt+Down
Вставить курсор выше	Ctrl+Alt+Up
Переход к соответствующей скобке	Ctrl+Shift+\
Линия отступа (переместить строку вправо на 4 пробела или одну табуляцию)	Ctrl+]
Линия отступа (переместить строку налево на 4 пробела или одну табуляцию)	Ctrl+[
Перейти к началу строки	Home
Перейти к концу строки	End
Перейти в конец файла	Ctrl+End
Перейти в начало файла	Ctrl+Home
Линия прокрутки вниз	Ctrl+Down
Линия прокрутки вверх	Ctrl+Up
Линия прокрутки вниз с выделением	Alt+PageDown
Линия прокрутки вверх с выделением	Alt+PageUp
Область складывания (схлопывания)	Ctrl+Shift+[
Область разворачивания (разворачивания)	Ctrl+Shift+]
Сложить (свернуть) все области	Ctrl+K Ctrl+[
Развернуть (распустить) все области	Ctrl+K Ctrl+]
Добавить комментарий к строке	Ctrl+K Ctrl+C
Убрать комментарий к строке	Ctrl+K Ctrl+U
Комментарий переключения строки	Ctrl+/
Комментарий переключения блока	Shift+Alt+A
Поиск	Ctrl+F
Замена	Ctrl+H
Следующее искомое	Enter
Предыдущее искомое	Shift+Enter
Выбрать все повторения найденного соответствия	Alt+Enter
Переключить Поиск с учетом регистра	Alt+C
Искать с помощью Regex	Alt+R
Переключение Найти целое слово	Alt+W
Переключение использования клавиши Tab для установки фокуса	Ctrl+M
Переключение обводки слов	Alt+Z

Полный список сокращенных комбинаций представлен на странице.

Заключение

Приложение распространяется в Интернете бесплатно по лицензии Open Source, что позволяет разработчикам напрямую видеть весь исходный код, даже рабочий процесс встроенной службы сбора данных, которая собирает пользовательские данные и отправляет их в Microsoft.

Visual Studio Code может быть загружен в виде архива установщика размером менее 100 МБ не только для Windows, но и для Linux и macOS (с поддержкой архитектур процессоров IA-32, x86-64, ARM64), и имеет встроенную поддержку UI для 11 международных языков. Приложение легкое, быстрое и оптимизированное для всех современных версий ОС Windows (7, 8 и 10, 11 включая как 32-битные, так и 64-битные).

Visual Studio Code

Инструментарий

Visual Studio Code (сокращенно VS Code) — это бесплатный редактор исходного кода, разработанный компанией Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.

Это редактор кода которым я постоянно пользуюсь (в основном для верстки, иногда разработке сайтов на MODX — когда шаблоны файловые) и который мы сейчас разберем. Если вы к примеру хотите профессионально заниматься PHP, то лучше выбрать платное IDE типа WebStorm.

Где скачать visual studio code

Скачать vs code можно с оф. сайта: code.visualstudio.com .

Русификация VS Code

На одном из ПК он у меня сам русифицировался после установки, на другом самостоятельно не захотел)

В общем для русификации интерфейса, зайдите в extensions (расширения) в строке поиска наберите: Russian Language Pack for Visual Studio Code или просто Russian Language Pack, установите расширение.

Перезагрузите редактор, чтобы visual studio code стал на русском.

Горячие клавиши

Справку по горячим клавишам можно найти в «Справка» — «Справочник по сочетаниям клавиш», или во официальной документации на странице: https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference (на английском).

Если плохо дружите с языком, то на русском все сочетания можно посмотреть в настройках.

Там же их можно изменить. А так же перенести сочетания из других редакторов, например из Vim, Sublime Text, Atom, Bratckets. Скачать пакеты с их сочетаниями клавиш можно здесь: https://code.visualstudio.com/docs/getstarted/keybindings#_keymap-extensions

emmet

По умолчанию emmet уже встроен в vs code из коробки и вы сразу можете начать им пользоваться.

Cниппеты — ускорители разработки

Сниппеты — это шаблоны, облегчающие ввод повторяющихся шаблонов кода, таких как циклы или условные операторы. VS Code из коробки имеет встроенные фрагменты для ряда языков, таких как: JavaScript, TypeScript, Markdown и PHP. И так как встроен emmet, то автоматом можно добавить html.

Если говорить простым языком «сниппет» — это готовый кусок заранее написанного кода, который можно вызывать внутри среды Vs Code. Представляет из себя json код, который содержит префикс, тело и описание сниппета. В данном случае мы рассмотрим такие сниппеты, которые можно вставить в любом месте нашего файла.

Установка готовых сниппетов из Marketplace

В маркетплейсе полного готовых сниппетов на разные случае жизни, для того чтобы их посмотреть и установить, перейдите в «Расширения» ( Ctrl+Shift+X ), в поле поиска введите фильтр @category:»snippets».

Если вам нужно что-то конкретное, например я часто верстаю при помощи bootstrap 5 и мне нужны его готовые фрагменты, можно сузить поиск так: @category:»snippets» bootstrap 5. Дальше ищем сниппет с адекватным описание и устанавливаем, читаем описание (возможно сохраняем) и пользуемся.

Создание своих сниппетов

Чужие сниппеты это хорошо, быстро, удобно, но зачастую не обновляются или содержат не совсем то что вам нужно. Поэтому рассмотрим как создать свои сниппеты. В VS Code перейдите Файл — Настройки — Пользовательские фрагменты кода

Далее выберем «Новый файл с глобальным фрагментом кода…»

После чего вводим пишем название сниппета, например: «web-dev-snippet» и нажимаем Enter. Создастся заготовка сниппета с закомментированным текстом.

Файл со сниппетами — просто json объект. Каждый сниппет — тоже объект, который содержит следующие поля:

• scope — языки, для которых будет подставляться сниппет (в случае глобального сниппет файла)
• prefix —сокращение, по которому активируется сниппет.
• body — сам сниппет
• description — описание, будет показано в Intellisense

Давайте для примера создадим для примера 2 сниппета, один для css, второй для html, для остальных языков создается также.

К примеру мы хотим написать сниппет который строит следующую css конструкцию:

Для этого стираем все из этого файла и пишем следующую конструкцию:

Давайте сразу проверим работоспособность, для этого сохраняем наш сниппет, создаём новый файл, установим у него язык CSS и введем начало нашего префикса и выберем его (или введем префикс полностью и нажмем Tab):

И получаем результат:

Ну и давайте чуть посложнее сниппет создадим для html, который к примеру строит вот такой код:

При этом сразу поставить курсор на пути до изображений images/ , чтобы их можно было быстро сменить. Получим следующий код сниппета:

Сохраним и сразу проверим в html файле

Теперь давайте разбираться что к чему:

• Для выбора расположения курсора используется символ $ ($1, $2, $3)
• Для задания очередности перехода курсора при нажатии tab используется нумерация $1 , $2
• Если вам необходимо в сниппете использовать двойные кавычки «» , то перед ними необходимо ставить обратный слэш \
• \t – экранированная “t” – означающая табуляцию.
• $ – это конструкция плейсхолдера, где Num – порядковый номер. Т.к. в srcset и в src нам нужно указать один и тот же путь, но с разными расширениями, то мы просто указываем, что во всех этих полях будет $ <1:images/>, где «images/» — значение по умолчанию, которое подставляется в код и при изменении одного из этих полей изменятся все 3. Аналогично для alt=»» и title=»» , только порядковый номер placeholder-а увеличивается на один.

К стати сниппеты стыкуются так:

Надеюсь доходчиво объяснил, в общем делайте так готовые заготовки и экономьте время на разработке. Оригинальная документация по сниппетам здесь: https://code.visualstudio.com/docs/editor/userdefinedsnippets.

Настройка FTP или sftp подключения и синхронизации VS Code при помощи RemoteFS

Нажимаем на расширения, в окне поиска вбиваем RemoteFS и нажимаем установить.

После установки, идем в настройки Remote FS и щелкаем на строку Изменить setting.json

И указываем промеж «remotefs.remote»: < . >следующий конфиг

• «protocol» — используемый для подключения протокол, указать можно FTP или SFTP, в зависимости от выбранного нужно указывать различные настройки далее.
• «port» — порт: (Для FTP — укажите 21 ., Для SFTP — обычно 22 ).
• «host» — укажите хост из данных для подключения по FTP или SSH.
• «username» — имя пользователя: (Для FTP — укажите логин из данных для подключения по FTP, Для SFTP — укажите логин из данных для подключения по SSH.
• «password» — пароль: (Для FTP — укажите пароль FTP-пользователя, Для SFTP — укажите пароль из данных для подключения по SSH.
• «remotePath» — полный путь к каталогу сайта: (Для FTP : Либо укажите / — если нужно попасть напрямую в каталог доступа пользователя FTP , либо укажите остаток пути от каталога доступа пользователя FTP до нужного подкаталога — если нужно попасть не напрямую в каталог доступа, а в его подкаталог. Для SFTP — укажите путь в виде /home/user/example.com/www/ , где user это название хостинг-аккаунта, а example.com/www это каталог сайта.

Сохраните изменения в конфигурационном файле.

После этого жмем Ctrl+Shift+P (Windows/Linux), вводим Remote FS: Add Folder to Workspace . И радуемся — теперь можно кодить на сайте прям из редактора.

Так можно подключать множество сайтов.

Если вы пользуетесь хостингом beget, то возможно вам будет также интересна статья: Мануал по работе с ftp / sftp на хостинге beget.

Если вам интересна тема про VS Code пишите в комментария, что вас конкретно интересует, расширю статью или напишу новую!

Настройка Visual Studio Code для верстальщика: установка, добавление плагинов, отладка

Visual Studio Code — это мощный инструмент для верстальщика и программиста, который распространяется полностью бесплатно. Разработан Майкрософт на основе другого их продукта MS Visual Studio, который является более “громоздким” решением для профессионального программирования. Несмотря на то, что Visual Studio Code позиционируется как “облегченный” редактор кода, у него много настроек и плагинов от сторонних авторов, с помощью которых его можно превратить в профессиональный инструмент для верстальщика.

Первое знакомство с Visual Studio Code

Для начала рассмотрим, как скачать, установить, запустить (даже на очень слабом компьютере) и настроить Visual Studio Code. Вообще с этим проблем не должно возникнуть, так как на Windows все делается на интуитивно понятном уровне. Если у вас уже установлен этот редактор кода и в него внесены какие-то настройки, то лучше выполнить его полное удаление и, после чистой установки, настроить его заново.

Удаление VS Code ничем не отличается от удаление обычной программы. В Windows это можно сделать через “Панель управления”. Однако, чтобы наверняка убрать из памяти компьютера все настройки и ранее добавленные плагины рекомендуется провести очистку папки .vscode, которая расположена по адресу: C:\Пользователи\Ваше_имя_пользователя. Также очистите папку Code, что расположена в каталоге Roaming в AppData.

Скачивание и установка VS Code

Здесь нет ничего сложного — установочные материалы загружаются с официального сайта разработчика и проводится стандартная инсталляция:

1. Перейдя на главную страницу сайта разработчика воспользуйтесь кнопкой “Download”. По умолчанию сайт должен определить вашу ОС, но если он этого не сделал, то выберите ее самостоятельно в контекстном меню кнопки загрузки.

Скачивание VS Code

2. Ожидайте скачивание исполняемого файла. Запустите его, чтобы начать процесс установки.

3. Подтвердите, что вы ознакомились и согласны с лицензией для продолжения установки. Также в процессе инсталляции принимайте и добавляйте все, что вам предлагает мастер установки.

Первый запуск и возможные проблемы

С запуском VS Code не должно возникнуть проблем на большинстве современных машин. Исключениями могут является старые компьютеры или модели со слабыми процессорами. На них запуск редактора кода может либо занимать слишком много времени, либо выдавать просто черное окно, плюс, возможно появление проблем непосредственно в процессе работы. Еще сильнее “облегчить” Visual Studio Code можно с помощью изменения свойств ярлыка программы:

1. Кликните правой кнопкой мыши по ярлыку и откройте “Свойства” в контекстном меню.

2. В поле “Объект”, в самом конце пути пропишите флаг: —disable-gpu.

После этого VS Code должен без проблем запускаться и работать даже на очень слабых машинах.

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

1. Переключитесь во вкладку плагинов. В поисковой строке введите “Russian Language Pack for Visual Studio Code”.

2. В результатах выдачи сразу покажут страницу этого плагина. Нажмите кнопку “Install”. После этого программа попросит перезапустить ее и откроется уже с русифицированным интерфейсом.

Установка русского языка для VS Code

Интерфейс Visual Studio Code

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

Строка состояния

В самой нижней части интерфейса окна программы находится строка состояния. Там показывается количество ошибок и предупреждений, которые возникли в ходе выполнения кода. Также в этой области может выводится информация о состоянии тех или иных плагинов. Для получения подробной информации о предупреждениях и ошибках воспользуйтесь сочетанием клавиш Ctrl+Shift+M.

Вкладка “Вывод”

В этой вкладке отображается информация о работе всех программ и систем редактора. Ее можно отфильтровать по категориям с помощью переключателя в верхней части.

Вкладка “Терминал”

Здесь находится что-то вроде встроенной “Командной строки”. С помощью переключателя в верхнем части можно менять оболочки терминала. Также терминал можно условно разделить на несколько, например, с разными оболочками.

Терминал VS Code

Панель действий

Левая панель, на которой расположены основные элементы интерфейса, с которым разработчику придется взаимодействовать чаще всего:

1. Встроенный файловый менеджер. Здесь отображается файловая структура выбранного проекта с папками и файлами. С его помощью удобно вызывать нужный файл для редактирования. Также во встроенном проводнике можно создавать новые файлы и директории проекта.

Файловый менеджер VS Code

2. Поиск. Позволяет находить определенный фрагмент кода в открытых файлах проекта.

Поисковая строка VS Code

3. Центр управления и контроля версий. Позволяет осуществлять контроль версий проекта, например, с помощью Git.

Центр контроля версий VS Code

4. Запуск и отладка приложений. С помощью этого инструмента можно запускать выполнение кода и смотреть на его поведение. Функциональность можно расширить за счет дополнительных плагинов.

5. Расширения. Отсюда можно выполнить установку новых плагинов для VS Code, а также просмотреть список уже установленных.

Менеджер расширений VS Code

6. Настройки аккаунта. Вы можете авторизоваться в своем профиле, чтобы применить уже установленные ранее настройки для VS Code.

7. Настройки. Здесь представлены основные настройки, которые может менять пользователь. Их тут много и без сторонних плагинов.

Настройка основных параметров

Visual Studio Code позволяет выполнить настройку параметров как для всей программы в целом, так и задать их индивидуально для какого-то проекта. Для получения доступа к параметрам кликните по иконке шестеренки и выберите в контекстном меню “Settings”.

Переход в параметры VS Code

Далее подробно рассмотрим, что пользователь может настроить.

Автосохранение

По умолчанию возможность автоматического сохранения отключена, но ее рекомендуется включить. Это поможет не потерять важные данные из-за вылета редактора, а также избавит от необходимости делать сохранение вручную для отображения результата верстки или работы написанного скрипта.

Настройка автосохранения производится следующим образом:

1. При переходе в параметры VS Code должна автоматически открыться нужная вкладка, но если вы ее случайно сбили, то переключайтесь в “Commonly Used”.

2. В блоке “Files: Auto Save” по умолчанию стоит значение “Off”. Его нужно изменить на:

• afterDelay. Файл сохраняется раз в промежуток времени, настроенный пользователем;
• onfocusChange. Сохранение файла производится, когда вы переходите в другой файл проекта;
• onWindowChange. Сохранение производится при переключении на другое окно.

Автосохранение в VS Code

3. Выберите для себя удобный вариант автосохранения.

Настройка отображения кода

Для удобного редактирования кода настройте его отображение: размер и семейство шрифта, отступы, табуляцию. Рассмотрим настройку этих параметров:

1. Font Size. Здесь по умолчанию стоит 14 размер, но его можно изменить на любой произвольный.

2. Font Family. В это поле вручную прописывается название шрифта по умолчанию и его тип.

3. Tab Size. Настраивается шаг табуляции в пробелах. По умолчанию стоит значение 4. Его можно заменить на любое произвольное.

4. Render Whitespace. Управляет отрисовкой пробелов в редакторе. Доступно 5 вариантов:

• none — нет никакой дополнительной отрисовки;
• boundary — отрисовываются все пробелы, кроме одиночных между слов;
• selection — пробелы отрисовываются только в выделенном тексте (этот параметр выбран по умолчанию);
• trailing — отрисовываются конечные пробелы;
• all — отрисовываются все пробелы.

5. Cursor Style. Здесь можно выбрать стиль курсора. Всего доступно 6 стилей.

6. Insert Space. Отвечает за действие редактора при нажатии на клавишу Tab. По умолчанию здесь будут вставляться пробелы. Если снять галочку, то редактор будет вставлять знаки табуляции.

7. Word Wrap. Отвечает за автоматический перенос строк. По умолчанию он отключен, но можно сделать авто перенос по размеру окна и по пользовательским настройкам.

Настройки отображения в VS Code

Настройка подсказок

По умолчанию в VS Code включены некоторые подсказки при написании кода. Вы можете включите дополнительные подсказки или отключить уже имеющиеся. За это отвечает параметр “Hover Enabled”. Воспользуйтесь поисковой строкой по настройкам для быстрого перемещения к нему. По умолчанию данный параметр активен. Вы можете снять с него галочку и тогда большинство подсказок, появляющихся при наведении курсора на кусок кода, пропадут.

Однако помимо подсказок в таком случае пропадают и некоторые функции, которые могут быть полезны для работы со стилями. Например, подсветка цветов, написанных в виде RGB, HEX, RGBA. Помимо отображения самого цвета появится всплывающее окошко с палитрой, где можно быстро выбрать другой цвет и уровень прозрачности (при переключении на RGBA).

Если вам не нужно, чтобы в CSS не появлялись цветовые обозначения HEX/RGBA-палитры, то снимите галочку с параметра “Color Decorators”. В таком случае не будет вообще никаких подсказок, касательно цвета.

“Close Active Groups” — еще один параметр, на который рекомендуется обратить внимание. Отвечает за то, будет ли закрываться группа при закрытии последней вкладки в ней. Иногда автоматическое закрытие групп не очень удобно в работе, поэтому галочку с этого параметра можно снять.

Подсказки цветов в VS Code

Начинающим верстальщикам рекомендуется не отключать подсказки. Исключением могут быть параметры “Hover Enabled” и “Close Active Groups”, так как они действительно иногда могут мешать.

Настройка форматирования

В Visual Studio Code есть несколько параметров, отвечающих за форматирование кода. С помощью него можно, например, быстро исправить съехавшую табуляцию в документе. По умолчанию для этого используется сочетание клавиш Shift+Alt+F. Также есть возможность выбрать параметры для автоматического форматирования кода в файлах:

• Format On Paste — автоматическое форматирование при вставке кода, например, из буфера обмена;
• Format On Save — автоматическое форматирование в момент сохранения файла;
• Format On Type — форматирование производится автоматически в процессе печати.

Настройки форматирования в VS Code

В настройках можно сделать активным как один из рассмотренных параметров, так и несколько. По умолчанию они все неактивны. Автоматическая табуляция может быть полезна в том случае, если вам нужно получить читаемый и структурированный код, однако тратить время на самостоятельную постановку табов и пробелов не хочется. Однако в некоторых случаях автоматическое форматирование может наоборот мешать или срабатывать некорректно.

Настройка области написания кода

Ее настройку стоит рассмотреть отдельно. Здесь можно настроить несколько рабочих областей, разделив область написания кода на несколько частей. Это удобно в тех случаях, когда часто приходится взаимодействовать одновременно с несколькими файлами. Например, это актуально при верстке, когда разработчик пишет HTML-каркас и одновременно CSS-стили для него и JS-скрипты в отдельных файлах. Разделение на несколько рабочих областей можно сделать через меню “Вид”. Там выберите пункт “Макет редактора” и наиболее удобную для вас сетку.

Дополнительно в меню “Вид” доступна настройка масштабирования. Можно быстро увеличить или уменьшить шрифт в данном документе или проекте. Нужные настройки находятся в пункте “Внешний вид”. Там также можно вообще сбросить все настройки для всего документа. Также здесь можно скрывать или показывать разные элементы.

Режимы экрана

Предусмотрено несколько режимов работы с кодом:

1. Полноэкранный режим. Включается при нажатии клавиши F11. Скрывает верхнее меню и кнопки управления программой, а также панель задач Windows. Отключить этот режим можно повторным нажатием по клавише F11.

Полноэкранный режим в VS Code

2. Режим Zen. Почти тоже самое, что и полноэкранный режим, но он скрывает все элементы управления VS Code, позволяя сфокусироваться только на коде. Включить этот режим можно через меню “Вид”, выбрав раздел “Внешний вид” и затем “Режим Zen”.

Режим Zen в VS Code

Перенос текста

Иногда при вставке большого куска текста (просто текста, не кода) он может вставиться в виде длинной строки. Тогда появляется горизонтальная прокрутка, что не очень удобно. Этого можно избежать, воспользовавшись сочетанием клавиш Alt+Z. Текст после этого перестроится так, чтобы нормально помещаться в область работы с кодом без необходимости дополнительной прокрутки снизу.

Важные плагины VS Code для верстальщика

Главным преимуществом Visual Studio Code является возможность расширить имеющийся функционал за счет добавления плагинов и расширений. В начале статьи мы уже рассматривали процесс их установки на примере добавления расширения с русским языком. Всего доступно более 2 тысяч разных расширений и их список постоянно пополняется. Мы рекомендуем установить всего несколько штук, которые необходимы любому верстальщику.

Emmet

Данное расширение позволяет сокращать написание кода, использовать формулы для автоматического раскрытия больших структур кода. Например, поставив просто символ “!” в начале HTML-документа можно сразу же раскрыть его готовую начальную структуру со всеми необходимыми тегами. Также можно работать с элементами, например, если нужен div с классом block, то достаточно просто прописать .block и нужный div будет создан.

А вот пример использования формул. Предположим, вам требуется создать маркированный список на 10 элементов. Просто пропишите ul>li*10 и нажмите Tab. Список готов!

Emmet уже установлен в VS Code по умолчанию, однако мы рекомендуем изучить несколько дополнений к нему, которые есть в меню с расширениями. Некоторые из них могут вам сильно пригодиться.

Live Sass Compiler

Плагин отвечает за автоматическую компиляцию SASS/SCSS в обычный CSS. Рекомендуется к установке тем, кто работает с этими препроцессорами. Также компилятор позволяет импортировать содержимое других SASS/SCSS-файлов в основной. О корректной работе данного плагина будет говорить надпись Watch Sass в нижней части окна программы. При нажатии на нее открываются настройки плагина.

LiveSASS в VS Code

Live Server

Полезный плагин, который создает локальный сервер и позволяет отслеживать изменения в HTML-документе в режиме реального времени. Без него вам потребовалось бы сначала сохранить документ, а потом обновить страницу с ним в браузере. За работу плагина отвечает кнопка Go Live в нижней строке программы. При нажатии на нее документ, с которым вы работаете автоматически открывается в браузере, который установлен в системе в качестве браузера по умолчанию.

Плагин Live Server в VS Code

SCSS IntelliSense

Плагин показывает дополнительные подсказки при работе с синтаксисом SASS и SCSS. Позволяет автоматизировать некоторые моменты прописывания стилей и указывает на ошибки в синтаксисе, предлагает исправления.

SCSS Formatter

Чем-то похож на предыдущий плагин, но в отличии от него имеет более скромный функционал. Отвечает за корректное форматирование SCSS/SASS.

Better Comments

По умолчанию комментарии в Visual Studio Code отмечены серым цветом и выглядят на фоне основного кода невзрачно. Данный плагин позволяет сделать акцент на комментариях, где это действительно необходимо, например, выделить их контрастным цветом. Цвета выделений можно настроить под себя или использовать стандартный набор. Это очень полезно в случае с командной работой.

Плагин Better Comments в VS Code

BEM Helper

Создан для упрощения работы с BEM. Умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Также может вставлять модификаторы, формировать файлы стилей. Будет полезен не только верстальщикам, но и обычным программистам.

Плагин BEM Helper в VS Code

eCSStractor

Этот плагин упрощает перенос классов из HTML в файлы со стилями: CSS, SCSS, SASS. После добавления плагина в программу нужно будет настроить для него сочетание клавиш. Перейдите в его настройки на странице добавления и выберите пункт “Сочетание клавиш”. Задайте любую удобную комбинацию клавиш.

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

1. Выделите нужный отрезок HTML-кода, из которого требуется скопировать классы.

2. Воспользуйтесь тем сочетанием клавиш, которое вы указали для копирования классов. Вы должны получить сообщение о том, что классы успешно скопировались.

Плагин eCSStractor в VS Code

CSS Navigation

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

Плагин CSS Navigation в VS Code

Image Preview

В процессе верстки часто приходится работать с изображениями — это могут быть как отдельные картинки, так и фоновые изображения, вставленные в файлы со стилями. Плагин позволят увидеть миниатюру нужного изображения, подведя курсором мыши по адресу расположения картинки в коде.

Плагин Image Preview в VS Code

Заключение

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