Содержание

подробный гайд по настройке и установке плагинов

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.

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

Установка Visual Studio Code

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

Выполним несколько действий:

  1. Переходим на официальный сайт и загружаем установочный файл.
  2. Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в 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». В отобразившемся списке выберем «Параметры: Цветовая тема».

В результате отобразится список возможных тем – для примера возьмем солнечную тему.

После применения темы интерфейс примет следующий вид:

Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.

Вот так мы можем изменить внешний вид программы. Теперь давайте перейдем к техническим моментам и рассмотрим работу наиболее важных плагинов.

Смотрите также: Лучшие плагины и темы для VS Code

Управление проектами

По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.

Теперь работа с проектами не должна вызывать никаких трудностей.

Автоформатирование кода

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

  1. Возьмем для примера функцию, отступы в которой выстроены случайным образом.
  2. Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
  3. Смотрим на код и видим, что он преобразился и принял аккуратный вид.

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

Автодополнение

В популярных программах, подобных 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 больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!

Как настроить Visual Studio Code для C, C++, Java, Python | by Рудольф Коршун | NOP::Nuances of Programming

Давайте приступим!

Скачайте последнюю версию Visual Studio Code с официального сайта. Рекомендуется загрузить системный установщик (System Installer), но если у вас нет прав администратора, то пользовательский установщик (User Installer) тоже подойдет. Выполните все обычные шаги по установке и обязательно проставьте все следующие чекбоксы:

Если у вас уже установлен VS Code, но вы все равно хотите начать с чистого листа, следуйте этим инструкциям, чтобы полностью удалить VS Code.

Ниже приведен список расширений, которые нам понадобятся для правильной настройки VS Code. Откройте VS Code и перейдите на панель расширений (Ctrl + Shift + X), которая находится на левой панели инструментов, и начните загружать друг за другом следующие расширения:

  1. C / C++ от Microsoft[Важно] Для корректной работы этого расширения нам понадобится установленный и добавленный в PATH компилятор MinGW. Если у вас его нет, следуйте этому руководству.
  2. C++ Intellisense от austin.
  3. Python от Microsoft — вам нужно будет настроить Python для работы этого расширения. Загрузите и установите последнюю версию отсюда.
  4. Java Extension Pack от Microsoft — [Важно] Перед установкой убедитесь, что в вашей системе настроены Java 8 JDK и JRE и указаны все необходимые переменные среды для Java. Если нет, посмотрите это видео о том, как настроить Java на вашем компьютере.
  5. Code Runner от Jun Han — мы будем использовать это расширение для запуска всех наших программ. Для этого необходимо выполнить некоторые шаги по настройке. Мы увидим эти шаги в следующих разделах.

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

  • (Необязательно) Material Theme от Mattia Astronio — это расширение содержит множество приятных глазу тем. Вы можете выбрать любую, какая понравится. Лично я предпочитаю Monokai, которая доступна в VS Code по умолчанию, без каких-либо расширений.

Чтобы выбрать тему, нажмите Ctrl + Shift + P. Откроется палитра команд. Осуществите поиск по слову “theme” и выберите опцию Color Theme. Чтобы настроить иконки, можете выбрать опцию File Icon Theme.

Visual Studio Code: мощное руководство пользователя

Эта статья написана для начинающих пользователей, которые могут впервые использовать Visual Studio Code. VS Code, как известно, считается «легковесным» редактором кода.  По сравнению с редакторами с полной интегрированной средой разработки (IDE), которые занимают гигабайты дискового пространства, VS Code использует менее 200 МБ при установке.

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

Предпосылки

Чтобы следовать этому руководству, вы должны владеть хотя бы одним языком программирования и фреймворком.  Вы также должны быть знакомы с системой контроля версией git. Вам также необходимо иметь учетную запись на платформе удаленного хранилища, такой как GitHub. Я рекомендую вам настроить SSH Keys для подключения к вашему удаленному репозиторию.

Мы будем использовать минимальный проект Next.js для демонстрации возможностей VS Code. Если вы новичок в этом, не беспокойтесь, так как фреймворк и используемый язык не являются предметом данного руководства. Преподаваемые здесь навыки можно перенести на любой язык и фреймворк, с которыми вы работаете.

Немного истории

Если вы новичок в программировании, я рекомендую вам начать с простого текстового редактора, такого как Windows NotePad.  Это самый простой текстовый редактор, который не предлагает никакой помощи. Основным преимуществом его использования является то, что он заставляет вас запоминать синтаксис языка и делать свои собственные отступы. Как только вы освоитесь с написанием кода, следующим логическим шагом будет обновление до более качественного текстового редактора, такого как NotePad++ . Он предлагает немного важной помощи при кодировании с такими функциями, как раскраска синтаксиса, автоматическое отступление и базовое автозаполнение. При обучении программированию важно не перегружаться информацией и помощью.

Как только вы привыкли к лучшему опыту написания кода, пришло время обновиться. Не так давно это были полностью интегрированные среды разработки:

  1. Visual Studio IDE
  2. NetBeans
  3. Eclipse
  4. IntelliJ IDEA

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

Вскоре появился новый набор независимых от платформы редакторов кода. Они были легкими и обеспечивали множество функций, которые были в основном эксклюзивными для IDE. Я перечислил их ниже в порядке их выпуска:

  1. Sublime Text: июль 2013
  2. Atom.io: июнь 2015
  3. Visual Studio Code: апрель 2016

Разработчики Mac имели доступ к TextMate, который был выпущен в октябре 2004 года. Система фрагментов кода, используемая всеми вышеперечисленными редакторами, была основана на TextMate. Воспользовавшись всеми из них, я почувствовал, что появившийся после этого редактор значительно улучшил текущий. Согласно опросу разработчиков, проведенному Stack OverFlow в 2019 году, Visual Studio Code является самой популярной средой разработки кода с 50,7% использования. Visual Studio IDE занимает второе место, а NotePad++ — третье.

Достаточно истории и статистики на данный момент. Давайте углубимся в то, как использовать функции кода Visual Studio.

Настройка и обновления

Установщик пакета кода Visual Studio занимает менее 100 МБ и потребляет менее 200 МБ при полной установке.  Когда вы посещаете страницу загрузки, ваша ОС будет автоматически обнаружена, и будет выделена правильная ссылка для загрузки.

Обновление VS Code очень просто. Он отображает уведомление при каждом выпуске обновления. Пользователям Windows необходимо щелкнуть уведомление, чтобы загрузить и установить последнюю версию. Процесс загрузки происходит в фоновом режиме, пока вы работаете. Когда он будет готов к установке, появится запрос на перезагрузку. Нажав на это, вы установите обновление и перезапустите VS Code.

Для дистрибутивов на основе Ubuntu, нажав на уведомление об обновлении, вы просто откроете веб-сайт, на котором вы сможете загрузить последнюю версию установщика. Гораздо проще — просто выполните sudo apt update && sudo apt upgrade -y.  Это обновит все установленные пакеты Linux, включая Visual Studio Code. Причина этого заключается в том, что VS Code добавил репо в реестр репозитория при первоначальной установке. Вы можете найти информацию о репо по этому пути: /etc/apt/sources.list.d/vscode.list.

Пользовательский интерфейс

Давайте сначала познакомимся с пользовательским интерфейсом:

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

  1. Activity Bar: позволяет переключаться между представлениями: проводник, поиск, контроль версий, отладка и расширения.
  2. Side Bar: содержит активный вид.
  3. Editor: здесь вы можете редактировать файлы и просматривать файлы уценки. Вы можете расположить несколько открытых файлов рядом.
  4. Panel: отображает различные панели: встроенный терминал, панели вывода для отладочной информации, ошибок и предупреждений.
  5. Status: отображает информацию о текущем открытом проекте и файле. Также содержит кнопки для выполнения действий по управлению версиями, а также для включения / отключения функций расширения.

Также есть верхняя строка меню, где вы можете получить доступ к системе меню редактора. Для пользователей Linux встроенным терминалом по умолчанию, вероятно, будет оболочка Bash. Для пользователей Windows это PowerShell. К счастью, внутри выпадающего списка терминала находится селектор оболочки, который позволит вам выбрать другую оболочку. Если установлено, вы можете выбрать любой из следующих:

  1. Command Prompt
  2. PowerShell
  3. PowerShell Core
  4. Git Bash
  5. WSL Bash

Работа с проектами

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

/home/{username}/Projects/{company-name}/{repo-provider}/{project-name}

Папка Projects, что я имею в виду, как в рабочей области. Как внештатный автор и разработчик, я разделяю проекты на основе того, в какой компании я работаю, и какой репо я использую. Для личных проектов я храню их под своим вымышленным «названием компании». Для проектов, с которыми я экспериментирую в учебных целях и которые я не собираюсь долго хранить, я просто буду использовать имя, например play или tuts в качестве замены {repo-provider}.

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

$ mkdir vscode-demo
$ cd vscode-demo
# Launch Visual Studio Code
$ code .

Вы также можете сделать это в проводнике. При доступе к контекстному меню мыши вы сможете открыть любую папку в VS Code.

Если вы хотите создать новый проект, связанный с удаленным репо, проще создать его на сайте — например, GitHub или BitBucket.

Обратите внимание на все поля, которые были заполнены и выбраны. Далее перейдите в терминал и выполните следующее:

# Navigate to workspace/company/repo folder
$ cd Projects/sitepoint/github/

# Clone the project to your machine
$ git clone [email protected]:{insert-username-here}/vscode-nextjs-demo.git

# Open project in VS Code
$ cd vscode-nextjs-demo
$ code .

Как только редактор будет запущен, вы можете запустить встроенный терминал с помощью сочетания клавиш Ctrl+~ (тильда). Используйте следующие команды для генерации package.json и установки пакетов:

# Generate `package.json` file with default settings
$ npm init -y

# Install package dependencies
$ npm install next react react-dom

Затем откройте package.json и замените раздел scripts следующим:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Окно кода Visual Studio должно выглядеть следующим образом:

Прежде чем мы рассмотрим следующий раздел, я хотел бы упомянуть, что VS Code также поддерживает концепцию многокорневых рабочих пространств.  Если вы работаете со связанными проектами — front-end, back-end, docs и т.д. — вы можете управлять ими в одном рабочем пространстве в одном редакторе. Это облегчит синхронизацию вашего исходного кода и документации.

Контроль версий с помощью Git

Visual Studio Code поставляется со встроенным менеджером контроля версий Git. Он предоставляет пользовательский интерфейс, где вы можете комментировать, фиксировать, создавать новые ветви и переключаться на существующие. Давайте передадим изменения, которые мы только что сделали в нашем проекте. На панели действий откройте панель управления источником и найдите кнопку «Stage All Changes plus», как показано ниже.

Нажмите здесь.  Затем введите сообщение фиксации «Installed next.js dependencies», а затем нажмите кнопку Commit в верхней части. Имеет значок галочки. Это передаст новые изменения. Если вы посмотрите на статус, расположенный внизу, вы увидите различные значки статуса в левом углу. 0 ↓ означает, что из удаленного репозитория нечего вытаскивать. 1 ↑ означает, что у вас есть один коммит, который вам нужно отправить на удаленное репо. При нажатии на него отобразится подсказка о действии. Нажмите OK для pull и push. Это должно синхронизировать ваше локальное репо с удаленным репо.

