Visual Studio Code представляет кроссплатформенный подвинутый легковесный текстовый редактор от компании Microsoft, который поддерживает подсветку синтаксиса, интеллектуальную подсказку для разных языков программирования и многое другое. Рассмотрим, как мы можем использовать данный текстовый редактор для разработки на языке Go.
Прежде всего установим данный текстовый редактор. Инсталлятор для нужной операционной системы (есть поддержка для Windows, Mac OS, Linux) можно найти по адресу https://code.visualstudio.com/.
После установки Visual Studio Code по умолчанию не имеет никакой поддержки языка Go. Поэтому необходимо установить соответствующее расширение. Для этого перейдем в Visual Studio Code в меню View -> Extensions
В строку поиска расширений введем «go», и нам отобразится список найденных расширений. Нам нужно установить первое в этом списке, которое имеет больше всего установок:
Как установить Visual Code для Python, C#, C++, Java, Javascript
После установки расширения определим на жестком диске папку для хранения файлов проекта и откроем эту папку в Visual Studio Code. Открыть папку можно через пункт меню File -> Open Folder . Затем создадим в VS Code новый файл, который назовем main.go :
Откроем файл main.go и введем в него следующий код:
package main import «fmt» func main()
Сохраним введенный код, нажав на комбинацию Ctrl+S.
При работе с файлами go в VS Code могут появляться различные сообщения о необходимости установки дополнительных плагинов. Например, внизу окна в статусной строке может отображаться сообщение «Analysis Tools Missing». Можно нажать на это сообщение, и вверху VS Code отобразится список пакетов, которые желательно доустановить. Для их установки надо нажать на кнопку Install.
Преимуществом VS Code является то, что этот редактор имеет встроенный терминал. Откроем терминал через пункт меню View -> Integrated Terminal . После этого внизу VS Code откроется встроенный терминал. По умолчанию в нем открывается текущая папка проекта.
Введем в терминал следующую команду и нажмем Enter:
go run main.go
После этого во встроенном терминале мы увидим вывод программы:
Источник: metanit.com
Установка Flutter в VS Code
Первым шагом в установке Flutter на VS Code является загрузка и установка Flutter SDK. Вы можете загрузить последнюю стабильную версию Flutter SDK с официального веб-сайта Flutter. После загрузки SDK извлеките содержимое в каталог по вашему выбору, например C:/tools/flutter.
VS Code – обзор редактора кода | Настройка и установка Visual Studio Code
Добавляем Flutter SDK в переменные среды
Чтобы можно было выполнять команду flutter в консоли, добавьте путь к Flutter SDK в переменные среды.
- Открываем Мой Компьютер -> Свойства -> Дополнительные параметры системы -> Переменные среды.
- В окне Переменные среды, в разделе Пользовательские переменные или Системные переменные выбираем переменную Path и далее кнопку Изменить.
- Вписываем в переменную Path путь до вашей директории (в моем случае C:toolsflutterbin). Нажмите ОК и закройте все окна.
- Откройте новое окно командной строки или перезапустите все существующие окна командной строки.
- Запустите команду в консоли, чтобы убедиться, что Flutter был правильно установлен и переменная среды настроена.
flutter doctor
Устанавливаем VS Code
Если на вашем компьютере еще не установлен VS Code, вам необходимо загрузить и установить его с официального веб-сайта VS Code. После того как вы установили VS Code, вы можете запустить его и перейти к следующему шагу.
Устанавливаем расширение Flutter
Чтобы начать разработку на Flutter в VS Code, вам необходимо установить расширение: Flutter. Вы можете сделать это, открыв VS Code и нажав на значок расширения на левой боковой панели. Найдите Flutter в строке поиска и нажмите Install. Как только расширение будет установлено, вам нужно будет перезапустить VS Code, чтобы изменения вступили в силу.
Настраиваем путь к Flutter SDK
После установки расширений Flutter и Dart вам нужно будет настроить путь к Flutter SDK в VS Code. Для этого откройте настройки VS Code, нажав на значок шестеренки в левом нижнем углу окна и выбрав Settings. Найдите Flutter SDK Path в строке поиска и дальше нажмите Edit в settings.json.
В файле JSON добавьте путь к каталогу Flutter SDK, который вы извлекли на шаге 1. Например:
«dart.flutterSdkPath»: «C:/tools/flutter»
Создаем новый проект Flutter
Теперь, когда у вас настроены Flutter и VS Code, вы можете создать новый проект Flutter. Откройте командную палитру VS Code, нажав Ctrl+Shift+P (Windows) или Cmd+Shift+P (Mac) и найдите Flutter: New Project. Следуйте инструкциям, чтобы создать новый проект Flutter и выберите каталог для его сохранения.
Запустите приложение
После того как вы создали новый проект Flutter, вы можете запустить тестовое приложение, нажав клавишу F5 или кнопку Start Debugging на панели инструментов VS Code. Это запустит приложение на выбранном устройстве или эмуляторе, что позволит вам протестировать и отладить код.
Тестовое приложение выглядит так:
Если при запуске приложения выходит ошибка Exception: Unable to find suitable Visual Studio toolchain, то скачайте и установите Visual Studio с пакетом Разработка классических приложений на C++.
Заключение
Установка Flutter на VS Code — это простой процесс, который включает загрузку и установку Flutter SDK, установку расширений Flutter и Dart в VS Code, настройку пути к Flutter SDK и создание нового проекта Flutter. Выполнив эти шаги, вы в кратчайшие сроки приступите к разработке Flutter.
Источник: codelab.pro
Настройка Visual Studio Code для JavaScript, HTML и CSS
Visual Studio Code – это кроссплатформенный редактор кода для разработки web проектов, выпущенный Microsoft под Windows, Linux и macOS. VS Code распространяется бесплатно, постоянно развивается, а функционал расширяется плагинами. Платформа особенно популярна среди Frontend разработчиков, но также используется и другими программистами. Среди основных возможностей стоит отметить: отладчик, работа с Git, подсветка синтаксиса, встроенный терминал и пакетный менеджер.
После установки Visual Studio Code, которая не должна вызвать никаких проблем, пользователь получает полноценную платформу для написания кода. Без дополнительных манипуляций здесь доступен Emmet, а функционал легко дополняется расширениями через Visual Studio Marketplace, доступный также через интерфейс редактора. В магазин можно попасть, кликнув на иконку Extensions расположенную в боковой панели или нажав сочетание клавиш Ctrl + Shift + X
Расширения для Frontend разработки
Emmet
Упрощает процесс написания кода, позволяя с помощью коротких команд формировать большие структуры кода. Плагин уже встроен в VS code, а полный список возможностей можно посмотреть на официальном сайте расширения. Короткий пример позволяющий проиллюстрировать работу Emmet: вам необходимо создать 20 элементов нумерованного списка, вы набираете ol>li*20 и нажимаете Tab или Enter – список из 20 элементов готов.
Live Server
Простое, но полезное расширение, позволяющее отслеживать на странице, без ее перезагрузки, изменения в JavaScript, HTML и CSS. Плагин не является полноценным сервером, но его функционал можно расширить в этом направлении с помощью других дополнений.
ESLint
Утилита для проверки стандарта написания кода на JavaScript. Дополнение относится к программам, называемые линтеры, которые проверяют код на правильность написания и соответствия современным практикам кодирования. После анализа ESLint выделяет ошибки и неточности, которые теперь легко увидеть и исправить.
Auto Rename Tag
Автоматически переименовывает парные теги HTML/XML – таким образом остается поменять только один из двух тегов закрывающий или открывающий.
Bracket Pair Colorizer 2
Расширение раскрашивает код, тем самым позволяя лучше разбираться во вложенности элементов. Код становится более понятным, а риск совершить ошибку уменьшается.
Path Autocomplete
Плагин подсказывает пути к файлам, показывая возможные варианты, что позволяет не искать папки вручную.
Prettier — Code formatter
Позволяет автоматически приводить код в порядок согласно внутренним правилам плагина и индивидуальным настройкам пользователя. Проще говоря – расставит пробелы и переносы, заменит одинарные кавычки на двойные или наоборот и так далее.
CSS Peek
Позволяет смотреть и редактировать стили прямо в html файле. Просто зажимаете Ctrl далее наводите на класс и кликаете. После этих манипуляций появляется всплывающее окно – соответствующий файл CSS, куда и можно вносить изменения.
Debugger for Chrome
Расширения для отладки JavaScript кода. Данный плагин позволяет работать в браузерах на базе Chromium, для Firefox придется установить Debugger for Firefox.
Настраиваем VS Code под себя
Для более комфортной работы над проектами редактор содержит массу пользовательских настроек от возможности увеличить или уменьшить шрифт до включения автоматического сохранения файлов. Попасть в панель можно двумя способами:
- File – Preferences – Settings;
- Ctrl + Shift + p – откроется поисковая строка где вначале вы увидите Preferences: Open User Settings
Рассмотрим некоторые полезные настройки
Auto Save – можно выбрать автоматическое сохранение, не сохранять автоматически, сохранять при смене или потере фокуса.
Font Size – размер шрифта в пикселях.
Line Height – высота строки.
Console: Font Size – размер шрифта для терминала.
Font Family – выбор шрифта.
Tab Size – можно задать количество пробелов в табуляции.
Open Files in New Window – позволяет настраивать создание файлов в новом окне или табе.
Word Wrap – управлением тем, как следует переносить строки – по ширине окна, не переносить и т.д.
Format On Paste – определяет, будет ли редактор автоматически форматировать вставленный код.
Minimap – включить или отключить миникарту.
Confirm Delete – убрать или оставить окно с подтверждением удаления файла.
Format On Save – настройка, отвечающая за автоматическое форматирование кода после сохранения файла. Модуль форматирования должен быть установлен отдельно, например, «Prettier — Code formatter», описанный выше.
Semi – включить / отключить автоматическое добавление ; в конце строи – настройка от «Prettier — Code formatter».
Это далеко не все настройки доступные в VS code и даже пробежаться по всем вскользь будет не так быстро. Для того, чтобы лучше ориентироваться во всем этом многообразии, можно воспользоваться левым меню, которое делит весь список на категории. Настройки чьи дефолтные значения были изменены можно увидеть в формате JSON кликнув на соответствующую иконку.
Горячие клавиши для быстрой работы
В VS Code сразу же после установки доступно большое количество горячих клавиш. Для того, чтобы открыть весь список необходимо нажать Ctrl + K Ctrl + S, также попасть сюда можно через File – Preferences – Keyboard Shortcuts. На этой странице можно не только найти нужную команду, но и поменять комбинацию горячей клавиши на более удобную.
Рассмотрим некоторые популярные хоткеи:
Ctrl + F (⌘ + F) – вызвать поиск
Ctrl + / (⌘/) – закомментировать одну или несколько строк
Shift + Alt + ↓ / ↑ ( ⇧⌥↓ / ⇧⌥↑) – дублирует строку на которой установлен курсор
Ctrl + Shift + (⇧⌘) – перейти к парной скобке
F2 – дает возможность переименовать переменную во всем документе
Shift + Alt + F (⇧⌥F) – отформатировать документ – работает совместно с Prettier — Code formatter или другими подобными расширениями
F12 – перекинет к объявлению переменной даже если это в другом файле
Alt + Z (⌥Z) – включить / выключить перенос слов
Alt + ↑ / ↓ (⌥Option + ↑ / ↓) – меняет местами выделенный участок кода или строку с соседней строкой
Ctrl + D (⌘ + D) – множественной редактирование одинаковых структур кода, каждый раз нажимая команду вы присоединяете к редактированию еще одну похожую структуру
Сниппеты
Сниппеты в VS Code – это шаблоны кода, которые можно разворачивать в документе с помощью краткой команды. Принцип работы схож с выше упомянутым Emmet-ом, только здесь вы создаете заготовки самостоятельно. Функционал может быть не сильно востребованным у новичков, но в процессе повышения уровня сниппеты могут помочь ускорить разработку и сократить количество ошибок.
Для того, чтобы приступить к созданию сниппетов введите в командной панели (Ctrl + Shift + p) snippet и выберите из предложенного Configure User Snippets. После этого выберите язык программирования, в нашем случае ищем JavaScript или New Global (работает со всеми типами файлов). Далее откроется документ, который и будет хранилищем наших шаблонов. Здесь сразу же можно увидеть пример.
«Print to console»:
«Print to console» – название сниппета
«prefix» – команда для активации шаблона
«body» – что будет выводиться
$1 – где будет курсор после создания сниппета
$2 – где будет курсор если нажать Tab
Если вы создадите глобальный файл, тогда еще будет «scope», где прописывается поддерживаемый язык для этого сниппета.