Недавно мы беседовали с Анной Леоновой о её пути в программировании. Аня пишет код в редакторе Visual Studio Code и сегодня поделится своими настройками. Вы узнаете, как установить программу и подготовить её для комфортной работы.
Статья для тех, кто только знакомится с программированием и ищет мощный бесплатный редактор — такой, чтобы один раз установить и много лет не менять.
Что за Visual Studio Code?
Это популярная бесплатная программа для разработчиков, которая помогает писать код. Например:
- Знает синтаксис разных языков программирования и помогает вам не ошибиться в точке с запятой или скобочке.
- Сама подставляет некоторые распространённые фрагменты кода.
- Помнит названия ваших переменных и подсказывает их, чтобы не было ошибок.
- Умеет загружать ваш код на Гит.
- Помогает отлаживать код.
- Поддерживает плагины, которые превращают её в мегакомбайн для разработчика.
VSCode — один из самых популярных редакторов кода, потому что он бесплатный и открытый, его можно сделать каким угодно под свои задачи. Есть и другие: например, Sublime Text или продукты компании JetBrains.
Visual Studio Code Tutorial for Beginners — Introduction
Помните, что не редактор делает ваш код крутым, а ваши собственные знания алгоритмов, типов данных и возможностей языка. Хороший программист напишет хороший код хоть на салфетке, а плохому не поможет даже самый навороченный софт.
Установка
Перейдите на code.visualstudio.com и скачайте актуальную версию редактора под свою операционную систему — есть поддержка для Linux, Windows и Mac OS. Далее просто следуйте командам программы-загрузчика и откройте редактор.
Приветственное окно Visual Studio Code после установки
Перед знакомством с интерфейсом вернитесь на официальный сайт и добавьте в закладки страницу с документацией — Docs. Документацию рекомендуем изучить всю сразу до начала работы с проектом. Если не получится — постепенно в свободное время. Документация — это инструкция к инструменту. Если вы хорошо изучите возможности VS Code, то сможете его полностью настроить и оформить под себя.
❌ Новички часто выбирают редактор методом тыка: скачивают несколько программ, визуально оценивают их интерфейс и начинают работать там, где им кажется удобнее или красивее. Редко бывает так, что программиста устраивает стандартный интерфейс и настройки — новички в этом случае прыгают между разными редакторами, сравнивают их базовые возможности и теряют время.
✅ Выбирайте редактор, который можно как угодно изменять и настраивать. Нравится внешний вид Sublime Text, но не хватает мощи VS Code — нет проблем: находите тему, меняете шрифт, добавляете пару расширений и готово. Чтобы быстро освоить VS Code, изучайте интерфейс по документации.
Настройка
VS Code готов к работе сразу после установки — в него по умолчанию добавлено большинство плагинов для веб-разработки. Можно сразу загрузить проект или начать программировать в новом файле. Нужно только привыкнуть к интерфейсу.
Learn Visual Studio Code in 7min (Official Beginner Tutorial)
Если вы раньше пользовались другим редактором и не удалили его с компьютера, то VS Code автоматически предложит перенести сохранённые настройки. Для переноса вам достаточно кликнуть на всплывающую подсказку и перезагрузить VS Code — переносятся плагины, расширения и установленные горячие клавиши.
Если у вас ещё не было кодового редактора, то ниже мы рассмотрим несколько базовых настроек, которые помогут персонализировать интерфейс VS Code.
Устанавливаем русский язык. На левой боковой панели нажмите Extensios и в строке поиска напишите Russian Language Pack — это языковой пакет, который адаптирует VS Code под русский язык. Выберите расширения, кликните Install и перезапустите редактор. У вас должен открыться русифицированный интерфейс.
Языковой пакет Russian Language Pack
Если после перезагрузки язык не изменился — на левой боковой панели нажмите значок шестерёнки и выберите раздел Command Palette. Появится строка поиска: напишите Display, выберите команду Configure Display Language и нажмите Enter. Смените язык с английского на русский и повторно перезагрузите редактор.
Приветственное окно Visual Studio Code после установки языкового пакета
Меняем цветовую тему. В левой боковой панели нажмите на значок шестерёнки, перейдите в раздел «Цветовая тема» и выберите тему, встроенную в редактор.
Если ничего не нравится — установите любую внешнюю тему, которую получится найти в интернете. Если тема совместима с VS Code, то после скачивания она сама откроется в редакторе и вам достаточно нажать «Установить». Начать поиск рекомендуем с официального маркетплейса , где собраны тысячи бесплатных тем.
Анна Леонова рекомендует тему Night Owl — ночная сова. Её мы и поставили для теста
Добавляем любимый шрифт. В боковой панели нажмите на шестерёнку, выберите раздел «Параметры» → «Текстовый редактор» → «Шрифт». Перед вами будет вкладка Font Family, в которую нужно вписать название выбранного шрифта — если этот шрифт скачан или сохранён в операционной системе, то он сразу отобразится в редакторе. Здесь же можно изменить размер и жирность шрифта.
Меняем стандартный шрифт Visual Studio Code на Courier New
Включаем автосохранение . В боковой панели выберите шестерёнку, перейдите в «Параметры» → «Текстовый редактор» → «Файлы». Вы увидите вкладку Auto Save, в которой нужно указать период сохранения файлов. Мы рекомендуем режим afterDelay с задержкой в одну секунду — так вы будете сразу сохранять всё, что запишете. Если вы выберете режим onFocusChange, то изменения в рабочем файле будут сохраняться каждый раз, когда вы будете открывать другие вкладки редактора. В режиме onWindowChange изменения происходят сразу после того, когда вы сворачиваете VS Code и открываете окна других программ.
Включаем режим автосохранения и делаем так, чтобы файлы сохранялись ежесекундно
Горячие клавиши
Горячие клавиши — это помощник программиста и инструмент для быстрого выполнения рутинных задач. Предположим, нам нужно создать новый HTML-файл и написать его структуру. Без горячих клавиш этот процесс выглядит так:
- Переходим в меню и открываем вкладку «Файл».
- Выбираем команду «Новый файл».
- Возвращаемся в меню и повторно открываем вкладку «Файл».
- Находим команду «Сохранить как».
- Пишем название файла, выбираем место хранение, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
- Вручную прописываем скелет HTML-документа или тратим время, чтобы найти и скопировать структуру из интернета.
Visual Studio Code
Мощный, компактный и бесплатный редактор кода с интегрированными инструментами для простого развертывания кода в Azure.
Один редактор для всех этапов процесса от кода до облака
Уделяйте больше времени на написание кода и меньше на переключение между инструментами. Используйте функции и расширения, которые интегрируются с Azure и GitHub для разработки, отладки и развертывания всего из одного расположения.
Предоставляет локальные эмуляторы и расширения для создания, запуска и отладки облачных приложений непосредственно в редакторе.
Импортирует данные локальных или удаленных баз данных с поддержкой Azure Cosmos DB, MongoDB и т. д. и управляет ими.
Содержит пошаговые рабочие процессы для GitHub Actions и Azure Pipelines по созданию и настройке непрерывной интеграции.
Поддерживает почти все типы языков и приложений, включая статические веб-приложения, бессерверные Функции Azure и кластеры Kubernetes.
Локальная разработка облачных приложений перед развертыванием
Создавайте, запускайте облачные проекты локально и выполняйте их отладку, чтобы можно было быстро создать прототип. Оптимизируйте затраты, проверяя перед развертыванием, эффективно ли выполняются новые функции в облаке. Расширения Azure включают эмуляторы для службы хранилища Azure, Azure Cosmos DB и Функций Azure.
Настройка автоматических развертываний в облако
Используйте расширение Развертывание в Azure , чтобы настроить непрерывную поставку и непрерывную интеграцию (CI/CD) из приложений в облако с помощью GitHub Actions или Azure Pipelines. Легко создавайте конвейер CI/CD, предназначенный для Службы приложений Azure, Функций Azure или Службы Azure Kubernetes (AKS), используя встроенные автоматические рабочие процессы расширения.
Добавление данных и управление ими
Легко управляйте данными приложения с помощью встроенной поддержки MongoDB и IntelliSense. Подключитесь к локальным или удаленным серверам MongoDB и управляйте базами данных, коллекциями и документами или разместите их в облаке с помощью Azure Cosmos DB уровня «Бесплатный».
Простая совместная работа
Вам не нужно изменять способ работы с другими пользователями, будь то коллеги в вашем кабинете или разработчики по всему миру, работающие над проектами с открытым кодом. Переносите запросы на вытягивание и проблемы из GitHub в редактор с помощью соответствующего расширения для GitHub. Или совместно работайте над редактированием и отладкой с совместным доступом к приложению в реальном времени для парного программирования или проверки кода с расширением Live Share.
Комплексные встроенные средства обеспечения безопасности и соответствия требованиям
Корпорация Майкрософт ежегодно инвестирует более 1 млрд USD(долларов США) в исследования и разработку решений для кибербезопасности.
Источник: azure.microsoft.com
Visual Studio Code: определение, описание, назначение и другие нюансы
Visual Studio Code — это инструмент для верстальщиков и программистов, который является одним из самых популярных в своей нише. Это редактор кода от компании Microsoft, который является «облегченной» версией их другого популярного продукта — Visual Studio.
Visual Studio Code позиционирует себя как редактор кода, но при помощи плагинов его функциональность можно «разогнать» до уровня полноценной среды разработки. Facebook недавно объявил, что его разработчики используют этот редактор в качестве основного. Доверие такой компании этому программному обеспечению говорит о многом.
Visual Studio Code — что это такое?
Visual Studio Code распространяется на бесплатной основе и может быть установлен на все популярные платформы: Windows, Linux, MacOS. Его специально сделали очень «легким», чтобы программу можно было запустить на маломощных компьютерах.
Большой проблемой индивидуальных программистов является «тяжесть» профессионального инструмента для программирования, в следствие чего «слабые» устройства не позволяют качественно программировать. Visual Studio Code исправляет эту ситуацию и позволяет добавлять необходимый функционал при помощи расширений. Профессиональные IDE изначально поставляются «навешанными» крутым инструментом, который может вообще не использоваться разработчиком. В Visual Studio Code происходит наоборот — он поставляется «облегченным», для самых просты х задач, например , для верстки сайтов. А для сложных задач вы уже самостоятельно подбираете инструмент.
Работа на Visual Studio Code
- щелкните «правым кликом» мыш и по ярлыку программы на рабочем столе;
- в открывшемся меню найдите пункт «Свойства»;
- в свойствах Visual Studio Code откройте пункт «Объект»;
- в этом пункте будет указан полный путь до папки, где установлен Visual Studio Code, в этом пути вам необходимо будет дописать флаг «- — disable-gpu»;
- не забудьте сохранить изменения.
- откройте Visual Studio Code;
- в левом вертикальном меню, где будет расположено несколько иконок , нужно открыть самую нижнюю, которая отвечает за «Расширения», тут будут показаны все расширения, которые вы будете в дальнейшем устанавливать;
- в открытой папке «Расширения» воспользуйтесь «поиском» и введите для поиска название плагина «vscode-language-pack-ru»;
- вам отобразится найденный плагин для русификации , рядом с ним будет располагаться кнопка «Install», на которую нужно будет нажать;
- после окончания установки плагина останется только перезапустить редактор и наслаждаться его русской версией.
Плагины для Visual Studio Code
- Emeet. Плагин , который ускоряет написание кода за счет того, что добавляет возможность при помощи простых формул добавлять сложные структуры кода. Например , прописав «ul>li*5» и нажав «Таb» , вы автоматически добавите в код маркированный список из 5 элементов.
- Live Sass Compiler. Плагин является компилятором SASS/SCSS в стандартный CSS, поэтому пригодится тем, кто работает с препроцессорами.
- Live Server. Инструмент, который создаст локальный сервер на вашем компьютере. Удобно тем, что позволяет просматривать изменения в HTML-документе, который будет открыт в вашем браузере , в режиме реального времени.
- Polacode. Инструмент, который позволяет быстро и без особых усилий создавать скриншоты кода прямо в редакторе. Всего-то нужно выделить участок кода «рамочкой» и сделать скриншот.
- Prettier. Благодаря этому инструменту вы можете писать код как вам удобно, а плагин приведет его к единому формату. Такой инструмент полезен в командной работе, когда несколько программистов пишут код по-разному и спорят , чья манера написания лучше. Prettier улаживает споры, потому что приводит все стили написания к единому формату.
- Автодополнение. Эт от инструмент позволяет быстрее писать ко д з а счет его автоматического завершения. Для каждого отдельного языка программирования есть свой подобный плагин, который обязательно должен оканчиваться на «intellisense». Например , для PHP инструмент будет называться «PHP Intellisense».
- Отладка. Для отладки кода существует большое количество плагинов, в названии которых обязательно присутствует слово «debugger» или «debug». Например , для отладки JavaScript в Гугл Хром используется плагин «Debugger for Chrome», а для отладки кода на Java используется плагин «Debugger Java».
- Поддержка языка. По умолчанию Visual Studio Code поддерживает небольшое количество языков. Если вам нужна поддержка какого-то языка, м ожно добавить соответствующее расширение. Например , для языка Golang — плагин «Go», для языка С# — плагин «С#» и т . д .
Заключение
Visual Studio Code — это инструмент, который отлично подойдет как для новичков, так и для крутых профессионалов. Потому что тех и других р едактор может обеспечить всем необходимым инструменто м б лагодаря большому количеству доступных расширений. Главным преимуществом этого инструмента является его низкая требовательность к технических характеристикам компьютера, что позволяет запускать его даже на самых слабых устройс т вах.