Чтобы создать новую ветку или переключиться на существующую ветку, просто нажмите на название ветки master в строке состояния в левом нижнем углу. Это выведет филиальную панель для вас, чтобы принять меры.

Проверьте следующие расширения для еще лучшего опыта работы с Git:

  1. Git Lens
  2. Git History

Поддержка другого типа SCM, такого как SVN, может быть добавлена ​​путем установки соответствующего расширения SCM с рынка.

Создание и запуск кода

На панели действий вернитесь к панели обозревателя и с помощью кнопки «New Folder» создайте папку pages в корне проекта. Выберите эту папку и используйте кнопку New File, чтобы создать файл pages/index.js. Скопируйте следующий код:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage;

На панели Explorer вы должны увидеть раздел «NPM Scripts» .  Разверните это и наведите курсор мыши dev. Кнопку run (значок воспроизведение) появится рядом с ним. Нажмите на него, и он запустит сервер Dev.js внутри встроенного терминала.

Это должно занять несколько секунд. Используйте Ctrl + Click на URL http://localhost:3000, чтобы открыть его в браузере. Страница должна успешно открыться с сообщением «Welcome to Next.js!». В следующем разделе мы рассмотрим, как мы можем изменить настройки Visual Studio Code.

Настройки пользователя и рабочей области

Чтобы получить доступ к настройкам параметров VS Code, используйте сочетание клавиш Ctrl+,.  Вы также можете получить к нему доступ через команду меню следующим образом:

  1. В Windows / Linux — File > Preferences > Settings
  2. В macOS — Code > Preferences > Settings

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

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

Параметры кода Visual Studio подразделяются на две разные области:

  1. Настройки пользователя: настройки хранятся под учетной записью пользователя. Они будут действовать на все проекты, над которыми вы работаете.
  2. Рабочая область: настройки хранятся в папке проекта или рабочей области. Они будут применяться только в этом конкретном проекте.

В зависимости от вашей платформы вы можете найти пользовательские настройки VS Code в следующих местах:

  1. Windows: %APPDATA%\Code\User\settings. json
  2. macOS: $HOME/Library/Application Support/Code/User/settings.json
  3. Linux: $HOME/.config/Code/User/settings.json

Для Workspace просто создайте папку .vscode в корне вашего проекта. Затем создайте файл settings.json внутри этой папки. Если вы работаете с панелью редактора настроек, она сделает это автоматически, когда вы измените настройки в области рабочего пространства. Вот подмножество глобальных настроек, с которыми я предпочитаю работать:

{
  "editor.minimap.enabled": false,
  "window.openFoldersInNewWindow": "on",
  "diffEditor.ignoreTrimWhitespace": false,
  "files.trimTrailingWhitespace": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "workbench. editor.enablePreview": false,
  "workbench.list.openMode": "doubleClick",
  "window.openFilesInNewWindow": "default",
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettierVS Code",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "explorer.confirmDelete": false
}

Я склонен работать с несколькими проектами одновременно, поэтому настройка window.openFoldersInNewWindow позволяет открывать новые папки проектов, не закрывая (не заменяя) активную. Для editor.defaultFormatter, я поставил Prettier, который является расширением. Далее давайте посмотрим на языковые ассоциации.

Ассоциация языков

Я делаю много проектов с использованием React.  В последнее время большинство сред React генерируют компоненты .jsx, а не используют расширение .js. В результате форматирование и раскраска синтаксиса становится проблемой, когда вы начинаете писать код JSX. Чтобы это исправить, вам нужно связать .js файлы с JavaScriptReact. Вы можете легко сделать это, изменив языковой режим с помощью Ctrl + Shift + P в командной строке. Вы также можете обновить settings.json, добавив эту конфигурацию:

{
  "files.associations": {
    "*.js": "javascriptreact"
  }
}

В следующий раз, когда вы откроете файл JS, он будет рассматриваться как файл React JSX. Я указал это в своих глобальных настройках, так как я часто работаю с проектами React.  К сожалению, это нарушает встроенную функцию под названием Emmet. Это популярный плагин, который помогает разработчикам автоматически заполнять HTML и CSS код очень интуитивно понятным способом. Вы можете исправить эту проблему, добавив следующую конфигурацию в settings.json:

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

В следующий раз, когда у вас возникнут проблемы с активацией Emmet для определенного расширения файла или языка, проверьте, можно ли решить эту проблему, добавив языковую ассоциацию в emmet.includeLanguages. Для получения дополнительной информации ознакомьтесь с официальной документацией для VS Code Emmet .

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

До сих пор мы рассмотрели два сочетания клавиш:

  1. Ctrl + ,: Открыть настройки
  2. Ctrl + Shift + P: Открыть командную строку

Command Palette обеспечивает доступ ко всем функциям Visual Studio Code, включая сочетание клавиш для общих операций. Если вы устанавливаете расширение, любые действия, инициируемые вручную, будут перечислены здесь. Однако для таких расширений, как Prettier и Beautify, они будут использовать одну и ту же команду Format. Visual Studio Code также имеет свой собственный встроенный модуль форматирования.  Чтобы указать, какой плагин должен выполнять действие, вам нужно перейти в редактор настроек и изменить конфигурацию стандартного форматера. Вот пример того, как я установил это в моем случае:

{
  "editor.defaultFormatter": "esbenp.prettierVS Code"
}

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

  1. Ctrl + P позволит вам перейти к любому файлу или символу, набрав его имя
  2. Ctrl + Tab проведет вас по последнему набору открытых файлов
  3. Ctrl + Shift + O позволит вам перейти к определенному символу в файле
  4. Ctrl + G позволит вам перейти к определенной строке в файле

Вот мои любимые команды, которые я часто использую при написании кода:

  1. Ctrl + D: нажмите несколько раз, чтобы выбрать одинаковые ключевые слова.  Когда вы начинаете печатать, он переименовывает все выбранные ключевые слова
  2. Ctrl + Shift + Up/Down: Добавить курсор выше или ниже, чтобы редактировать несколько строк одновременно
  3. Alt + Shift + Click: Добавить курсор в нескольких местах для одновременного редактирования в разных разделах кода
  4. Ctrl + J: Добавить 2 или более строк в одну.
  5. Ctrl + F: Поиск ключевого слова в текущем файле
  6. Ctrl + H: Поиск и замена в текущем файле
  7. Ctrl + Shift + F: Поиск по всем файлам

Если вы зайдете в меню параметров, вы найдете горячие клавиши для большинства команд. Лично я никогда не привык к некоторым сочетаниям клавиш по умолчанию, которые поставляются с Visual Studio Code из-за использования таких редакторов, как Atom, в течение длительного времени.  Решением, которое я нашел, было просто установить Atom Keymap. Это позволяет мне использовать сочетание клавиш Ctrl + \ для переключения боковой панели. Если вы хотите отредактировать привязки клавиатуры самостоятельно, просто перейдите в меню File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts в macOS).

Возможности редактора кода

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

Intellisense

Это популярная функция, также известная как «автозавершение кода» или автозаполнение. VS Code «из коробки» предоставляет Intellisense для:

  1. JavaScript, TypeScript
  2. HTML
  3. CSS, SCSS и Less

При вводе кода появится всплывающее окно со списком возможных вариантов. Чем больше вы печатаете, тем короче список. Вы можете нажать Enter или, Tab когда нужное ключевое слово будет выделено, для автозаполнения кода. Нажатие Esc удалит всплывающее окно. Вставка . в конце ключевого слова или нажатие Ctrl + Space приведет к появлению всплывающего окна IntelliSense.

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

Снипеты

Ввод повторяющегося кода, такого как операторы if, циклы for и объявление компонентов, может быть немного утомительным. Вы можете копировать и вставлять код, чтобы работать быстрее. К счастью, Visual Studio Code предлагает функцию Snippets, которая называется просто шаблонами кода.  Например, вместо ввода console.log просто введите log, и IntelliSense предложит вам вставить фрагмент.

Есть много фрагментов, к которым вы можете получить доступ, если вы запомнили сокращение или ключевое слово, которое вызывает вставку фрагмента. Поскольку вы новичок в этом, вы можете получить доступ к списку всех фрагментов, доступных через Command Palette > Insert Snippets:

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

Форматирование

Часто при наборе или вставке кода из разных источников мы склонны смешивать стили кодирования. Например:

  1. отступ с пробелом против табов
  2. точка с запятой
  3. двойные кавычки или одинарные кавычки

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

  1. JavaScript
  2. TypeScript
  3. JSON
  4. HTML

Вы можете настроить форматирование кода Visual Studio, изменив следующие параметры на true или false:

  1. editor.formatOnType: отформатировать строку после ввода
  2. editor.formatOnSave: отформатировать файл при сохранении
  3. editor.formatOnPaste: форматировать вставленный контент

Однако встроенные средства форматирования могут не соответствовать вашему стилю кодирования.  Если вы работаете с такими фреймворками, как React, Vue или Angular, вы обнаружите, что встроенные средства форматирования имеют тенденцию портить ваш код. Вы можете исправить это, отключив форматирование для определенного языка:

"html.format.enable": false

Тем не менее, лучшее решение — установить расширение для форматирования. Мой любимый — Prettier, поскольку он поддерживает огромное количество языков, включая:

  1. Flow · JSX · JSON
  2. CSS · SCSS · Less
  3. Vue · Angular
  4. GraphQL · Markdown · YAML

После установки вам нужно установить его как форматировщик по умолчанию:

{
  "editor. defaultFormatter": "esbenp.prettierVS Code",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettierVS Code"
  }
}

Также рекомендуется установить пакет prettier локально как зависимость dev:

npm install prettier -D --save-exact

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

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

Linting

Lint или ЛИНТЕР является инструментом, который анализирует код и проверяет на наличие синтаксических ошибок, проблем стилизации, вызовы на необъявленных переменных, использование устаревших функций, неправильного охвата и многие другие вопросы. Visual Studio Code не поставляется вместе с Linter. Тем не менее, это облегчает настройку для используемого вами языка программирования. Например, если вы работаете над новым проектом Python, вы получите приглашение установить его для вас. Вы также можете открыть панель команд (Ctrl+ Shift+ P) и выбрать команду Python: Select Linter.

Для JavaScript вам нужно установить расширение, такое как ESLint, которое является самым популярным. Это расширение требует, чтобы вы установили ESLint как dev-зависимость. Вам также может понадобиться один или несколько плагинов ESLint, которые помогут вам подобрать стиль и структуру кодирования, которые вы используете.

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

Отладка

Если вы используете операторы print для отладки, вы должны прекратить это делать, поскольку есть лучший способ отладки вашего кода. С VS Code вы можете устанавливать точки останова и проверять переменные во время работы вашего кода.

Как пользоваться Visual Studio Code

