Для чего предназначен текстовый редактор в visual studio
За свою долгую историю существования Microsoft выпустил немало инструментов разработки. Но так уж сложилось что на слуху у всех только лишь Visual Studio – большая и мощная IDE «комбайн» предназначенная для всего и вся. Развивается этот продукт уже более двух десятков лет и вобрал в себя самые разные функции. Многим этот инструментарий нравится и иногда даже задавали вопрос – будет ли перенесен Visual Studio на другие платформы. На что чаще всего получали ответ нет. Наверное, понятно почему, в целом такое портирование будет дорогим и неоправданно сложным, уж очень много всего в этой IDE завязано на Windows.
И вот, этой весной для многих неожиданностью было то что Microsoft представил новый продукт под названием Visual Studio Code, да еще и работающий сразу на трех платформах, Linux, OS X и Windows. Не замахиваясь на все функции полноценной IDE, внутри Microsoft решили переосмыслить подход, по которому строится основной инструментарий программиста и начали с самого главного – редактора кода. Visual Studio Code это именно редактор, но при этом обладающий функциями IDE, полагающийся на расширения.
Установка Visual Studio Code
Mac OS X
Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте в ~/.bash_profile
Linux
Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте на него ссылку
Windows
Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала сделайте logon/logoff, соответствующие пути к файлу прописываются в переменной PATH самим установщиком
Дополнительные инструменты
Без инструментария Visual Studio Code годится разве что для простого редактирования файлов, для полноценной работы понадобится сопутствующий инструментарий, который зависит от ваших целей и задач:
Начало работы
Чтобы попробовать в деле VS Code, проще всего создать веб-проект Node. Для этого установите Node на свой компьютер (ссылка выше) и выполните следующие команды:
Базовые возможности Visual Studio Code
Как и многие редакторы кода, VS Code использует распространенную схему расположения основных элементов – слева обозреватель файлов, справа редактор кода. В дополнение к этому есть специфичные элементы, обеспечивающие навигацию и выполнение специальных команд.
Файлы, папки, и проекты
Расположение основных элементов
VS Code обладает интуитивно понятной и простой схемой расположения основных элементов. Интерфейс разделен на четыре основных блока, это:
- Редактор, основной блок в котором осуществляется изменение содержимого открытого файла
- Сайдбар, с помощью которого можно увидеть различные представления файлов проекта
- Статусбар, показывающий текущий статус различных операций
- Вьюбар, позволяющий переключаться между режимами сайдбара и индицирующий с помощью иконок различную информацию, например количество исходящих git изменений
Редактор VS Code может открыть для редактирования на экране до трех файлов одновременно, располагая их друг за другом справа. Открыть дополнительные редакторы можно различными способами:
Ctrl (Mac: Cmd) и кликнуть на файле в обозревателе
Ctrl+\ для того чтобы разделить активный текущий редактор на два
Open to the Side в контекстном меню файла в обозревателе
Совет: Вы можете переместить сайдбар слева на право с помощью меню View, Move Sidebar а так же включить его видимость с помощью клавиатуры (Ctrl+B).
Палитра команд
Самым главным инструментом взаимодействия с редактором в VS Code является палитра команд. Вызвать ее можно через клавиатуру, нажав на комбинацию Ctrl+Shift+P. Множество команд перечисленных в палитре тоже привязаны к клавишам.
Введите в строку команды знак вопроса? и тогда вы получите перечень команд которые работают в текущем контексте:
Некоторые часто используемые команды:
- Ctrl+P навигация к файлу или символу по набранной строке
- Ctrl+Tab циклично открывает последние отредактированные файлы
- Ctrl+Shift+P выводит список команд редактора
- Ctrl+Shift+O навигация к некоторому символу в файле
- Ctrl+G навигация к строке в файле
- Ctrl+Tab выводит список всех файлов которые были открыты от момента запуска VS Code, удерживайте Ctrl и нажимайте Tab до тех пор пока не выберите нужный файл
- Alt+Left и Alt+Right навигация по ранее редактированным файлам и строкам назад и вперед
Обозреватель
Обозреватель предназначен для открытия и управления файлами находящимися в папке вашего проекта. Вы можете осуществлять множество привычных операций по созданию, изменению имени, удалению файлов и папок, и их перемещению.
Файлы, которые вы редактировали или открывали двойным щелчком в обозревателе, помещаются в верхнюю часть обозревателя и получают статус Working files:
Автосохранение
По умолчанию, VS Code работает в режиме явного сохранения, которое вы можете выполнить, нажав на комбинацию Ctrl+S. Этот режим совместим с большинством инструментов следящих за статусом файлов (например bower). Можно включить и режим автоматического сохранения (Auto Save), нажав Ctrl+Shift+P и набрать auto.
Поиск
Нажимите Ctrl+Shift+F и введите интересующую вас фразу. Результаты поиска будут сгруппированы, в дополнение вы можете развернуть узел группы чтобы посмотреть множественные вхождения. В строке поиска поддерживаются регулярные выражения.
Более детальный поиск может быть осуществлен с помощью команды Ctrl+Shift+J. Введите в дополнительные поля критерии поиска.
Возможности редактора
Подсказки IntelliSence
Где бы вы не находились в вашем коде, нажав на Ctrl+Space будет выведено окно подсказки IntelliSence. При наборе кода редактор будет показывать его автоматически.
Подсказки параметров
Для перегруженных функций вы можете листать варианты реализации используя клавиши Up и Down.
Сниппеты кода
Переход к определению символа
Нажав на F12 вы перейдете к определению символа. Если нажать Ctrl и провести курсором по символу вы увидите определение в дополнительном окне.
Переход к методу или переменной
Нажав на Ctrl+Shift+O вы откроете перечень методов в файле, в дополнение вы можете нажать двоеточие: и методы будут сгруппированы по типу. Нажав на Up и Down выберите нужный метод и курсор в редакторе перейдет на строку где находится выбранный метод.
Просмотр определения символа
Если вам необходимо быстро посмотреть на определение символа или на референсы, для того чтобы вспомнить детали реализации или использования, можно использовать поиск или переход к определению символов, что не всегда удобно так как переключает контекст.
В этом случае можно воспользоваться командами Reference Search (Shift+F12) или Peek Definition (Alt+F12) и результаты поиска будут отображаться в инлайн окошке:
Переименование методов и переменных
Отладка
Сохраните конфигурационный файл и выберите пункт Launch в меню, установите точку останова и нажмите F5 для старта отладки.
Отладчик позволяет просматривать значения текущих переменных:
Контроль версий
VS Code интегрирован с системой контроля версий git, и поддерживает большинство команд. В версии 0.5 был зафиксирован ряд ошибок связанных с интеграцией. Поддерживаются локальные и удаленные репозитарии.
Конфликты
VS Code позволяет осуществлять слияния и разрешение конфликтов при работе с системой контроля версий:
Редактор Visual Studio предоставляет множество возможностей, облегчающих написание кода и текста, а также управление им. Используя структуру, вы можете разворачивать и сворачивать различные блоки кода. Получить дополнительные сведения о коде можно с помощью технологии IntelliSense, окна Обозреватель объектов и иерархии вызовов. Для поиска в коде можно использовать такие функции, как Перейти, Перейти к определению и Найти все ссылки. Вставлять блоки кода можно с помощью фрагментов кода. Код также можно создавать с помощью функций, таких как Создание в результате использования. Если вы ранее не работали в редакторе Visual Studio, см. статью со сведениями об использовании редактора кода.
Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Редактор исходного кода (Visual Studio для Mac).
Код можно просматривать различными способами. По умолчанию в обозревателе решений код упорядочен по файлам. Чтобы просмотреть код, упорядоченный по классам, можно выбрать вкладку Представление классов в нижней части окна.
Можно выполнять поиск и замену текста в одном или нескольких файлах. Дополнительные сведения см. в статье Поиск и замена текста. Регулярные выражения платформы используются для поиска и замены текста. Дополнительные сведения см. в статье Использование регулярных выражений в Visual Studio.
Разные языки Visual Studio предоставляют разные наборы функций, а в некоторых случаях одни и те же функции ведут себя по-разному в разных языках. Многие из этих отличий указаны в описаниях функций. Дополнительные сведения можно найти в разделах, посвященных конкретным языкам Visual Studio.
Возможности редактора
Дополнительные возможности редактирования
В меню Правка > Дополнительно на панели инструментов есть набор дополнительных функций. Не все они доступны для каждого типа файлов кода.
Функция | Описание |
---|---|
Форматировать документ | Установка правильного отступа строк кода и перемещение фигурных скобок для разделения строк в документе. |
Форматировать выделенный фрагмент | Установка правильного отступа строк кода и перемещение фигурных скобок для разделения строк в выделенном фрагменте. |
Преобразовать пробелы в знаки табуляции в выделенных строках | Замена начальных пробелов на знаки табуляции там, где это уместно. |
Преобразовать знаки табуляции в пробелы в выделенных строках | Замена начальных знаков табуляции на пробелы. Если требуется преобразовать все пробелы в знаки табуляции в файле (или все знаки табуляции в пробелы), можно использовать команды Edit.ConvertSpacesToTabs и Edit.ConvertTabsToSpaces . Эти команды не включены в меню Visual Studio, но их можно вызывать из окна быстрого доступа или окна командной строки. |
Все прописные | Перевод всех символов в выделенном фрагменте в верхний регистр или, если ничего не выбрано, перевод символа в позиции курсора в верхний регистр. Ярлык. CTRL+SHIFT+U. |
Все строчные | Перевод всех символов в выделенном фрагменте в нижний регистр или, если ничего не выбрано, перевод символа в позиции курсора в нижний регистр. Ярлык. CTRL+U. |
Переместить выбранные строки вверх | Перемещение выбранной строки вверх на одну строку. Ярлык. ALT+СТРЕЛКА ВВЕРХ. |
Переместить выбранные строки вниз | Перемещение выбранной строки вниз на одну строку. Ярлык. ALT+ВНИЗ. |
Удалить пустое пространство по горизонтали | Удаление символов табуляции и пробелов в конце текущей строки. Ярлык. CTRL+K, CTRL+ \ |
Показать пустое пространство | Отображение пробелов в виде приподнятых точек, а символов табуляции — в виде стрелок. Конец файла отображается как прямоугольный глиф. Если с помощью меню выбран вариант Сервис > Параметры > Текстовый редактор > Все языки > Перенос по словам > Показывать графические метки в местах переноса слов, этот глиф также будет отображаться. |
Перенос по словам | В этом режиме все строки документа отображаются полностью в окне кода. Перенос по словам можно включить или отключить в разделе Все языки для текстового редактора (Сервис > Параметры > Текстовый редактор > Все языки). |
Закомментировать выделенный фрагмент | Добавление символов комментария к выбранному фрагменту или текущей строке. Ярлык. CTRL+K, CTRL+C |
Раскомментировать выделенный фрагмент | Удаление символов комментария из выбранного фрагмента или текущей строки. Ярлык. CTRL+K, CTRL+U |
Увеличить отступ строки | Добавление символа табуляции (или эквивалентных пробелов) к выбранным строкам или текущей строке. |
Уменьшить отступ строки | Удаление символа табуляции (или эквивалентных пробелов) из выбранных строк или текущей строки. |
Выбрать тег | Выбор тега в документе, содержащем теги (например, XML или HTML). |
Выделить содержимое тега | Выбор содержимого в документе, содержащем теги (например, XML или HTML). |
Перемещение по коду и поиск
Перемещаться по редактору кода можно несколькими способами, включая переход назад и вперед к точкам вставки, просмотр определения типа или члена и переход к определенному методу с помощью панели навигации. Дополнительные сведения см. в статье Навигация по коду.
Поиск ссылок в базе коде
Чтобы найти, где именно в базе кода используются ссылки на элементы кода, можно использовать команду Найти все ссылки или нажать SHIFT+F12. Кроме того, когда вы щелкаете тип или член, функция выделения ссылок автоматически выделяет все ссылки на него. Дополнительные сведения см. в разделе Поиск ссылок в коде.
Создание, исправление или рефакторинг кода
Visual Studio помогает создавать, исправлять код и выполнять его рефакторинг самыми разными способами.
Вы можете использовать фрагменты кода для вставки шаблона, такого как блок switch или объявление enum.
Вы можете использовать быстрые действия для создания кода, например классов и свойств, или для введения локальной переменной. Кроме того, быстрые действия можно использовать для улучшения кода, например для удаления ненужных приведений и переменных либо для добавления проверок значений NULL перед обращением к переменным.
Вы можете выполнять рефакторинг кода, например чтобы переименовывать переменные, изменять порядок параметров метода или синхронизировать тип с его именем файла.
Настройка редактора
Вы можете использовать свои параметры Visual Studio совместно с другим разработчиком, привести параметры в соответствие со стандартом или вернуться к настройкам, заданным по умолчанию в Visual Studio, с помощью команды Мастер импорта и экспорта параметров в меню Сервис. В мастере импорта и экспорта параметров можно изменить выбранные общие параметры, а также зависящие от языка и проекта параметры.
Чтобы определить новые или переопределить существующие сочетания клавиш, выберите Сервис > Параметры > Среда > Клавиатура. Дополнительные сведения о сочетаниях клавиш см. в статье Сочетания клавиш по умолчанию в Visual Studio.
Параметры редактора для JavaScript см. в статье о параметрах редактора JavaScript.
В этом 10-минутном введении, посвященном редактору кода в Visual Studio, мы добавим код в файл, чтобы рассмотреть некоторые способы, упрощающие написание, понимание кода и навигацию по нему в Visual Studio.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Создание файла кода
Для начала создайте файл и добавьте в него код.
Запустите Visual Studio.
В меню Файл в строке меню выберите Создать > Файл.
Запустите Visual Studio. Нажмите клавишу ESC или нажмите Продолжить без кода в окне запуска, чтобы открыть среду разработки.
В меню Файл в строке меню выберите Создать > Файл.
Запустите Visual Studio. Нажмите клавишу ESC или щелкните команду Продолжить без кода в окне запуска, чтобы открыть среду разработки.
В меню Файл в строке меню выберите элементы Создать > Файл или нажмите клавиши CTRL+N.
Использование фрагментов кода
Появится всплывающее диалоговое окно с информацией о фрагменте кода svm .
Два раза нажмите клавишу TAB, чтобы вставить фрагмент кода.
Вы увидите, как в файл добавляется сигнатура метода static void Main() .
Поместите курсор над последней закрывающей фигурной скобкой > в файле и введите символы svm .
Появится всплывающее диалоговое окно с информацией о фрагменте кода svm .
Два раза нажмите клавишу TAB, чтобы вставить фрагмент кода.
Список включает фрагменты кода для создания класса, конструктора, цикла for, операторов if и switch и многое другое.
Закомментирование кода
Панель инструментов, которая находится в строке кнопок под строкой меню в Visual Studio, поможет повысить продуктивность написания кода. Например, можно переключить режим завершения IntelliSense (IntelliSense — это помощник в написании кода, который отображает список подходящих методов и многое другое), увеличить или уменьшить отступ строки или закомментировать код, который вы не хотите компилировать. В этом разделе мы закомментируем код.
Вставьте следующий код в тело метода Main() .
Мы не используем переменную morewords , но, возможно, воспользуемся ею позднее, поэтому удалять ее полностью не следует. Вместо этого давайте закомментируем эти строки. Выберите все определение формы morewords до закрывающей точки с запятой и нажмите кнопку Закомментировать выделенные строки на панели инструментов. Если вы предпочитаете использовать клавиатуру, нажмите Ctrl+K, Ctrl+C.
Панель инструментов текстового редактора, которая представляет строку с кнопками под строкой меню в Visual Studio, делает написание кода более продуктивным. Например, вы можете переключить режим завершения IntelliSense, увеличить либо уменьшить отступ для строк или закомментировать фрагмент кода, который не нужно компилировать.
Давайте закомментируем некоторую часть кода.
Вставьте следующий код в тело метода Main() .
Мы не используем переменную moreWords , но, возможно, применим ее позднее. Поэтому удалять ее не следует. Вместо этого мы закомментируем эти строки. Выберите все определение moreWords до закрывающей точки с запятой и нажмите кнопку Закомментировать выделенные строки на панели инструментов текстового редактора. Если вы предпочитаете использовать клавиатуру, нажмите клавиши CTRL+E, C.
Если нужно раскомментировать строки, выберите их, а затем нажмите кнопку Раскомментировать выбранные строки на панели инструментов текстового редактора. Если вы предпочитаете использовать клавиатуру, нажмите клавиши CTRL+E, U.
Свертывание блоков кода
Нам не нужно отображать пустой конструктор, созданный для Class1 . Поэтому, чтобы не перенасыщать представление кода деталями, мы свернем его. Выберите небольшое серое поле со знаком "минус" внутри в поле первой строки конструктора. Или, если вы предпочитаете использовать клавиатуру, поместите курсор в любое место кода конструктора и нажмите клавиши CTRL+M, CTRL+M.
Блок кода сворачивается до первой строки, после которой идет многоточие ( . ). Чтобы развернуть блок кода, щелкните то же серое поле, в котором теперь находится знак "плюс", или нажмите клавиши CTRL+M, CTRL+M еще раз. Эта функция называется структурированием и особенно полезна при свертывании длинных методов или целых классов.
Нам не нужно отображать пустой конструктор, созданный для Class1 . Поэтому, чтобы не перенасыщать представление кода деталями, мы свернем его. Выберите небольшое серое поле со знаком "минус" внутри в поле первой строки конструктора. Или, если вы предпочитаете использовать клавиатуру, поместите курсор в любое место кода конструктора и нажмите клавиши CTRL+M, CTRL+M.
Блок кода сворачивается до первой строки, после которой идет многоточие ( . ). Чтобы развернуть блок кода, щелкните то же серое поле, в котором теперь находится знак "+", или нажмите клавиши CTRL+M, CTRL+M еще раз. Эта функция называется структурированием и особенно полезна при свертывании длинных методов или целых классов.
Просмотр определений символов
В редакторе Visual Studio можно легко проверить определение типа, метода и т. д. Один из способов заключается в том, чтобы перейти к файлу, который содержит определение, например, выбрав Перейти к определению в любом месте, где указана ссылка на этот символ. Сделать это еще быстрее и даже без перемещения фокуса с рабочего файла можно с помощью команды Показать определение. Давайте посмотрим определение типа string .
Щелкните правой кнопкой мыши любой из экземпляров string и выберите пункт Показать определение в контекстном меню. Или нажмите Alt+F12.
Отображается всплывающее окно с определением класса String . Вы можете прокрутить его или даже показать определение другого типа из просматриваемого кода.
Закройте окно просматриваемого определения, щелкнув небольшое поле со знаком "x" в его правом верхнем углу.
В редакторе Visual Studio можно легко проверить определение типа, метода или переменной. Один из способов — перейти к файлу, который содержит определение. Для этого выберите команду Перейти к определению или нажмите клавишу F12 в любом месте, где указана ссылка на этот символ. Сделать это еще быстрее и даже без перемещения фокуса с кода можно, щелкнув команду Показать определение.
Давайте посмотрим определение типа string .
Щелкните правой кнопкой мыши любой из экземпляров string и выберите пункт Показать определение в контекстном меню. Или нажмите клавиши ALT+F12.
Отображается всплывающее окно с определением класса String . Вы можете прокрутить его или даже показать определение другого типа из просматриваемого кода.
Закройте окно просматриваемого определения, щелкнув небольшое поле со знаком Х справа в верхнем углу.
Использование IntelliSense для завершения слов
Технология IntelliSense крайне полезна при написании кода. Она может отображать сведения о доступных членах типа или сведения о параметрах для различных перегрузок метода. Вы также можете использовать IntelliSense для завершения слова после того, как ввели достаточно знаков для однозначного его определения. Давайте добавим строку кода для вывода упорядоченных строк в окне консоли — это стандартное место для отображения выходных данных программы.
Начните набирать следующий код под переменной query .
Вы видите, как IntelliSense показывает Краткие сведения о символе query .
Чтобы вставить оставшуюся часть слова query с помощью функции завершения слов IntelliSense, нажмите клавишу Tab.
Завершите блок кода, чтобы он выглядел аналогично приведенному ниже примеру кода. Вы даже можете снова попрактиковаться в использовании фрагментов кода, введя cw и дважды нажав клавишу TAB, чтобы создать код Console.WriteLine .
Технология IntelliSense крайне полезна при написании кода. Она может отображать сведения о доступных членах типа или сведения о параметрах для различных перегрузок метода. Вы также можете использовать IntelliSense для завершения слова после того, как ввели достаточно знаков для однозначного его определения.
Давайте добавим строку кода для вывода упорядоченных строк в окне консоли — это стандартное место для отображения выходных данных программы.
Начните набирать следующий код под переменной query .
Вы увидите всплывающее окно IntelliSense с информацией о символе query .
Чтобы вставить оставшуюся часть слова query с помощью функции завершения слов IntelliSense, нажмите клавишу TAB.
Завершите блок кода, чтобы он выглядел аналогично приведенному ниже примеру кода. Вы можете попрактиковаться, используя фрагменты кода. Для этого введите cw и дважды нажмите клавишу TAB, чтобы создать оператор Console.WriteLine .
Рефакторинг имени
Никто не пишет код правильно с первого раза, и, среди прочего, вам может потребоваться изменить имя переменной или метода. Давайте попробуем использовать функциональность рефакторинга Visual Studio, чтобы переименовать переменную _words в words .
Поместите курсор на определение переменной _words и выберите пункт Переименовать в контекстном меню или нажмите клавиши CTRL+R, CTRL+R.
В верхней правой части редактора отображается всплывающее диалоговое окно Переименование.
Введите нужное имя words. Обратите внимание, что ссылка на words в запросе также переименовывается автоматически. Перед нажатием клавиши ВВОД установите флажок Включить комментарии во всплывающем окне Переименование.
Нажмите клавишу ВВОД.
Переименованы были оба экземпляра words , а также ссылка на words в комментарии кода.
Никто не пишет код правильно с первого раза, и, среди прочего, вам может потребоваться изменить имя переменной или метода. Давайте попробуем использовать функциональность рефакторинга Visual Studio, чтобы переименовать переменную someWords в unsortedWords .
Поместите курсор на определение переменной someWords и выберите команду Переименовать в контекстном меню или нажмите клавишу F2.
Справа в верхней части окна редактора отобразится диалоговое окно Переименование.
Введите имя unsortedWords. Вы увидите, что ссылка на unsortedWords в операторе назначения query также переименовывается автоматически. Прежде чем нажать клавишу ВВОД или щелкнуть действие Применить, установите флажок Включить комментарии во всплывающем окне Переименовать.
Нажмите клавишу ВВОД или щелкните команду Применить в диалоговом окне Переименование.
Оба вхождения someWords в коде, а также текст someWords в комментарии к коду были переименованы.
VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.
VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense "из-коробки".
В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.
Осторожно! Под катом много картинок и гифок.
Stable vs Insiders
В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного пот помучаться и установить два расширения:
Последний, впрочем, может быть заменен на XO.
Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:
Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:
В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве "бекенда" он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.
Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:
Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними
Align
Beautify
Bookmarks
Позволяет запоминать строки и быстро переходить к ним
Color Highlighter
Интеграция с Dash
Debugger for Chrome
Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.
ECMAScript Quotes Transformer
Преобразует кавычки в ES строковых литералах
Editor Config for VSCode
Поддержка формата .editorconfig
ftp-sync
Автоматически синхронизирует файлы по ftp протоколу
Project Manager
Менеджер проектов для VS Code
Runner
Позволяет запускать скрипты прямо из редактора
К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.
Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.
Base16 Ocean
Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)
Material-theme
В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:
Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.
Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. :)
Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов "звездочками". К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!
Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.
Несмотря на столь высокую популярность программы, ее функционал до сих пор остается не таким очевидным, из-за чего многие пользователи предпочитают продукт конкурента, нежели VS Code. Чтобы решить все проблемы, возникающие при работе с Visual Studio Code, рекомендую ознакомиться с подробным гайдом по настройке этого редактора кода. В нем я покажу, что VS Code – это мощный инструмент, которым может пользоваться каждый.
Установка Visual Studio Code
С установкой среды не должно возникнуть никаких проблем, но давайте все же проведем небольшой ликбез. Выполним несколько действий:
- Переходим на официальный сайт и загружаем установочный файл.
- Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в VS Code.
На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем --disable-gpu.
Готово! Теперь программа должна работать на любом компьютере.
Интерфейс Visual Studio Code
При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.
Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.
В результате перед нами отобразится окно с кодом из файла. Давайте визуально разделим интерфейс на блоки и рассмотрим каждый из них более детально.
Первое, что бросается в глаза, – это блок кода, для которого отведено больше всего места. Название функций и прочее подсвечено разными цветами. Здесь же указан путь до файла, а чуть выше расположены вкладки-файлы, по которым можно перемещаться. С помощью них мы можем добавлять не просто один файл с кодом, а целый проект.
Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.
Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.
Система управления версиями – предназначена для взаимодействия с git.
Запустить и проверить работоспособность кода мы можем в следующей вкладке:
Еще одна важная вкладка, с помощью которой из Visual Studio Code можно сделать функциональную утилиту, это «Расширения». В ней находятся установочники для всех популярных инструментов, используемых разработчиками.
Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы. Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом.
И еще один раздел – правая панель, включающая в себя небольшой дисплей, который отображает код в уменьшенном варианте, а также позволяет удобно скроллить внутри него. Здесь же мы можем разделить окно кода на несколько столбцов, а также закрыть все файлы одним кликом – для этого используются две верхние кнопки.
Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.
Русификация Visual Studio Code
Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.
Перезагружаем программу и смотрим, что язык интерфейса был изменен на русский:
Если вы захотите вернуть англоязычный интерфейс, для этого потребуется открыть раздел с плагинами и удалить установленный пакет с русским языком.
Внешний вид
Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».
В результате отобразится список возможных тем – для примера возьмем солнечную тему.
После применения темы интерфейс примет следующий вид:
Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.
Вот так мы можем изменить внешний вид программы. Теперь давайте перейдем к техническим моментам и рассмотрим работу наиболее важных плагинов.
Управление проектами
По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.
Теперь работа с проектами не должна вызывать никаких трудностей.
Автоформатирование кода
Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.
Рассмотрим, как форматируется код, написанный на JavaScript:
- Возьмем для примера функцию, отступы в которой выстроены случайным образом.
- Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
- Смотрим на код и видим, что он преобразился и принял аккуратный вид.
Аналогичным образом мы можем отформатировать код, написанный на других языках программирования. Для этого достаточно установить нужное расширение.
Автодополнение
В популярных программах, подобных Visual Studio, встроена функция автодополнения, помогающая завершить код. Например, вы пишите строчку кода, а среда подсказывает, как ее завершить. С помощью этой опции можно не только вспомнить нужную функцию, но и быстро написать код.
По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».
Посмотреть, какие пакеты доступны, вы можете в магазине плагинов.
Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.
Управление Vim
Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:
Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.
Отладка кода
Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».
В результате в левой части окна будет отображен список доступных плагинов – найдите в нем подходящий для вас и следуйте инструкции.
После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».
С помощью плагинов мы можем отладить код, написанный на любом языке программирования.
Заключение
Сегодня мы разобрали функционал инструмента Visual Studio Code. Данная среда хороша не только для профессионалов, но и для новичков, изучающих основы программирования. Одно из преимуществ программы – это минимальное требование к железу: запустить программу можно практически на любом компьютере.
Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!
Читайте также: