Найти тему
My Way Web

Настройка текcтового редактора, Visual Studio Code 1ч.

Начнём мы самого начала, с настройки текстового редактора, для написания кода, которым является Visual Studio Code. 💻

1 Шаг

Идём по ссылке https://code.visualstudio.com/ и скачиваем Visual Studio Code. Данная ссылка, направит нас на официальный сайт, при установке программы, будут отсутствовать различные яндекс сервисы и тому подобное. И вообще в дальнейшем, всегда качайте программы с официальных источников. Так вы будете в безопасности, точнее ваша информация на компьютере.

2 Шаг

После того как вы скачали программу, запускаем.

Visual Studio Code.
Visual Studio Code.

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

3 Шаг

Установка плагинов осуществляется при нажатии на вкладку.

Установка плагинов 1.1
Установка плагинов 1.1

У вас откроется вот такой интерфейс программы.

Установка плагинов 1.2
Установка плагинов 1.2

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

Russian Language Pack for Visual Studio Code

Установка плагинов 1.3
Установка плагинов 1.3

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

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

Auto Rename Tag

Установка плагинов 1.4
Установка плагинов 1.4

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

Пример плагина в действии 1.1
Пример плагина в действии 1.1

Live Server

Установка плагинов 1.4
Установка плагинов 1.4

Показывает изменение вашего документа в реальном в времени.

Пример плагина в действии 1.2.1
Пример плагина в действии 1.2.1

После установки у вас появится в нижней панели текстового редактора такой значок с названием Go Live. Выбираем наш документ который является типом "ваше_название.html" и нажимаем Go Live.

Установка плагинов 1.4.1
Установка плагинов 1.4.1

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

Пример плагина в действии 1.2.2
Пример плагина в действии 1.2.2

И ещё один способ. Кликаем правой кнопкой мыши внутри своего документа опять таки с расширением .html

Пример плагина в действии 1.2.3
Пример плагина в действии 1.2.3

Можно также запустить горячими клавишами, как это показано на рисунки "Пример плагина в действии 1.2.3" ALT + O.

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

Резюме📖

Ссылка для скачивание программы https://code.visualstudio.com/

Список плагинов которые мы установили

Russian Language Pack for Visual Studio Code

Auto Rename Tag

Live Server

В следующей статье я расскажу как детально настроить ваш текстовый редактор для быстрой работы, расскажу о возможности подключение к хостингу по ftp будет интересно. Дальше больше. Ищите статьи по VS Code по хештегу телеграм-канале #vscode

Ссылка на канал

Спасибо!