Visual Studio Code — это среда разработки от компании Microsoft, созданная совсем недавно с использованием новых технологий (например Node.js). В отличие от полного пакета Visual Studio, эта среда представляет собой текстовый редактор с возможностью подключения огромного количества плагинов. Она предназначена для разработки на различных языках программирования и для разных платформ. Поддерживаются не только Windows, но и Linux, а также MacOS.

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

Содержание статьи:

Как пользоваться Visual Studio Code

В отличие от предыдущих статей на эту тему, я не буду рассказывать про установку. Об этом есть полноценная статья, поэтому посмотрите там. Программа без труда ставится с официального сайта или из snap-пакета в любом дистрибутиве, основанном на Debian или RedHat. Первым делом остановимся на интерфейсе программы. Причём будет рассмотрена именно работа Visual Studio Code для начинающих. Если вы уже опытный разработчик, вряд-ли вы найдёте для себя что-то новое.

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

Интерфейс программы типичен для многих редакторов кода. Но есть и свои особенности. Условно главное окно программы можно разделить на семь частей:

Именно этими участками вы будете пользоваться во время работы с VS Code:

  1. Главное меню программы — можно использовать для доступа к настройкам, открытия проектов и папок и многого другого;
  2. Левая панель — эта панель есть только в VS Code, она позволяет переключаться между просмотром дерева каталогов, поиском, отладкой и окном установки дополнений. Сюда же некоторые расширения добавляют свои меню, например Docker, Git и расширение для управления проектами.
  3. Проводник — по умолчанию здесь отображается дерево каталогов, но тут же вы обнаружите настройки отладки или доступные для установки расширения, если выбран соответствующий пункт на боковой панели.
  4. Рабочая область — здесь выполняется редактирование файла.
  5. Мини карта — позволяет быстро ориентироваться по открытому исходнику.
  6. Нижняя панель — здесь отображается вывод программы при выполнении, консоль самой Visual Code, а также здесь есть встроенный терминал.
  7. Статус бар — отображается общая информация о состоянии программы.

2. Русификация Visual Studio Code

По умолчанию среда устанавливается на английском языке. Лучше так всё и оставить: большинство информации по программированию в интернете на английском языке, и, если вы привыкните к такому формату, вам будет проще во всём этом ориентироваться. Но если вас интересует, как русифицировать Visual Studio Code, то делается это очень просто. На боковой панели кликните по значку с квадратиками, который отвечает за установку дополнений, и наберите в поле поиска vscode-language-pack-ru; утилита найдёт только один пакет, нажмите Install, чтобы установить его:

Для выбора языка нажмите Ctrl+Shift+P и начните набирать Config, в предложенном списке выберите Configure Display Language:

Затем выберите ru и перезапустите программу. Всё. После этого интерфейс программы станет русским.

3. Внешний вид

Одна из важных вещей для среды разработки — её внешний вид и тема оформления. Чтобы изменить тему оформления, надо нажать сочетание Ctrl+Shift+P и набрать Theme. Затем в меню надо выбрать Color Theme:

Затем в открывшемся меню осталось выбрать нужную тему стрелками и нажать Enter. По умолчанию доступно несколько тёмных и светлых тем:

Скачать новые темы можно с официального сайта Visual Studio Code. Здесь же можно настроить тему иконок.

4. Управление проектами

Очень часто бывает, что приходится переключаться между несколькими проектами во время работы. По умолчанию в VS Code для этого надо открывать рабочую папку проекта через меню. Но есть выход. Это расширение Project Manager. С его помощью вы можете сохранять проекты и переключаться между ними в один клик. Установите Project Manager как было описано выше, затем кликните на боковой панели по значку с папкой.

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

После этого вы сможете очень просто управлять своими проектами.

5. Авто-форматирование кода

Один из самых важных моментов в работе с кодом — это его однообразие. Приводить код к одному виду вручную не всегда удобно — для этого и были придуманы различные расширения. Это PHP-CS-Fixer для PHP и Prettier для JS/HTML/CSS. Установите их через меню установки дополнений, а затем используйте сочетание клавиш Ctrl+Shift+F в Windows или Ctrl+Shift+I в Linux, для того чтобы выполнять выравнивание кода Visual Studio Code.

6. Автодополнение

Очень сильно помогает в разработке автоматическое дополнение кода. Вы пишите начало слова, а среда сама вам подсказывает, чем его можно завершить. Пакеты, которые позволяют выполнять автодополнение, называются *-intellisense. Рекомендуется установить PHP IntellisenseCSS Intellisense и Path Intellisense для автодополнения путей к файлам. Для разных фреймворков существуют свои расширения автоматического дополнения кода, например, для Laravel есть Laravel Extra Intellisense. Подсветка синтаксиса обычно уже встроена в VS Code для многих языков, однако если её нет, тоже ищите расширение.

7. Управление Vim

Я привык к редактору Vim и хочу использовать его стиль везде, даже в Visual Studio Code. Если вы тоже хотите, для нас с вами есть расширение Vim, которое переносит все сочетания клавиш и режимы работы Vim в редактор Visual Studio. После его установки вы сможете перемещаться по файлу кнопками h, j, k, l, использовать Esc и сохранять файл командой :w.

8. Отладка кода

В Visual Code есть интерфейс, с помощью которого выполняется отладка кода, но прежде, чем вы его сможете использовать для PHP, его придётся настроить. Для отладки кода на PHP используется отладчик Xdebug, поэтому необходимо установить дополнение PHP Debug. Далее кликните по треугольнику со значком жука на боковой панели. Если вы раньше ничего не отлаживали в этом проекте, то программа предложит вам создать файл launch.json. Кликните по этой ссылке. В открывшемся списке выберите PHP:

В полученном файле надо обратить внимание только на поле port. Он должен быть такой же, как и значение переменной xdebug.remote_port в php.ini. У меня это 9008. Сохраните изменения и нажмите зелёный треугольник для начала отладки.

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

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

Затем Xdebug подключается к VS Code по выбранному нами порту и передаёт туда всю необходимую информацию. Только после этого вы сможете смотреть переменные и выполнять код пошагово:

9. Терминал

В завершении поговорим о чём-то более простом. Одно из преимуществ VS Code перед другими редакторами — это встроенный терминал, который позволяет выполнять команды в системной оболочке Linux или в выбранной оболочке Windows. Если терминал ещё не открыт, вы можете сделать это с помощью Ctrl+Shift+P или из меню Терминал -> Создать терминал:

10. Использование Git

Ещё одна очень полезная возможность в Visual Studio Code — это интеграция с Git. Она работает по умолчанию, и вам даже не надо ничего дополнительно устанавливать. Достаточно только, чтобы в директории с проектом уже был инициализирован Git-репозиторий. Все новые или изменённые файлы будут подсвечены в проводнике.

Кроме того, вы можете делать фиксацию изменений (коммиты) и отправлять изменения на сервер прямо в графическом интерфейсе. Сначала надо добавить файлы в коммит: кликните по значку разветвления на боковой панели. Здесь отображаются все изменённые файлы. Нажмите + напротив файлов, которые надо добавить:

Для того чтобы зафиксировать изменения, наберите пояснение к комиту в текстовой строке, затем нажмите Ctrl+Enter или галочку над текстовым полем:

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

Выводы

В этой статье мы рассмотрели, как работать в Visual Studio Code для программирования на PHP и других языках программирования, предназначенных для веб-разработки. Как видите, эта среда намного лучше подготовлена по умолчанию, чем тот же Atom и то, что приходится настраивать там, здесь уже есть «из коробки». А какой средой разработки пользуетесь вы? Напишите в комментариях!

Visual Studio Code для Arduino: руководство по использованию

Разбираемся как можно использовать расширение Arduino в Visual Studio Code для создания программ для плат Ардуино.

В первой части наших публикаций про Visual Studio Code и Ардуино мы разобрали как настраивать VS для работы с Ардуино. Это вторая часть, посвященная непосредственно настройке программного обеспечения Microsoft Visual Studio (VS или VS Code). Если у вас еще не установлен VS Code, перейдите к статье о настройке VS Code, а ниже мы рассмотрим разработку с использованием расширения Arduino от Microsoft.

К этому моменту у вас уже должна быть установлена IDE VS Code. Напоминаем, что VS Code требует, чтобы была установлена стандартная Arduino IDE, так как она использует некоторые библиотеки, включенные в IDE.

Установка расширения Arduino

Чтобы установить расширение Arduino, нажмите Ctrl+Shift+x для отображения средств просмотра расширений и введите «vscode-arduino» в строку поиска. Это должно вернуть только один результат в поиске. Нажмите кнопку «Установить» (Install) для начала установки.

После установки расширения подключите плату Arduino Uno к USB-порту вашего компьютера и перезапустите VS Code — это гарантирует, что все установлено правильно.

Палитра команд

Не все функции VS Code доступны через меню. Вместо этого VS Code имеет средство типа командной строки для взаимодействия с расширениями, называемыми командной палитрой.

Чтобы запустить палитру команд, введите Ctrl+Shift+p, чтобы отобразить раскрывающийся список, в котором можно вводить команды. Введите «Примеры Arduino» (англ. — Arduino Examples) в палитре команд и нажмите Enter. Откроется ссылка на знакомые примеры проектов — перейдите к «01.Basics», а затем дважды щелкните «Blink», чтобы открыть многим известный проект Blink.

При выполнении команд Arduino, подобных приведенным выше, вы можете встретить сообщение брандмауэра, подобное показанному ниже. Выберите «Разрешить доступ» и продолжите.

Системные настройки Arduino

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

После открытия файла Arduino с расширением .ino VS Code перенастраивается в режиме Arduino и предоставляет доступ к специальным функциям в нижнем поле (синего цвета), как показано на рисунке ниже.

Нажмите <Select Programmer> и выберите AVR ISP (Arduino AVR Board).

Нажмите на <Select Board Type> и выберите Arduino/Genuino Uno.

Чтобы установить последовательный порт, который VS Code будет связывать с вашим Arduino Uno, нам нужно открыть палитру команд (Cntrl+Shift+p) и затем набрать «Arduino Select Serial Port». Затем вы должны выбрать к какому USB-порту подключен ваш Uno.

Вы можете получить доступ к последовательному монитору, нажав на символ «штекера/вилки» на синем поле внизу окна.

Это расширение включает в себя менеджер пакетов, который делает установку внешних пакетов довольно простой. Откройте палитру команд и введите «Диспетчер пакетов Arduino» (англ. — Arduino package manager). Должна появиться новая вкладка со множеством пакетов, которые можно установить, просто нажав кнопку.

Проверка и загрузка кода

Код VS в режиме Arduino предоставляет несколько удобных иконок по которым вы можете кликать для подтверждения кода и загрузки на подключенную плату Arduino. Они доступны в верхнем правом углу. Любая операция приведет к тому, что в нижней части Visual Studio Code появится окно консоли, информирующее вас о результате.

IntelliSence и проверка ошибок

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

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

Ошибки в программном обеспечении всегда являются частью программирования. VS Code постоянно проверяет ваш код, когда вы пишете. Если он обнаруживает ошибку, он подчеркивает ее красной волнистой линией и дает рекомендации. IDE также ведет учет количества текущих ошибок в вашем проекте в левом нижнем углу VS Code. Нажав на иконку, вы получите сводку ошибок из вашего коде. Двойной щелчок на «уведомлении об ошибке» переместит вас к ошибке в вашем коде.

Visual Studio Code — Тестер

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

Механизм интеграции Тестера с vscode основан на способности Тестера выгружать сценарии в файлы их обратной загрузки в базу тестов. Специальный плагин и внешняя компонента позволяют общаться Тестеру с vscode для маршрутизации команд между двумя приложениями. Операции выгрузки и загрузки происходят как в ручном так и автоматическом режиме.

Для работы в интегрированном режиме, оба приложения (Тестер и vscode) должны быть запущены.

Подготовка Тестера

Внимание

Данный раздел справки для версии 1.3.5 не актуален и находится в процессе доработки

Для того, чтобы начать взаимодействовать с vscode, необходимо смонтировать приложение(я) Тестера в папки на диске:

Затем, необходимо создать запись для монтируемых приложений, например так:

Внимание! Флаг Маппинг должен быть включен, иначе Тестер не сможет общаться с vscode в автоматическом режиме.

Если вы монтируете более одного приложения, рекомендуется указывать для них общий начальный путь к папке на диске. Например, на картинке выше, приложение ERP2 и <Общее> имеют общий начальный путь c:\tests\. Такая структура (общий начальный путь) позволяет плагину vscode редактировать и осуществлять переходы к связанным сценариям сразу для всех смонтированных приложений с общей начальной папкой. В противном случае, переходы к связанным сценариям, например, при нажатии F12 на параметре метода Вызвать ( “Общее.Найти” ), будут затруднены.

Итак, после задания монтируемых приложений, нужно выгрузить все сценарии согласно указанных директорий:

Откроется обработка выгрузки сценариев, где необходимо проделать следующее:

Внимание! Если у вас в списке (что на картинке выше) отсутствуют приложения, которые вы монтировали в репозиториях, тогда возможно, по каким-то причинам Тестеру не удалось создать узлы обмена сценариями. В этом случае, необходимо через меню Все функции, открыть план обмена Изменения, и создать в нем необходимый узел, пример на картинке ниже:

На этом этапе, подготовительная работа в Тестере завершена.

Подготовка Visual Studio Code

Необходимо скачать и установить vscode. Страница для скачивания: https://code.visualstudio.com/

Внимание! если вы скачали 32-битную версию или установили vscode в директорию, отличную от C:\Program Files\Microsoft VS Code, тогда укажите в Тестере, в форме настройки компьютера, путь к запускаемому файлу vscode, как показано на рисунках ниже

Работа в vscode

На данном этапе все настройки завершены, теперь можно редактировать и запускать сценарии из vscode.

На примере демо-базы это будет выглядеть так:

После этого, запустится vscode и предложит вам установить плагин, как показано на картинке ниже:

Нажмите на указанную кнопку и установите предлагаемый плагин:

После того, как расширение Tester 1C будет установлено (вместе с ним, будет установлено расширение xDrivenDevelopment.language-1c-bsl от специалистов команды xDrivenDevelopment, за что им отдельная благодарность), необходимо перезагрузить редактор:

На этом настройка завершена, можно начинать работу.

На момент написания статьи, плагин vscode поддерживает следующие операции:

  1. Интеллисенс всех функций тестера на двух языках (справка пока только на русском). Навигация к сценариям, заданным в методах Вызвать () и Позвать ().
  2. Считывание полей тестируемого приложения в процесса набора параметра функции с фильтрацией по типу. Примечание: тестируемое приложение при этом должно быть запущено
  3. Запуск теста, кнопка F5
  4. Запуск выделенного фрагмента кода, комбинация ctrl+alt+R
  5. Синтаксический контроль, комбинация ctrl+F7
  6. Вывод диагностических сообщений в панель Output (см. метод ВСтудию()/VStudio())
  7. Вывод сообщений об ошибках в панель Problems
  8. Назначение основного сценария (кнопка F1 / Set Main)
  9. Сниппеты. При наборе тест плагин выдаст все допустимые методы Тестера

Другие полезные комбинации клавиш:

ctrl + E. Открывает окно нечеткого поиска сценария для его открытия в новой вкладке.

ctrl + shift + E. Активация дерева файлов проекта.

alt + F12. Открытие в сплывающем окне модуля процедуры, функции или сценария. Удобно использовать для беглого просмотра когда связанного сценария.

ctrl + shift + O. Быстрый переход к процедуре/функции кода сценария.

ctrl + shift + F, ctrl + shift + H. Глобальный поиск и глобальная замена. Важной способностью этих функций является возможность указания начальной папки (поле чувствительно к регистру) поиска/замены.

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

Полезные приемы работы

Среда vscode обладает обширным функционалом по работе с файлами и текстами модулей. Например: поиск и замена во всех файлах по регулярным выражениям, сравнение файлов, настройка команд и комбинаций клавиш, настройка шаблонов, закладок и многое другое. Стоит инвестировать некоторое время на изучение и настройку среды с целью получения выигрыша во времени от использования продвинутого редактора модулей.

Иконки «Visual studio code» — скачивайте бесплатно в PNG, SVG, GIF

Visual Studio Code Insides

+ В коллекцию

Visual Studio Code Insides

+ В коллекцию

Visual Studio Code Insides

+ В коллекцию

Visual Studio Code Insides

+ В коллекцию

Код Visual Studio

+ В коллекцию

Код Visual Studio

+ В коллекцию

Код Visual Studio

+ В коллекцию

Visual Studio

+ В коллекцию

Visual Studio

+ В коллекцию

Visual Studio

+ В коллекцию

Visual Studio Logo

+ В коллекцию

Visual Studio Logo

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

OBS Studio

+ В коллекцию

Autodesk Dynamo Studio

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Google Code

+ В коллекцию

Visual Studio Code 2019

+ В коллекцию

Visual Studio Code 2019

+ В коллекцию

Visual Studio Code 2019

+ В коллекцию

Visual Studio Code 2019

+ В коллекцию

Visual Studio Code 2019

+ В коллекцию

Visual Studio Code 2019

+ В коллекцию

Visual Studio Code 2019

+ В коллекцию

YouTube Studio

+ В коллекцию

YouTube Studio

+ В коллекцию

YouTube Studio

+ В коллекцию

FL Studio

+ В коллекцию

FL Studio

+ В коллекцию

FL Studio

+ В коллекцию

FL Studio

+ В коллекцию

Visual Basic

+ В коллекцию

Visual Basic

+ В коллекцию

Visual Basic

+ В коллекцию

Visual Basic

+ В коллекцию

Расширения для семейства продуктов Visual Studio

перейти к содержанию

Visual Studio

| Торговая площадка

Войти
  • Свяжитесь с нами
  • Вакансии
  • Конфиденциальность
  • Условия эксплуатации
  • Товарные знаки

© Microsoft, 2021 г.

GitHub — microsoft / vscode: код Visual Studio

Хранилище

В этом репозитории («Код - OSS ») мы (Microsoft) вместе с сообществом разрабатываем продукт Visual Studio Code.Здесь мы не только работаем над кодом и проблемами, мы также публикуем нашу дорожную карту, ежемесячные планы итераций и наши планы финальной стадии. Этот исходный код доступен каждому по стандартной лицензии MIT.

Код Visual Studio

Visual Studio Code — это дистрибутив репозитория Code - OSS со специфическими настройками Microsoft, выпущенный под традиционной лицензией на продукт Microsoft.

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

Visual Studio Code обновляется ежемесячно с новыми функциями и исправлениями ошибок. Вы можете скачать его для Windows, macOS и Linux на веб-сайте Visual Studio Code. Чтобы получать последние выпуски каждый день, установите сборку Insiders.

Содействие

Есть много способов участия в проекте, например:

Если вы заинтересованы в устранении проблем и внесении прямого вклада в базу кода, см. документ «Как внести свой вклад», в котором рассматриваются следующие вопросы:

Обратная связь

См. Нашу вики для описания каждого из этих каналов и информации о некоторых других доступных каналах сообщества.

Связанные проекты

Многие из основных компонентов и расширений VS Code находятся в собственных репозиториях на GitHub. Например, адаптер отладки узла и адаптер отладки моно имеют свои собственные репозитории. Чтобы увидеть полный список, посетите страницу «Связанные проекты» в нашей вики.

Связанные расширения

VS Code включает набор встроенных расширений, расположенных в папке расширений, включая грамматики и фрагменты для многих языков. Расширения, обеспечивающие расширенную языковую поддержку (завершение кода, переход к определению) для языка, имеют суффикс language-features .Например, расширение json обеспечивает раскраску для JSON , а json-language-features обеспечивает расширенную языковую поддержку для JSON .

Контейнер для разработки

Этот репозиторий включает контейнер разработки Visual Studio Code Remote — Containers / Codespaces.

  • Для удаленных контейнеров используйте команду Remote-Containers: Open Repository in Container … , которая создает том Docker для улучшения дискового ввода-вывода в macOS и Windows.
  • Для Codespaces установите расширение Visual Studio Codespaces в VS Code и используйте команду Codespaces: Create New Codespace .

Docker / Codespace должно иметь не менее 4 ядра и 6 ГБ ОЗУ (рекомендуется 8 ГБ) для запуска полной сборки. См. Контейнер для разработки README для получения дополнительной информации.

Кодекс поведения

В этом проекте принят Кодекс поведения с открытым исходным кодом Microsoft. Для получения дополнительной информации см. Часто задаваемые вопросы о Кодексе поведения или свяжитесь с opencode @ microsoft.com с любыми дополнительными вопросами или комментариями.

Лицензия

Авторские права (c) Корпорация Microsoft. Все права защищены.

По лицензии MIT.

разработчиков Mac предпочитают VS Code Xcode — Visual Studio Magazine

Новости

Отчет

: разработчики Mac предпочитают код VS над Xcode

Tower, известная своим клиентом Git, недавно опросила более 4000 разработчиков, использующих Mac, чтобы узнать о таких вещах, как их любимые технологии, языки программирования и инструменты разработки.Хотя большая часть отчета об опросе может не представлять особого интереса для читателей Visual Studio Magazine , которые традиционно ориентированы на Windows, одним, возможно, неожиданным открытием является кроссплатформенный текстовый редактор Microsoft с открытым исходным кодом, который является предпочтительным текстовым редактором. обойдя собственный Xcode от Apple.

Фактически, около 57 процентов (округленные проценты) респондентов заявили, что используют VS Code, за которыми следуют Xcode (34 процента), Sublime Text (15 процентов), IntelliJ (13 процентов), PhpStorm (9 процентов) и Nova (5 процентов). процентов).

Или, может быть, это не так уж удивительно, как сказал Тауэр: «В нашем сообществе много разработчиков Swift, поэтому неудивительно, что Xcode так популярен. Точно так же можно было ожидать доминирования Visual Studio Code. Однако довольно примечательного. , что редактор Panic Nova собрал немало друзей, учитывая, что он еще совсем новый «.

[Щелкните изображение, чтобы увеличить.] Текстовые редакторы (источник: Tower).

Возможно, Tower посчитал этот вывод «ожидаемым» из-за того, что суперпопулярный редактор кода получил высокие оценки в других опросах, таких как этот для Rust, этот для открытого исходного кода и этот для GitHub.

По совпадению, на сайте Tower есть заметное место в блоге, опубликованном ранее в этом месяце: VS Code — История и технология, лежащие в основе одного из самых популярных в мире настольных приложений для разработчиков. В сообщении, написанном членом команды разработчиков VS Code, говорится: «VS Code изначально был написан с использованием сочетания JavaScript и TypeScript, но мы быстро адаптировали TypeScript для всего нашего кода и сразу же подключились к его улучшенной поддержке инструментов, такой как статический тип. проверка и рефакторинг.Для некоторых из наших модулей Node.js, которые мы поддерживаем, также задействовано немного нативного кода. Используя Electron в качестве платформы приложений, мы можем поставлять VS Code для macOS, Linux и Windows, включая поддержку чипов на базе ARM ».

В остальном в отчете — Mac Dev Survey 2021 — не так много всего, относящегося к экосистеме разработки Microsoft. TypeScript от Microsoft превзошел Apple Objective-C и занял шестое место в рейтинге языков программирования, который возглавлял JavaScript, а Swift — замена Apple Objective-C — занял первое место.2.

[Щелкните изображение, чтобы увеличить.] Языки программирования (источник: Tower).

Другие основные моменты исследования, проведенного в период с марта по апрель, включают:

  • «Какие языки вы хотите выучить?» — Swift (29 процентов), Go (23 процента) и Rust (23 процента)
  • «Вы регулярно вносите свой вклад в развитие открытого кода?» — Иногда (55 процентов), никогда (37 процентов)
  • «Каким типом разработки вы в основном занимаетесь?» — Web Full-Stack (26 процентов), мобильный (25 процентов) и веб-интерфейс (17 процентов)
  • «Вы пишете модульные тесты для своего кода?» — Иногда (43 процента), нет (30 процентов), и это основная часть моей работы (27 процентов)
  • «Какую платформу хостинга кода вы используете?» — GitHub (76 процентов), Bitbucket (21 процент) и GitLab.com (13 процентов)
  • «Какие инструменты вы используете для отслеживания ошибок и проблем?» — Jira (48 процентов), GitHub Issues (36 процентов) и None / text fles / email (15 процентов)
  • «Из каких источников вы предпочитаете учиться?» — Сообщения / статьи в блогах (70 процентов), онлайн-курсы (61 процент) и книги (48 процентов)

Сообщение не объясняет методологию опроса, в ходе которого было опрошено 4072 участника из более чем 90 стран.


Об авторе

Дэвид Рамел — редактор и писатель Converge360.

Мигель де Икаса оживляет разговор о COBOL с помощью VS Code Tweet — Visual Studio Magazine

Новости

Мигель де Икаса возбуждает разговор на COBOL с VS Code Tweet

COBOL — это язык программирования, о котором вы мало слышите, когда рассказываете о разработке, ориентированной на Microsoft. Ситуация изменилась на прошлой неделе с твитом Мигеля де Икасы, известного создателем GNOME, Mono и Xamarin, среди многих других.

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

[Щелкните изображение, чтобы увеличить.] Приготовление пищи на газе (источник: Twitter).

Его твит от 8 апреля гласил: «Единственное, что удерживало меня от обучения использованию Cobol, было то, что в нем отсутствовала интеграция с Visual Studio Code. Теперь эта проблема решена. Теперь мы готовим пищу на газе».

Вот изображение в твите COBOL, используемого в VS Code:

[Щелкните изображение, чтобы увеличить его.] COBOL в VS Code (источник: Twitter).

COBOL, сокращение от «COmmon Business Oriented Language», — это 62-летний язык программирования, восходящий к дням кодирования на мэйнфреймах с перфокартами (что, несомненно, вызывает реакцию «а, а что за перфокарта?» Более молодой Visual Studio. Читатели Magazine , которые никогда не бросали стопку заказанных перфокарт в неупорядоченный беспорядок на уроках программирования в средней школе).

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

Удивительно, но сейчас в моде COBOL:

[Щелкните изображение, чтобы увеличить.] COBOL не мертв! (источник: Google News).

Мой коллега Джон К.Уотерс на дочернем сайте ADTmag резюмировал ситуацию в прошлом году в посте под названием «Ищу несколько хороших (или плохих, или уродливых) программистов на COBOL».

Тем не менее, этот репортер не думал, что COBOL имеет большой вес в сфере разработки Microsoft, но оказалось, что он ошибался. Существует множество инструментов COBOL для Visual Studio и VS Code. Например, компания Micro Focus, специализирующаяся на COBOL, предлагает «Visual COBOL 5.0 для Visual Studio 2019».

Еще несколько платных предложений появятся в Visual Studio Marketplace, а также десятки бесплатных предложений в VS Code Marketplace.

Возвращаясь к твиту де Икасы, на вопрос подписчика, какой плагин используется, он сказал: «Это скриншот из gun / cobol, я не знаю, что они используют».

Этот репортер не смог найти ничего о «оружии / коболе», но, возможно, это была ссылка на GnuCOBOL с опечаткой на VS Code Marketplace.

В любом случае, твит вызвал как серьезную, так и юмористическую дискуссию, наряду с 66 ретвитами, 10 цитатами и 558 лайками.

Когда один из читателей сказал: «Я жду cobol #», де Икаса ответил: «Не ждите больше» и указал на NetCOBOL для .NET от GTSoftware.

Вот еще несколько комментариев:

  • «Это случайно. Мне тоже было интересно изучать COBOL, чтобы реализовать приложения для компьютера космического корабля на основе вымышленного CP / M, потому что 8080 asm — это просто утомительная работа. Мораль: не ешьте сыр перед сном».
  • «КОБОЛ — это, без шуток, респектабельный язык.Рано и грубо, но с идеями, которые стоит задуматься. Например, это требует программной структуры. Это займет некоторое время, чтобы стать фреймворками. Он очень линейный и в этом отношении похож на параллельные программы. Завораживающе. «
  • «Самый высокооплачиваемый навык программирования»
  • «Проповедь. Я бы выучил COBOL только для того, чтобы заработать эти милые $$$, исправляя глупые ошибки в банковских системах»
  • «Единственное, что удерживает меня от изучения Cobol, — это язык»
  • «Я все еще жду, пока $ {insert_your_obscure_text_editor} получит официальную поддержку.«
  • «Я потерял дар речи. Язык перфокарт в среде IDE. Что старое, то снова новое».
  • «Неееет»

Несмотря на этот последний комментарий, возрождение COBOL, похоже, набирает обороты. Например, буквально на этой неделе IBM анонсировала IBM COBOL для Linux на x86.

Да здравствует КОБОЛ!


Об авторе

Дэвид Рамел — редактор и писатель Converge360.

Stripe для Visual Studio Code

Отзыв

Мы будем рады услышать ваши отзывы во время этой общедоступной бета-версии.

Расширение Stripe для Visual Studio Code упрощает создание примеров кода, просмотр журналов запросов API, пересылку событий в ваше приложение и использование Stripe в вашем редакторе.

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

С помощью Stripe для VS Code вы можете:

Установить Stripe для VS Code

В качестве предварительного условия убедитесь, что у вас установлен Stripe CLI.

Вы можете найти расширение Stripe VS Code в Visual Studio Marketplace. Щелкните Установить , чтобы добавить расширение в редактор.

Или установите плагин вручную:

  1. См. Последние версии Releases для проекта vscode-stripe GitHub.
  2. Загрузите файл vscode-stripe-X.X.X.vsix из последней версии. Ссылка указана в разделе выпуска Assets .
  3. Запустите код --install-extension <путь к vscode-stripe-X.X.X.vsix> с вашего терминала.

Дополнительные сведения о ручной установке расширений, упакованных в файл .vsix , см. В документации VS Code.

Функции

Мониторинг журналов запросов API в реальном времени

Раздел Журналы включает команду Начать потоковую передачу журналов API , которая передает журналы запросов API, созданные участниками вашей учетной записи, в режиме реального времени.Щелкнув запись в журнале под Недавние журналы , вы перейдете к журналу на панели инструментов.

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

Вы можете остановить поток журналов, нажав Остановить потоковую передачу журналов API .

Запуск и пересылка трафика веб-перехватчика

Вы можете прослушивать входящие события веб-перехватчика и пересылать их на локальный компьютер одним из двух способов:

  • Запустите команду Start webhooks прослушивания в разделе События .
  • Выполните команду Stripe: Запустите прослушивание событий Webhooks с помощью CLI из палитры команд.

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

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

Вы также можете видеть подробности недавно инициированных событий прямо в редакторе.

Если вы хотите повторно отправить событие, вы можете сделать это с помощью интерфейса командной строки Stripe, запустив команду: stripe events Resend .

Конфигурация отладки полосы

В качестве альтернативы вы можете создать конфигурацию отладки для автоматической пересылки событий веб-перехватчика при запуске отладчика. Эта конфигурация должна быть помещена в файл launch.json, который VS Code будет использовать для отслеживания деталей настройки отладки.

Вы можете быстро запустить процесс отладчика в VS Code, нажав F5 .

  {
  "версия": "0.2.0",
  "конфигурации": [
    {
      "name": "Stripe: Webhooks слушают",
      "тип": "полоса",
      "запрос": "запуск",
      "команда": "слушать",
      "forwardTo": "http: // localhost: 3000",
      "forwardConnectTo": "http: // localhost: 3000",
      : ["payment_intent.успешно "," payment_intent.canceled "]
    }
  ]
}  

Вы также можете указать параметры forwardTo и forwardConnectTo ; это URL-адреса на вашем локальном сервере, которые должны получать события вашей учетной записи и события Connect соответственно. Параметр events принимает необязательный список, чтобы указать, какие события следует принимать.

Составные конфигурации

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

  {
  "версия": "0.2,0 ",
  "конфигурации": [
    {
      "name": "Stripe: Webhooks слушают",
      "тип": "полоса",
      "запрос": "запуск",
      "команда": "слушать",
      "forwardTo": "http: // localhost: 3000",
      "forwardConnectTo": "http: // localhost: 3000",
      "события": ["payment_intent.succeeded", "payment_intent.canceled"]
    },
    {
      "тип": "узел",
      "запрос": "запуск",
      "name": "Узел: Запустить программу",
      "program": "$ {workspaceFolder} /examples/standalone.js",
      "skipFiles": [" / **"]
    }
  ],
  "соединения": [
    {
      "name": "Запуск: Stripe + API",
      "configurations": ["Узел: Запуск программы", "Stripe: Webhooks прослушивание"]
    }
  ]
}  

Фрагменты кода для распространенных сценариев Stripe

Расширение VS Code может быстро создавать фрагменты кода для типичных сценариев (например.грамм. создание сеанса проверки и перенаправление пользователя в браузер) или базовые запросы ресурсов API.

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

Убедитесь, что ваш исходный код не предоставляет ключи API

Встроенный анализатор Stripe проверяет наличие Ключи API присутствуют в исходном коде и представляют предупреждение, если вы небезопасно раскрываете секретный ключ API.

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

Доступ к справочнику Stripe API

Вы можете навести указатель мыши на метод ресурса, чтобы открыть ссылку на соответствующую запись в справочнике Stripe API. Это может быть полезно при попытке определить параметры для данного ресурса или форму ответа API.

Справочные ссылки API в настоящее время не поддерживаются для .NET и частично поддерживаются для Java.

Доступ к панели инструментов Stripe

Раздел Dashboard расширения Stripe VS Code включает ссылки для быстрого перехода к определенным представлениям на панели инструментов для управления ключами API, веб-перехватчиками и другими ресурсами.

Настройки

В настройках кода VS можно задать следующие конфигурации:

Имя настройки Описание
stripe.cliInstallPath Задает абсолютный путь установки для Stripe CLI . По умолчанию: путь установки по умолчанию для Stripe CLI
stripe.projectName Задает имя проекта, из которого будет считываться конфигурация Stripe CLI.Вы можете определить уникальную конфигурацию для отдельных проектов или использовать глобальную конфигурацию по умолчанию. Дополнительные сведения см. В справочнике по интерфейсу командной строки Stripe. По умолчанию: по умолчанию
stripe.telemetry.enabled Указывает, следует ли включать полосковую телеметрию (даже если она включена, все равно соблюдается общая настройка telemetry.enableTelemetry ). По умолчанию: true

Команды

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

Участие

Stripe VS Code — проект с открытым исходным кодом под лицензией MIT. Вклады в проект приветствуются. Для получения подробной информации о том, как внести свой вклад в проект, ознакомьтесь с проектом vscode-stripe на GitHub.

Отзыв

Не стесняйтесь оставлять отзывы или отправлять запросы функций через систему отслеживания проблем проекта.

Что нового в Microsoft Visual Studio Code 1.50

Visual Studio Code от Microsoft стал одним из самых популярных инструментов разработчика. Visual Studio Code, созданный с использованием кроссплатформенной платформы Electron GitHub, представляет собой полнофункциональный, расширяемый редактор с открытым исходным кодом, который поддерживает широкий выбор языков программирования и фреймворков, от знакомых C, C ++ и C # до современных языков, таких как Go, Rust и Node.js. Visual Studio Code доступен для Windows, MacOS и Linux.

Где скачать Visual Studio Code

Чтобы загрузить редактор для Windows, MacOS и Linux, перейдите на веб-сайт Microsoft Visual Code Studio.

Что нового в Visual Studio Code 1.50

В Visual Studio Code 1.50, опубликованном 8 октября 2020 г., имеется следующее:

  • Улучшения закрепленной вкладки включают новый параметр editor.pinnedTabSizing , который позволяет разработчикам настраивать размер должна появиться закрепленная вкладка. Кроме того, редакторы теперь могут быть закреплены, когда вкладки отключены, и можно назначить новый цвет tab.lastPinnedBorder для рисования границы справа от ранее закрепленной вкладки.
  • Добавлены новые контекстные ключи редактора, некоторые из которых устарели: groupActiveEditorDirty было переименовано в activeEditorIsDirty , editorPinned было переименовано в activeEditorIsNotPreview , а editorSticky было переименовано в activeEditorIs.
  • Два контекстных ключа ресурсов (связанных с проводником) были добавлены для ресурсов: resourceDirname , для пути к папке ресурса, что эквивалентно dirname (uri.fsPath) и resourcePath для полного пути к ресурсу, что эквивалентно uri.fsPath .
  • Более доступный редактор настроек.
  • Языковое наведение теперь доступно во время отладки, а ширина и высота отладки теперь автоматически адаптируются к размеру содержимого наведения. Кроме того, консоль отладки теперь поддерживает фильтрацию, что упрощает поиск выходных данных или скрытие нерелевантных выходных данных журнала.
  • Расширение таблицы пламени теперь будет отображать в реальном времени показатели производительности при отладке JavaScript.
  • Новый параметр, открывает Максимально , позволяет пользователям настраивать свои собственные предпочтения, всегда ли панель открывается в развернутом виде при переключении с помощью Toggle Panel .
  • Предварительная версия расширения Microsoft C / C ++ больше не доступна.
  • Visual Studio Code теперь доступен как для архитектур ARMv7, так и для ARM64. Теперь разработчики могут использовать Visual Studio Code на Raspberry Pi, Chromebook и других устройствах на базе ARM.

Что нового в Visual Studio Code 1.49

Опубликованный 10 сентября Visual Studio Code 1.49 имеет следующие основные функции:

  • Добавлена ​​новая команда «Форматировать измененные строки» для форматирования только новых и измененных строк. Кроме того, новый параметр formatOnSaveMode позволяет применять форматирование и сохранение только к измененным строкам. Эти изменения были внесены для устранения ситуации, в которой команды Format и Save и Format Document могут привести к нежелательному переформатированию строк, которые не изменились, что может привести к большим запросам на вытягивание, которые трудно просмотреть, и повлиять на код, который не должен был быть изменен. изменен.
  • Представление «Репозитории системы управления версиями», ранее известное как представление «Поставщики системы управления исходным кодом», было повторно введено, чтобы обеспечить более детальный контроль над тем, какие репозитории системы управления версиями должны быть видны в представлении системы управления версиями.
  • Отладчик JavaScript был улучшен: теперь функция Auto Attach отлаживает процессы без ручной передачи им флага --inspect . Для обработки исходной карты VS Code теперь обрабатывает трассировку стека для использования исходных местоположений. Это помогает при отладке веб-приложений, использующих такие комплекты, как Webpack.В другом усовершенствовании разработчики могут выбрать остановку, когда условная точка останова вызывает ошибку, переключая настройку debug.javascript.breakOnConditionalError .
  • Консоль отладки теперь поддерживает фильтрацию, чтобы упростить поиск выходных данных или скрыть нерелевантные выходные данные журналов. Также поддерживаются шаблоны исключения. Фильтр применяется к выводам программы, но не к оценкам, выполняемым пользователем.
  • Редактор поставляется с TypeScript 4.0.2 с дополнительным рефакторингом цепочки, который преобразует несколько проверок в краткую дополнительную цепочку.
  • Тег @deprecated JSDoc теперь поддерживается в файлах JavaScript и TypeScript.

Помимо представления Visual Studio Code 1.49, Microsoft 14 сентября объявила об общедоступности версии 1.0 расширения C ++ для Visual Studio Code, предлагающей возможности для редактирования и завершения кода IntelliSense, отладки в Linux, Windows и MacOS, а также поддержка Linux на Arm и Arm64. Получите доступ к пакету расширений C / C ++, чтобы опробовать расширение.

Что нового в Visual Studio Code 1.48

Visual Studio Code 1.48, выпущенный в августе 2020 года и включающий функции и исправления с июля, имеет следующие улучшения:

  • Settings Sync, для обмена конфигурациями, такими как настройки, привязки клавиш и установленные расширений на разных машинах, теперь доступна для предварительного просмотра в стабильной версии.
  • Действия фильтра просмотра расширений теперь отображаются под отдельным действием фильтра (кнопка воронки).
  • Меню Git View и дополнительные действия (…) было переработано для улучшения организации некоторых команд.Кроме того, при публикации в репозитории GitHub разработчики теперь имеют возможность сделать репозиторий общедоступным, в отличие от предыдущего значения по умолчанию - приватного.
  • Команда «Отладка: открыть ссылку» предназначена для быстрой отладки любого URL-адреса.
  • Расширение GitHub Issue Notebooks, все еще находящееся на стадии предварительного просмотра, позволяет искать проблемы GitHub и запросы на вытягивание.
  • Расширение Language Support for Java теперь поддерживает облегченный режим для быстрой работы с исходными файлами Java.

Что нового в Visual Studio Code 1.47

Опубликованный в июле 2020 года код Visual Studio 1.47 содержит следующие новые возможности и изменения:

  • Код Visual Studio для Windows на ARM теперь доступен для стабильной версии.
  • Новый отладчик JavaScript, который был сделан отладчиком по умолчанию для JavaScript в версии редактора для инсайдеров в прошлом месяце, теперь является отладчиком по умолчанию для JavaScript в Visual Studio Code.
  • Настройки невложенных объектов можно редактировать в редакторе настроек.Авторы расширений могут использовать эту возможность, чтобы сделать эти настройки более заметными.
  • Новая команда selectAndPreserveFocus позволяет разработчикам выбирать элемент из списка, сохраняя фокус в этом списке. Это полезно для выбора нескольких файлов из списка, такого как проводник, без переключения фокуса на редактор файлов.
  • Параметр searchEditor.defaultNumberOfContextLines был обновлен и теперь имеет значение 1 вместо 0, что означает, что одна строка контекста будет отображаться до и после каждой строки результатов в редакторе поиска.
  • В представлении «Управление исходным кодом» теперь отображаются все репозитории в едином представлении, обеспечивая лучший обзор состояния всего рабочего пространства. Кроме того, представление системы управления версиями можно переместить на панель, а другие представления можно переместить в контейнер представления системы управления версиями.
  • Код Visual Studio для Java Pack Installer загружает зависимости и расширения для разработки Java в MacOS.
  • Расширение HexEditor для собственного шестнадцатеричного редактирования было улучшено за счет простой поддержки редактирования (отмена, повтор, редактирование ячеек, добавление ячеек) и оптимизации больших файлов, которая теперь позволяет открывать файлы размером более 18 мегабайт.
  • Параметры просмотра и сортировки объединены в новый пункт меню «Просмотр и сортировка» в контекстном меню. Кроме того, добавлена ​​поддержка сортировки изменений в представлении системы управления версиями по имени, пути и состоянию при использовании параметра представления списка.
  • Для удобства компактные папки в проводнике теперь правильно описывают развернутое / свернутое состояние и уровень ARIA. Кроме того, программы чтения с экрана могут обновлять смещение курсора в редакторе. В результате команда программы чтения с экрана «Say All» должна работать лучше при остановке и возобновлении.
  • Теперь файл расширения VSIX можно установить, перетащив его в представление расширений.
  • TypeScript 3.9.6 поставляется вместе с редактором, а поддержка TypeScript 4.0 была улучшена с такими возможностями, как улучшенный автоматический импорт.

Что нового в Visual Studio Code 1.46

Выпущенная в июне 2020 года, Visual Studio Code 1.46 имеет следующие возможности:

  • Репозиторий GitHub теперь можно добавить в качестве удаленного в локальные репозитории с помощью команды Git: Add Remote.
  • Улучшены конфигурации автоматической отладки. Теперь есть возможность сохранить конфигурацию в файл JSON, чтобы открыть его для редактирования. Также теперь можно отображать все конфигурации автоматической отладки из начального представления «Выполнить» и «Отладка».
  • Если редактор обнаруживает, что разработчик работает с модулем JavaScript в стиле CommonJS, автоматический импорт теперь будет использовать , требуется вместо , импорт .
  • Рефакторинг для JavaScript и TypeScript, например «Извлечь в метод» и «Переместить в новый файл», теперь пытается сохранить исходное форматирование реорганизованного исходного кода.
  • Для улучшения доступности строка состояния теперь поддерживает навигацию с клавиатуры. Также есть новые команды, упрощающие запуск и завершение выделения с помощью клавиатуры: Установить привязку выделения (⌘K ⌘B), Выбрать от привязки к курсору (⌘K ⌘K), Отменить привязку выделения (Escape) и Перейти к Якорь выделения.
  • Было добавлено представление «Синхронизированные машины» для отображения списка машин, синхронизирующих настройки VS Code.
  • Представление «Синхронизированные данные» было улучшено: теперь разработчики могут видеть машину, с которой синхронизируются данные.Разработчики также могут восстановить определенное состояние с помощью действия «Восстановить», доступного для записи данных в представлении. Кроме того, данные в облаке можно сбросить с помощью действия «Сброс синхронизированных данных», доступного под кнопкой «Дополнительные действия» (…) в заголовке представления.
  • Вкладки
  • теперь можно закрепить либо из контекстного меню, либо с помощью новой команды action.pinEditor (⌘K ⇧Enter).
  • Официальные сборки для 64-разрядной версии Windows для ARM доступны на странице загрузки инсайдеров. Эти сборки работают с Microsoft Surface Pro X.
  • Electron preload скрипты были добавлены для отображения определенных API-интерфейсов Electron в окне. Это шаг к полностью изолированному окну.
  • Функции гибкого макета теперь готовы для общего использования, например, перемещение видов между боковой панелью и панелью и группировка видов.

Что нового в Visual Studio Code 1.45

В Visual Studio Code 1.45, опубликованном в мае 2020 года, добавлены следующие возможности:

  • Более быстрое выделение синтаксиса с помощью специальной привязки WebAssembly, оптимизированной для использования интерпретатором TextMate редактора.Избегая выделения памяти во внутренних циклах и используя новые API, Microsoft смогла увеличить скорость выделения синтаксиса для обычных программных файлов в три раза.
  • Благодаря стилю семантического токена семантическую тематику можно настроить в настройках пользователя. Семантическая окраска доступна для TypeScript и JavaScript с поддержкой Java и C ++ в разработке.
  • Добавлена ​​поддержка автоматической аутентификации в репозиториях GitHub. Разработчики могут клонировать, извлекать и передавать в публичные и частные репозитории и из них, не настраивая диспетчер учетных данных.
  • Новый отладчик JavaScript на стадии предварительной версии устанавливается по умолчанию в выпуске Insiders и может быть установлен из Marketplace в стабильной версии VS Code. Новые функции включают в себя захват профилей ЦП из Node.js или приложений браузера путем нажатия кнопки «Новый профиль» в представлении стека вызовов или с помощью команды «Отладка: получение профиля производительности». Auto Attach для автоматического присоединения к процессам Node.js теперь автоматически отлаживает дочерние процессы.
  • Новые команды специальных возможностей «Сфокусировать следующую часть» и «Сфокусировать предыдущую часть» упрощают навигацию по рабочему месту.Строка состояния теперь может быть прочитана программами чтения с экрана, когда они наведены.
  • Улучшения были внесены в расширения удаленной разработки (которые позволяют разработчикам использовать контейнер, удаленный компьютер или подсистему Windows для Linux в качестве полнофункциональной среды разработки), включая рекомендации по конфигурации контейнера, поддержку механизмов WSL2 Docker и Podman и новый devcontainer Переменные .json для локальных и контейнерных папок.

Что нового в Visual Studio Code 1.44

Также известен как выпуск за март 2020 г. (хотя он был опубликован в апреле 2020 г.) Visual Studio Code 1.44 включает следующие улучшения:

  • Улучшения удобства использования, включая более удобный вид просмотра различий и более четкие обозначения ролей, установленные для элементов управления пользовательского интерфейса. Также было настроено поведение быстрого виджета.
  • Представление «Временная шкала» для визуализации событий временных рядов, таких как фиксации Git и сохранение файлов, теперь по умолчанию не находится в режиме предварительного просмотра. Переписан элемент управления Quick Open для файлов. Он также имеет новые функции, такие как сохранение входных данных при смене провайдера.Также имеется новый параметр "quickOpen.history.filterSortOrder": "недавность" , который позволяет вам сортировать историю редактора по последним открытым элементам.
  • Значок номера был добавлен в представление расширений, чтобы показать количество расширений в пакете.
  • Visual Studio Code теперь будет сохранять стек Undo / Redo файла при его закрытии. Когда файл открывается повторно и содержимое не изменяется, стек Undo / Redo будет восстановлен.
  • Продолжается работа над расширениями удаленной разработки, которые позволяют использовать контейнер, удаленную машину или подсистему Windows для Linux (WSL) в качестве полнофункциональной среды разработки.Среди вех в Visual Studio Code 1.44: запрос на вытягивание может быть извлечен непосредственно в контейнер.
  • Предварительный просмотр синхронизации настроек позволяет разработчикам обмениваться фрагментами и состоянием пользовательского интерфейса на разных машинах.
  • Два новых руководства представлены для Python, в том числе одно по созданию приложения Python в контейнере Docker и одно по использованию библиотек науки о данных Python для создания модели машинного обучения.
  • Теперь доступна версия 1.0 расширения Microsoft Docker для Visual Studio Code.

Что нового в Visual Studio Code 1.43

Код Visual Studio

может это сделать? - Smashing Magazine

Об авторе

Берк Холланд (Burke Holland) - фронтенд-разработчик, живущий в Нэшвилле, штат Теннесси; величайший город в мире. Ему очень нравится JavaScript, потому что это единственный способ ... Больше о Берк ↬

Почему Visual Studio Code (VS Code) так популярен и нужен ли нам еще один текстовый редактор? В этой статье мы рассмотрим, как VS Code расширяет традиционные концепции текстовых редакторов и открывает совершенно новые возможности для повышения производительности для разработчиков.Это все самое лучшее о VS Code, о котором никто никогда не удосужился рассказать вам.

Около двух лет назад я неохотно впервые открыл Visual Studio Code (VS Code). Единственная причина, по которой я это сделал, - это то, что я работал над проектом TypeScript (тоже довольно неохотно), и мне надоело бороться с редактором, компилятором и всеми настройками, которые мне нужны для работы проекта TypeScript. Кто-то упомянул мне, что TypeScript «просто работает» в VS Code, и я был приятно удивлен, обнаружив, что они были правы.

Я ожидал этого. VS Code от Microsoft, поэтому вполне ожидаемо, что TypeScript будет работать. Чего я не ожидал, так это того, что практически все, что мне нужно было сделать в VS Code, «просто сработало». И я имею в виду , что угодно, . Хотя в этой статье основное внимание уделяется функциям для Интернета, а также разработчикам JavaScript, VS Code имеет интеграцию с Go, Python, Java и Ruby - и это лишь некоторые из них.

В течение следующих нескольких месяцев я начал открывать в VS Code вещи, которые я нашел замечательными.Я официально перешел на VS Code и с тех пор не оглядывался. В течение нескольких месяцев я составлял список моих любимых советов, уловок и расширений для VS Code, которые могут оставить у вас ту же реакцию, что и у меня: «VS Code может это сделать ?!» 😲

От веб-приложений к настольным приложениям

Знаете ли вы, что можно добавить в свое резюме «разработчика настольных приложений», приложив немного больше усилий? Все, что вам нужно сделать, это просмотреть документацию по API и создать свое первое современное настольное приложение.Прочтите соответствующую статью →

Интерактивная площадка

Один из лучших способов изучить все тонкости VS Code - пройти через интерактивную площадку.

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

Интерактивное руководство находится прямо на странице «Добро пожаловать» при первом открытии редактора:

Раздел «Интерактивная площадка» на странице приветствия VS Code.

Многие люди (включая меня) полностью пропускают его, потому что он находится ниже «сгиба» и ближе к низу страницы. Кроме того, кто читает заставки?

Примечание : Вы можете вернуться к интерактивному руководству в любое время, открыв палитру команд VS Code Ctrl / Cmd + Shift + P и выбрав «Интерактивная площадка».

Теперь, когда вы освоили основы, вам понадобится шрифт, столь же красивый, как и код, который вы собираетесь написать.Для этого не ищите ничего, кроме FiraCode и Font Ligatures.

Лигатуры шрифтов

Лигатуры шрифтов - это шрифты, содержащие специальные символы, которые используются для представления символов, состоящих из более чем одного символа. У нас их много в программировании. Это будут такие символы, как <= , > = , == и === .

FiraCode - прекрасная лигатура шрифтов для VS Code. Сначала загрузите шрифт FiraCode с GitHub и добавьте его в шрифты вашего компьютера.Затем добавьте следующие строки в файл пользовательских настроек Ctrl / Cmd +, .

  "editor.fontFamily": "Код Фира",
        "editor.fontLigatures": true
  

Попробуйте использовать несколько специальных символов, перечисленных выше, чтобы увидеть разницу. Лигатуры шрифтов появляются в неожиданных местах. Такие места, как www и && . Идите вперед, попробуйте и посмотрите, что вы обнаружите!

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

Раскладки клавиатуры

Отчасти мои сомнения при переходе на VS Code заключались в том, что я потратил некоторое разочарование и усилия на изучение сочетаний клавиш Sublime Text. Я также немного гордился своим мастерством игры на клавиатуре и вовсе не был готов отказаться от этого.

К счастью, мне не пришлось.

VS Code имеет то, что называется Keymaps . Это расширения, которые сопоставляют все его ярлыки (ну, почти все) другим редакторам. Есть раскладки для всех популярных редакторов, включая Sublime, Atom, Emacs и даже Eclipse!

Чтобы установить раскладку клавиатуры, откройте панель поиска расширений, нажав Ctrl / Cmd + K → Ctrl / Cmd + X .Затем найдите «раскладку».

Расширение Sublime Keymap для VS Code.

Должен отметить, что с тех пор я удалил Sublime Keymap. После достаточного использования я смог перенастроить свой мозг, чтобы использовать ярлыки VS Code, как только они появляются из коробки. Думайте о раскладке клавиатуры как о колесе для тренировки: это хорошая идея, когда вы только начинаете, но в какой-то момент вы, вероятно, захотите их снять.

Теперь, если вы похожи на меня, у вас несколько компьютеров, и вы можете редактировать в разных местах в зависимости от проекта и дня.Мы уже внесли ряд изменений в настройку VS Code и собираемся внести еще несколько. Мы не хотим повторять эту конфигурацию везде, где используется VS Code. Вот где приходит на помощь расширение Settings Sync.

Settings Sync

С помощью расширения Settings Sync вы можете экспортировать все свои настройки VS Code в Gist, а затем вытащить их все из другой установки VS Code и сразу применить .

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

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

Emmet

Emmet - популярный инструмент расширения для разметки и CSS, который существует уже довольно давно.Тем не менее, я почти каждый день встречаю людей, которые либо не слышали об этом, либо они новички в разработке и только узнают об этом. Это нормально! Мы все учимся разным вещам в разное время.

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

VS Code показывает предварительный просмотр грядущего расширения Emmet.

Изящный трюк, который можно использовать с Emmet, - это сопоставить сочетание клавиш ( Ctrl / Cmd + K → Ctrl / Cmd + S открывает сопоставления клавиатуры) с командой «Обернуть отдельные строки сокращениями». Это похоже на старую «Обернуть выделение как ссылку» от Textmate, но с дополнительным преимуществом, заключающимся в возможности переносить сразу несколько строк с более сложным расширением.

Emmet также можно использовать в файлах markdown, JSX и .vue . Чтобы включить их, добавьте правильное языковое сопоставление в файл пользовательских настроек Ctrl / Cmd +, .

  "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "уценка": "HTML"
    },
  

В случае JSX Эммет достаточно умен, чтобы использовать className вместо class внутри расширения.

Еще одна интересная особенность Emmet, которая была для меня новой, - это способность Emmet автоматически предоставлять ширину и высоту изображения, просто просматривая файл изображения, связанный в src . Это работает в HTML и CSS. Он также работает как с изображениями, размещенными локально в проекте, так и с изображениями по другим URL-адресам.Чтобы использовать эту функцию, поместите курсор в тег изображения, откройте палитру команд Ctrl / Cmd + Shift + P и выберите «Обновить размер изображения». Магия! 🎩

Для более глубокого понимания того, что такое Эммет, и всех различных способов его использования в VS Code, ознакомьтесь с этой статьей CSS Tricks.

В то время как Эммет заботится о продуктивности в разметке и CSS, сам VS Code обеспечивает автозавершение кода в форме intellisense; и он работает там, где вы не ожидали.

Intellisense в файлах JSON

Intellisense - довольно известная функция редактора, но в первую очередь задумана только внутри файлов кода.VS Code расширяет классическое определение intellisense и также добавляет его в файлы JSON. Вы увидите это, если добавите какие-либо настройки в свой файл пользовательских настроек. VS Code также предоставляет intellisense для файлов package.json . Что еще более впечатляет, так это то, что он предоставляет intellisense для пакетов npm внутри package.json . Нужен конкретный пакет, но вы не помните его версию? Без проблем! VS Code просмотрит npm и вернет самую последнюю версию в intellisense.

Некоторые люди отметили, что они не редактируют файл package.json вручную. Однако я ловлю себя на том, что время от времени делаю это по какой-то странной причине, и необходимость искать версию пакета всегда была для меня огромной болью. Теперь он мне предоставлен VS Code. На одну вещь меньше, о которой я должен догадываться.

Даже с Intellisense это JavaScript, поэтому, если мы не очень смелы (или не зависимы от страданий), нам понадобится линтер. VS Code имеет отличную интеграцию с ESLint через расширение ESLint, но есть и другие варианты, и он включает проверку типа вашего нетипизированного JavaScript.

Type Check Your JavaScript

Помните ту замечательную интеграцию TypeScript, о которой я говорил вам ранее? Одна из малоизвестных уловок заключается в том, что вы можете использовать компилятор TypeScript для проверки и простых файлов JavaScript. Вы делаете это, добавляя // @ ts-check в начало любого файла JavaScript, и вы сразу получаете проверку ошибок TypeScript в файле.

Вы не захотите добавлять эту строку в каждый файл, поэтому вы можете использовать TypeScript для проверки каждого файла JavaScript в своем проекте, добавив следующую строку в свой файл пользовательских настроек Ctrl / Cmd +, .

  "javascript.implicitProjectConfig.checkJs": true
  

Если вы хотите управлять определенными функциями проверки TypeScript, просто добавьте файл .tsconfig в свой проект. Когда я говорю, что TypeScript «просто работает» в VS Code, я имею в виду, что он работает настолько хорошо, что разработчик почти без проблем понимает его.

Теперь, когда у вас есть линтинг кода и даже проверка типов, когда это необходимо, пора позволить VS Code решать эти надоедливые проблемы форматирования с помощью Prettier.

Prettier

Prettier - замечательный инструмент форматирования кода с открытым исходным кодом.Он широко используется командами (и отдельными людьми), чтобы убедиться, что стили кодирования универсальны для проектов и разработчиков. Он автоматически переформатирует ваш код в соответствии с некоторыми определенными стандартами, такими как столбец для переноса кода, способ форматирования обещаний и использование одинарных или двойных кавычек.

Prettier включен в VS Code с помощью Prettier Extension. Чтобы установить его, откройте панель расширений Ctrl / Cmd + K Ctrl / Cmd + X и выполните поиск по запросу «красивее».

После установки вы увидите Prettier на панели задач для любого файла, который Prettier умеет форматировать.Вы можете вызвать Prettier для файла с помощью команды «Форматировать документ»: Alt / Option + Shift + F .

Изящный трюк (и показанный на видео выше) - установить VS Code на автоматическое форматирование при сохранении. Это вызовет Prettier всякий раз, когда файл будет сохранен. Чтобы получить эту функциональность, добавьте следующие настройки в файл пользовательских настроек ( Ctrl / Cmd ).

  "editor.formatOnSave": true
  

Настройки Prettier также можно изменить из файла пользовательских настроек.Если вы хотите, чтобы Prettier использовал вашу конфигурацию ESLint для настроек, просто укажите параметр «eslintIntegration».

  "prettier.singleQuote": true,
    "prettier.eslintIntegration": правда,
    "prettier.tabWidth": 2
  

Посмотрите, насколько красив теперь ваш код! Красивый. Вам больше не захочется выходить из редактора. Благодаря параметрам терминала в VS Code вам, возможно, никогда не придется!

Терминальный доступ

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

Мне было трудно избавиться от привычки пользоваться встроенным терминалом на Mac. Вы можете открыть внешний терминал в любое время из VS Code в том месте, где находится файл, который вы просматриваете в данный момент, с помощью сочетания клавиш Ctrl / Cmd + Shift + C .

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

Live Share

VS Code Live Share было объявлено на прошлой неделе на Microsoft Connect. Это позволяет нескольким разработчикам мгновенно объединиться в один проект. Нет необходимости проверять код в репозитории или запускать инструмент для демонстрации экрана.Другие разработчики могут сразу загрузить ваш проект в свой редактор и видеть ваш курсор в реальном времени без необходимости настраивать что-либо на своей стороне.

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

На момент написания этой статьи общий ресурс VS Code Live находится на стадии предварительной версии, но, вероятно, будет общедоступен к тому времени, когда вы это прочитаете. Фактически, вы, возможно, уже используете его!

Теперь, когда ваши коллеги успешно исправили все ваши ошибки (ура для совместной работы!), Пришло время проверить все это на GitHub. Одна из моих любимых особенностей VS Code заключается в том, что интеграция с Git настолько хороша, что даже я могу использовать Github.

Интеграция с Git

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

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

До сих пор мы уделяли большое внимание редактированию текста, но VS Code замечательно подходит для более тяжелой работы; то, что мы обычно ожидаем от интегрированной среды разработки (IDE), а не от текстового редактора.Вот некоторые из моих любимых.

Нулевая конфигурация Node.js Запуск и отладка

VS Code будет запускаться и присоединять отладчик к любому коду JavaScript без каких-либо расширений или какой-либо конфигурации. Просто нажмите клавишу F5 и выберите «Узел» из раскрывающегося списка. Вы также можете переключиться на вкладку отладки Ctrl / Cmd + Shift + D и нажать кнопку с зеленой стрелкой вверху. Это запустит ваше приложение и подключит отладчик, обеспечивающий полнофункциональную отладку.

Точки останова по столбцу

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

Просто щелкните правой кнопкой мыши во время сеанса отладки и выберите «Добавить точку останова столбца».

Устанавливает точки останова для столбцов, чтобы они разбивались на отдельные строки кода.

Сборка, запуск, отладка и развертывание Docker

Microsoft предоставляет расширение Docker для VS Code, которое позволит вам выполнять практически все действия Docker в VS Code.Фактически, VS Code автоматически создаст необходимые файлы Docker для вашего проекта (насколько это возможно) в зависимости от выбранной вами среды выполнения и структуры вашего проекта. Для простых приложений Node.js это означает установку Docker с нулевой конфигурацией.

В этом примере я беру приложение Express и использую VS Code для создания всех файлов компоновки Docker и Docker. VS Code также создает правильную конфигурацию отладки, поэтому после запуска образа я могу подключить отладчик VS Code, и все просто работает.Расширение также позволяет публиковать ваш образ в Docker Hub или в реестре контейнеров Azure.

Составные конфигурации запуска

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

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

VS Code имеет возможность запускать несколько процессов и присоединять отладчики к обоим из одной команды запуска. Это означает, что можно отлаживать интерфейсный код JavaScript и серверный код Node.js прямо из VS Code.

Это называется «Составной конфигурацией запуска». В приведенном выше видео я использую следующий код для отладки приложения, которое использует Express / Cosmos DB для серверной части и React для клиентской части.

  {
        "соединения": [
            {
                "name": "Запустить браузер / сервер",
                «конфигурации»: [«Запустить браузер», «Запустить сервер»]
            }
        ],
        "конфигурации": [
            {
                "тип": "хром",
                "запрос": "запуск",
                "name": "Запустить браузер",
                "url": "http: // localhost: 3000",
                "webRoot": "$ {workspaceRoot} / src"
            },
            {
                "тип": "узел",
                "запрос": "запуск",
                "name": "Запустить сервер",
                "программа": "$ {workspaceRoot} / server / server.js "
            }
        ]
    }
  

Обратите внимание, что для этого необходимо установить расширение отладчика Chrome. Администрирование MongoDB

Администрирование MongoDB

VS Code может помочь вам визуально администрировать и запрашивать любую базу данных MongoDB или Cosmos DB (локальную или удаленную) с помощью расширения Cosmos DB.

Расширение Cosmos DB будет подключаться к любым существующим экземплярам Cosmos DB в Azure, но оно также будет подключаться к любому экземпляру MongoDB, доступному по URL-адресу mongodb: // .

Вы можете создавать и удалять базы данных и коллекции на боковой панели, а также создавать и работать с MongoDB Scrapbooks для тестирования ваших запросов. VS Code обеспечивает полный интеллект для коллекций и API MongoDB в Mongo Scrapbooks. Вы даже можете изменить результат своего запроса на панели результатов, и изменения будут сохранены обратно в базу данных.

Развертывание приложений

Еще одно интересное расширение для VS Code - это расширение Azure AppService. Если вы хотите развернуть свои приложения в облаке, вы можете сделать это, даже не выходя из редактора.

Microsoft предоставляет расширение под названием AppService Tools for VS Code, которое позволит вам создавать новые сайты, управлять существующими и развертывать код либо щелчком правой кнопкой мыши, либо с помощью предварительно созданного сценария оболочки, который автоматизирует процесс проверки вашего кода в правая конечная точка Git для настройки непрерывной доставки.