Как работать с visual code: Страница не найдена | Losst

Обзор Visual Studio Code — Блог HTML Academy

Visual Studio Code — бесплатный и очень популярный редактор кода от Microsoft.

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

Скачать VS Code — https://code.visualstudio.com

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

Первый запуск

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

Редактор поддерживает множество языков программирования и легко настраивается под пользователя. Можно
установить
различные сочетания клавиш и цветовые схемы.

Посмотрим интерфейс редактора на примере одного из проектов.

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

Поиск

Следующий пункт — поиск. В поле можно ввести искомое значение, и редактор покажет, в каких
местах оно находится. При
желании можно поменять значение через поле замены.

Git

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

Настройка Git в Visual Studio Code подробна описана в официальной
документации.

Отладчик

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

Расширения

Последний пункт активного меню позволяет устанавливать расширения. В VS Code есть расширения для
большинства языков
программирования. Верстальщики тоже не обделены — например, мы собрали подборку из 9 полезных плагинов VS Code.

Главное меню

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

Edit. Через этот пункт можно работать с открытым файлом — отменять последние
действия, производить
поиск по файлу.

Selection. В пункте Selection можно найти команды для выделения нужного участка кода.

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

Go. Через пункт Go можно перемещаться между открытыми файлами и по документу. Также
можно разделять
рабочую область на части. Это удобно для работы на большом мониторе — можно держать
в одном месте разметку и файлы
стилей.

Debug. Здесь собраны команды для отладки скриптов.

Terminal. В редактор встроен терминал (он же командная строка). Он может выполнять
как отдельные
задачи, так и выводить командную строку в интерфейс редактора.

Help. В этом пункте собраны справочные материалы по работе редактора, его основным
функциями и
общая информация о программе.

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

VS Code — инструмент фронтендера

Пройдите обучение в HTML Academy, чтобы работать с редактором кода
и другими
инструментами как профессионал.

Узнать
больше

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

Как настроить VS Code для разработки на PHP

Visual Studio Code – популярный бесплатный редактор кода. Может с легкостью конкурировать с PhpStorm, ведь он бесплатный и с открытым исходным кодом

Так может выглядеть интерфейс редактора после установки расширений

Основные возможности

• отладчик кода
• встроенный терминал
• удобные инструменты для работы с Git
• подсветка синтаксиса для множества популярных языков и файловых форматов
• удобная навигация
• встроенный предпросмотр Markdown
• умное автодополнение
• встроенный пакетный менеджер

VS Code имеет большое количество расширений для разработчика. Для установки нового пакета зайдите во вкладку “Extensions”, введите название пакета в строке поиска, нажмите кнопку “Install”.

EditorConfig for VS Code

EditorConfig — это конфигурационный файл и набор расширений к большому количеству редакторов кода. Он подхватывает настройки из файла .editorconfig, который, как правило, размещается в корне проекта.
Расширение автоматически настроит отступы и перевод строк единообразно для всех разработчиков, использующих его. PHP код чаще всего выполняется на *nix системах, поэтому необходимо использовать стандарт.

Ниже приводится пример файла .editorconfig, который используется в Laravel:

root = true

# Глобальные настройки, которые будут записаны для всех файлов.
[*]
charset = utf-8
# На Unix системах используется lf для перевода строки.
# Это также требование стандарта PSR.
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

# Можно задать индивидуальные настройки как для типов файлов,
# так и отдельных файлов по имени.
[*.md]
trim_trailing_whitespace = false

[*.{yml,vue,js,html}]
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

[lib/**.js]
indent_style = space
indent_size = 2

PHP Intelephense

В редакторе уже есть поддержка синтаксиса и подсказок стандартных функций языка. Но без специального дополнения редактор не будет подсказывать пользовательские функции из других частей проекта. Поэтому для поддержки автодополнения, анализа кода, перехода к месту, где создана функция/класс/переменная (с помощью шортката Alt+Click), используется дополнение PHP Intelephense

Чтобы подсказки не дублировались необходимо отключить встроенную в редактор поддержку кода для PHP: Extensions -> Search @builtin php -> PHP Language Features -> Disable

PHP Debug

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

Чтобы воспользоваться PHP Debug, необходимо установить сам XDebug, без него расширение для редактора работать не будет. Установив расширение, необходимо добавить конфигурацию для PHP в разделе Debug. После выбора языка в корне проекта будет создан файл .vscode/launch.json с задачами для Дебаггера. Расширение создаст файл со стандартными параметрами.

Для того, чтобы XDebug общался с нашим дебаггером, необходимо добавить настройки в файл конфигурации php.
Чтобы найти этот файл выполните в терминале команду php --ini или запустите веб-сервер с кодом phpinfo().

В Linux PHP подгружает не только основной файл, но и файл из этой директории. Например, на Ubuntu путь к директории конфигурационных файлов для PHP может быть таким — /etc/php/7.3/cli/conf.d/.
В ней создаём файл с необходимыми правами (требуются root права):

$ sudo touch /etc/php/7.3/cli/conf.d/99-local.ini
$ sudo chmod 777 /etc/php/7.3/cli/conf.d/99-local.ini

Содержимое файла:

xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000 ; Порт, который мы указали в launch.json
xdebug.idekey=code
xdebug.remote_autostart=1

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

PHP Sniffer

В языках программирования есть понятие стиль кодирования. Но не все разработчики знают об этом. Программа, которая отвечает за проверку на соответствие стандартам, называется линтер. В PHP приняты стандарты под названием PSR. Нас интересуют стандарты PSR-1 и PSR-12. Именно эти два стандарта касаются кодирования и правил оформления.

В PHP в качестве линтера используется PHP_CodeSniffer.
Для его работы необходимо установить глобально сам линтер composer global require "squizlabs/php_codesniffer=*" и расширение PHP Sniffer.

Проверьте, что линтер установился:

$ phpcs --version
PHP_CodeSniffer version 3.4.2 (stable) by Squiz (https://www.squiz.net)

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

$ phpcs --standard=PSR12 <dirname>

Semicolon Insertion Shortcut

PHP требует разделять инструкции с помощью точки запятой. Расширение Semicolon Insertion Shortcut добавляет необходимый символ в конец строки с помощью шортката.
Если при нажатии [Ctrl] + ; символ не вставляется, то необходимо проверить список горячих клавиш и при необходимости назначить комбинацию вручную: File -> Preferences -> Keyboard Shortcuts

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

• GitLens — в VS Code уже встроена поддержка Git. Но когда базовых возможностей становится недостаточно, на помощь может придти Gitlens. Например, одна из полезных фич — git blame на текущей строке.

• Indent Rainbow — разноцветные отступы в коде. Подсвечивает некорректный отступ. Можно вместо радуги установить оттенки серого.

• Settings Sync — плагин, позволяющий синхронизировать настройки редактора между разными компьютерами. В качестве облачного хранилища используется Github Gists. Все настройки можно скачать, указав нужный файл синхронизации.

• Fira Code — моноширинный шрифт, в котором используются лигатуры (объединяет несколько символов в один) для общих комбинаций символов в программировании. Визуальная надстройка для более удобного чтения кода.

Использование интеграции Git в Visual Studio Code

Введение

Редактор Visual Studio Code (VS Code) стал одним из самых популярных для веб-разработки. Его популярность обусловлена множеством встроенных возможностей, в том числе интеграции с системой контроля исходного кода, а именно с Git. Использование возможностей Git из VS Code позволяет сделать рабочие процессы более эффективными и надежными.

В этом учебном модуле мы изучим интеграцию контроля исходного кода в VS с помощью Git.

Предварительные требования

Для этого обучающего модуля вам потребуется следующее:

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

Шаг 1 — Знакомство с вкладкой Source Control

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

Откройте Visual Studio Code и запустите встроенный терминал. Вы можете открыть его, используя сочетание клавиш CTRL + ` в Linux, macOS или Windows.

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

mkdir git_test
cd git_test

Затем создайте репозиторий Git:

Также вы можете сделать это в Visual Studio Code, открыв вкладку Source Control (иконка выглядит как развилка дороги) в левой панели:

Затем нажмите кнопку Open Folder:

При нажатии кнопки откроется проводник файлов, где будет открыт текущий каталог. Выберите предпочитаемый каталог проекта и нажмите Open.

Затем нажмите Initialize Repository:

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

Вы увидите созданный каталог .git:

Output

Это означает, что репозиторий инициализирован, и теперь вам следует добавить в него файл index.html.

После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий:

Вы можете нажать значок плюс (+) рядом с файлом index.html, чтобы включить отслеживание файла в репозитории.

После этого рядом с файлом появится буква A. A обозначает новый файл, который был добавлен в репозиторий.

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

После этого вы увидите, что несохраненных изменений нет.

Теперь добавьте немного содержания в файл index.html.

Вы можете использовать ярлык Emmet для генерирования базовой структуры кода HTML5 в VS Code, нажав !, а затем клавишу Tab. Теперь добавьте что-нибудь в раздел <body>, например, заголовок <h2>, и сохраните файл.

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

Для практики давайте запишем это изменение в репозиторий.

Теперь вы познакомились с работой через панель контроля исходного кода, и мы переходим к интерпретации показателей gutter.

Шаг 2 — Интерпретация показателей Gutter

На этом шаге мы рассмотрим концепцию Gutter («Желоб») в VS Code. Gutter — это небольшая область справа от номера строки.

Если ранее вы использовали сворачивание кода, то в области Gutter находятся иконки «Свернуть» и «Развернуть».

Для начала внесем небольшое изменение в файл index.html, например, изменим содержание внутри тега <h2>. После этого вы увидите, что измененная строка помечена в области Gutter синей вертикальной чертой. Синяя вертикальная черта означает, что соответствующая строка кода была изменена.

Теперь попробуйте удалить строку кода. Вы можете удалить одну из строк в разделе <body> вашего файла index.html. Обратите внимание, что в области Gutter появился красный треугольник. Красный треугольник означает строку или группу строк, которые были удалены.

Теперь добавьте новую строку в конец раздела <body> и обратите внимание на зеленую полосу. Вертикальная зеленая полоса обозначает добавленную строку кода.

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

Шаг 3 — Просмотр отличий файлов

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

Чтобы посмотреть отличия, откройте панель контроля исходного кода и дважды нажмите на измененный файл. В этом случае следует дважды нажать на файл index.html. Откроется типовое окно сравнения, где текущая версия файла отображается слева, а ранее сохраненная в репозитории версия — справа.

В этом примере мы видим, что в текущей версии добавлена строка:

Шаг 4 — Работа с ветвлением

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

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

Создайте новую ветвь с именем test.

Теперь внесите изменение в файл index.html, чтобы перейти в новую ветвь test, например, добавьте текст this is the new test branch.

Сохраните эти изменения ветви test в репозитории. Затем нажмите на имя ветви в левом нижнем углу еще раз, чтобы переключиться обратно на главную ветвь master.

После переключения обратно на ветвь master вы увидите, что текст this is the new test branch, сохраненный для ветви test, отсутствует в главной ветви.

Шаг 5 — Работа с удаленными репозиториями

В этом учебном модуле мы не будем вдаваться в детали, но панель Source Control также предоставляет доступ для работы с удаленными репозиториями. Если вы уже работали с удаленными репозиториями, то вы увидите знакомые вам команды, такие как pull, sync, publish, stash и т. д.

Шаг 6 — Установка полезных расширений

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

Git Blame

Это расширение дает возможность просматривать информацию Git Blame в панели состояния для текущей выделенной строки.

Английское слово Blame имеет значение «винить», но не стоит беспокоиться — расширение Git Blame призвано сделать процесс разработки более практичным, а не обвинять кого-то в чем-то плохом. Идея «винить» кого-то за изменения кода относится не к буквальному возложению вины, а к идентификации человека, к которому следует обращаться с вопросами в отношении определенных частей кода.

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

Git History

Хотя вы можете просматривать текущие изменения, сравнивать версии и управлять ветвлением с помощью встроенных функций VS Code, они не дают возможности просматривать историю Git. Расширение Git History решает эту проблему.

Как можно увидеть на снимке ниже, это расширение позволяет тщательно изучать историю файла, автора, ветви и т. д. Чтобы активировать показанное ниже окно Git History, нажмите на файл правой кнопкой мыши и выберите пункт Git: View File History:

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

Git Lens

GitLens дополняет возможности Git, встроенные в Visual Studio Code. Это расширение помогает визуализировать принадлежность кода через аннотации Git Blame и линзу кода, просматривать и изучать репозитории Git из среды VS Code, получать полезные аналитические данные с помощью мощных команд сравнения, а также выполнять многие другие задачи.

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

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

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

При этом откроется следующее окно:

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

Заключение

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

Visual Studio Code: кому и зачем он нужен

Недавно мы беседовали с Анной Леоновой о её пути в программировании. Аня пишет код в редакторе Visual Studio Code и сегодня поделится своими настройками. Вы узнаете, как установить программу и подготовить её для комфортной работы. 

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

Что за Visual Studio Code?

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

• Знает синтаксис разных языков программирования и помогает вам не ошибиться в точке с запятой или скобочке.
• Сама подставляет некоторые распространённые фрагменты кода.
• Помнит названия ваших переменных и подсказывает их, чтобы не было ошибок.
• Умеет загружать ваш код на Гит.
• Помогает отлаживать код.
• Поддерживает плагины, которые превращают её в мегакомбайн для разработчика.

VSCode — один из самых популярных редакторов кода, потому что он бесплатный и открытый, его можно сделать каким угодно под свои задачи. Есть и другие: например, Sublime Text или продукты компании JetBrains. 

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

Установка 

Перейдите на code.visualstudio.com и скачайте актуальную версию редактора под свою операционную систему — есть поддержка для Linux, Windows и Mac OS. Далее просто следуйте командам программы-загрузчика и откройте редактор.

Приветственное окно Visual Studio Code после установки

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

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

✅  Выбирайте редактор, который можно как угодно изменять и настраивать. Нравится внешний вид Sublime Text, но не хватает мощи VS Code — нет проблем: находите тему, меняете шрифт, добавляете пару расширений и готово. Чтобы быстро освоить VS Code, изучайте интерфейс по документации. 

Настройка

VS Code готов к работе сразу после установки — в него по умолчанию добавлено большинство плагинов для веб-разработки. Можно сразу загрузить проект или начать программировать в новом файле. Нужно только привыкнуть к интерфейсу. 

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

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

Устанавливаем русский язык. На левой боковой панели нажмите Extensios и в строке поиска напишите Russian Language Pack — это языковой пакет, который адаптирует VS Code под русский язык. Выберите расширения, кликните Install и перезапустите редактор. У вас должен открыться русифицированный интерфейс.

Языковой пакет Russian Language Pack

Если после перезагрузки язык не изменился — на левой боковой панели нажмите значок шестерёнки и выберите раздел Command Palette. Появится строка поиска: напишите Display, выберите команду Configure Display Language и нажмите Enter. Смените язык с английского на русский и повторно перезагрузите редактор. 

Приветственное окно Visual Studio Code после установки языкового пакета

Меняем цветовую тему. В левой боковой панели нажмите на значок шестерёнки, перейдите в раздел «Цветовая тема» и выберите тему, встроенную в редактор. 

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

Анна Леонова рекомендует тему Night Owl — ночная сова. Её мы и поставили для теста

Добавляем любимый шрифт. В боковой панели нажмите на шестерёнку, выберите раздел «Параметры» → «Текстовый редактор» → «Шрифт». Перед вами будет вкладка Font Family, в которую нужно вписать название выбранного шрифта — если этот шрифт скачан или сохранён в операционной системе, то он сразу отобразится в редакторе. Здесь же можно изменить размер и жирность шрифта. 

Меняем стандартный шрифт Visual Studio Code на Courier New

Включаем автосохранение. В боковой панели выберите шестерёнку, перейдите в «Параметры» → «Текстовый редактор» → «Файлы». Вы увидите вкладку Auto Save, в которой нужно указать период сохранения файлов. Мы рекомендуем режим afterDelay с задержкой в одну секунду — так вы будете сразу сохранять всё, что запишете. Если вы выберете режим onFocusChange, то изменения в рабочем файле будут сохраняться каждый раз, когда вы будете открывать другие вкладки редактора. В режиме onWindowChange изменения происходят сразу после того, когда вы сворачиваете VS Code и открываете окна других программ.

Включаем режим автосохранения и делаем так, чтобы файлы сохранялись ежесекундно

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

Горячие клавиши — это помощник программиста и инструмент для быстрого выполнения рутинных задач. Предположим, нам нужно создать новый HTML-файл и написать его структуру. Без горячих клавиш этот процесс выглядит так: 

1. Переходим в меню и открываем вкладку «Файл». 
2. Выбираем команду «Новый файл».
3. Возвращаемся в меню и повторно открываем вкладку «Файл».
4. Находим команду «Сохранить как».    
5. Пишем название файла, выбираем место хранение, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
6. Вручную прописываем скелет HTML-документа или тратим время, чтобы найти и скопировать структуру из интернета. 

Мы превратили простую задачу в многоэтапный процесс, где нужно постоянно отрывать руки от клавиатуры, хвататься за мышку и искать нужные команды в выпадающем списке. Теперь посмотрим, как это же действие можно выполнить с помощью горячих клавиш. Для примера мы используем Mac OS — в других системах горячие клавиши будут немного отличаться, но сути это не меняет: 

1. Command + N — создаём новый файл. 
2. Shift + Command + S — включаем команду «Сохранить как».   
3. Пишем название файла, выбираем место хранения, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
4. ! + tab — создаём структуру HTML-документа и можем работать. 

С горячими клавишами мы сократили количество рутинных действий и быстро выполнили простую задачу — создали HTML-файл и написали структуру. В случае с объёмными проектами горячие клавиши помогают сэкономить часы работы. 

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

Для просмотра всех горячих клавиш нажмите в боковой панели на шестерёнку и выберите раздел «Сочетания клавиш». Или воспользуйтесь горячими клавишами и нажмите Command + K + Command + S. Перед вами появится длинный список с названием команд и комбинацией кнопок, которые установлены по умолчанию — любую команду можно перепрограммировать или найти с помощью поисковика. 

Что дальше

А дальше прочитайте нашу статью про Vim и подключите его к своему VSCode 🙂

Текст:

Саша Бабаскин

Редактор:

Максим Ильяхов

Корректор:

Ира Михеева

Иллюстратор:

Даня Берковский

Вёрстка:

Маша Дронова

Соцсети:

Олег Вешкурцев

настройка для запуска и отладки кода

Для написания реального проекта на Python не подойдет обычный текстовый редактор или стандартная IDLE. Чтобы упростить процесс написания кода, избежать глупых ошибок и получить все необходимые инструменты в одной «коробке», программисты используют специальные редакторы кода или профессиональные IDE.

Что такое Visual Studio Code

VS Code – это редактор кода, который поддерживает большинство популярных языков программирования. К его преимуществам можно отнести:

• Открытый исходный код.
• Большое количество плагинов.
• Небольшой размер и низкие требования к ресурсам компьютера.
• Поддержка большинства операционных систем.
• Автоматическое использование conda и виртуальных сред.
• Редактирование кода в Jupyter.

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

Установка

VS Code — кроссплатформенное приложение, его можно установить на любую популярную операционную систему.

Windows

Для установки на Windows необходимо:

1. Скачать установщик с официального сайта.
2. Запустить программу установки и следовать инструкциям.
3. Убедиться, что приложение доступно для использования. По умолчанию устанавливается в «…AppData\Local\Programs\Microsoft VS Code».

Linux

Зачастую VS Code есть в репозиториях. В этом случае достаточно выполнить команду в терминале: «sudo apt install vscode«.

Также возможен и следующий вариант установки:

1. Скачать .deb файл с официального сайта.
2. Запустить терминал из того каталога, в котором находится файл (или использовать команду «cd»).
3. Выполнить команду: «sudo apt install <file>.deb«, где <file> — имя скачанного файла.

MacOS

Для установки на MacOS нужно:

1. Скачать установщик для MacOS с официального сайта.
2. Дважды щёлкнуть на архив, чтобы открыть его содержимое.
3. Перетащить «Visual Studio Code.app» в приложения (Applications), чтобы сделать иконку доступной из панели запуска.
4. Добавить VS Code в Dock, для этого кликнуть правой кнопкой мыши по значку и выбрать в контекстном меню «Параметры» — «Сохранить в Dock».

Настройка для Python: полезные плагины

Для установки плагина необходимо:

1. Нажать на значок кубиков на левой панели — пункт «Extensions».
2. Ввести в поле поиска название необходимого расширения.
3. Открыть страницу расширения, для этого нажать на найденный результат.
4. Прочитать информацию о расширении и нажать зеленую кнопку «Install».

На экране выше выбрано установленное расширение. Его можно удалить (Uninstall) или отключить не удаляя (Disable).

Python (от Microsoft)

Расширение «Python» от компании Microsoft – это первое и главное расширения для программиста на Python.

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

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

autoDocstring (автор Nils Werner)

Плагин позволяет быстро создавать документацию для функций. Доступно несколько форматов документации: стандартная, Google, NumPy и другие.

Писать документацию для функций очень важно, потому что с её помощью другие программисты понимают, что делает функция и зачем она нужна. Для крупного проекта пишется огромный объем документации, расширение autoDocstring значительно упрощает этот процесс и экономит время программистов.

Code Runner (автор Jun Han)

Название расширения полностью описывает его назначение. С его помощью можно выполнять код (не только на языке Python) и выводить результаты в специальное встроенное окно.

Расширение позволяет не переключаться между редактором и терминалом, потому что результаты выводятся в специальное встроенное окно «OUTPUT».

Trailing Spaces by Shardul Mahadik (автор Shardul Mahadik)

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

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

• Предупреждение.
• Вопрос.
• «TODO» — сделать что-то.
• Особенности.

Djaneiro (автор Scott Barkman)

Коллекция сниппетов (фрагментов кода) для шаблонов, моделей и форм Django. Импортирован в VS Code из текстового редактора Sublime Text.

flask-snippets (автор cstrap)

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

Code Linting

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

Для того чтобы включить Linting в VS Code, его нужно установить через менеджер пакетов: «pip install pylint»

Запуск кода

Запустить код на Python можно не выходя из программы, процесс довольно удобен, но может отличаться в зависимости от установленных плагинов.

Стандартный запуск кода

Необходимо нажать в любое место файла правой кнопкой мыши и выбрать в контекстном меню пункт «Run Python File In Terminal» (можно воспользоваться зеленой кнопкой воспроизведения в правом верхнем углу).

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

Запуск кода с Code Runner

Если в VS Code добавлено расширение Code Runner, то запустить код можно:

• Нажав на кнопку «Run Code» в правом верхнем углу (которая заменит там кнопку стандартного запуска).
• Открыв контекстное меню правой кнопкой мыши на файле, который следует запустить и выбрав пункт «Run Code».
• Использовав сочетания клавиш «Ctrl+Alt+N».

В отличии от стандартного метода, Code Runner выводит результаты в специальное окно Output, а не в терминал. Кроме того, он также отображает информацию о коде ошибки и времени выполнения скрипта.

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

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

Тестирование

VS Code способен автоматически распознавать тесты, написанные с помощью unittest, pytest или Nose фреймворков.

Для того чтобы запустить существующий тест, необходимо открыть его в редакторе, нажать правой кнопкой мыши в любом месте файла и выбрать пункт «Run Current Test File». Программа предложит определить структуру и местоположение тестов в проекте, а также создать шаблон для тестов. Все указанные данные сохраняются в настройках рабочего пространства, в файле settings.json.

Тесты, входящие в проект, можно найти, нажав на нижний значок в нижнем меню (химический сосуд). Оттуда же с помощью зеленой двойной кнопки «плей» можно запустить все тесты.

Отладка

VS Code поддерживает все необходимые функции отладки кода:

• Автоматическое отслеживание переменных.
• Просмотр выражений.
• Точки останова.
• Контроль стека вызова.

Для запуска режима отладки нужно нажать клавишу «F5» или использовать одно из меню (в верхней или левой части экрана). После чего появится возможность выбрать объект отладки:

• Скрипт.
• Модуль.
• Веб-приложение django.
• Веб-приложение flask и т. д.

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

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

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

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

Для использования функций Git нужно открыть папку с проектом. После этого в боковом меню выбрать кнопку «Source Control». В нём выбираем «Initialize Repjsitory».

Тогда можно делать следующее:

• Записывать изменения в репозиторий.
• Добавлять и извлекать изменения из удаленных репозиториев.
• Создавать новые ветви и теги или проверять, существуют ли они.
• Просматривать и решать конфликты слияния;
• Просматривать различия между версиями.

Работа с виртуальной средой (virtualenv)

Виртуальная среда — это контекст (набор зависимостей) в котором выполняется проект. Любая среда прежде всего состоит из интерпретатора и некоторого количества установленных пакетов.

VS Code позволяет много полезных функций для работы с различными средами. По умолчанию Python использует интерпретатор по пути, находящемуся в системной переменной. Если нужно использовать конкретную среду, необходимо открыть палитру команд, нажав сочетание клавиш «Ctrl+Shift+P». Затем ввести туда команду «Python: Select Interpreter».

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

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

Заключение

VS Code – это легкий редактор кода, который может похвастаться мощным функционалом для написания кода на Python. Он подойдет не только для написания скриптов, но и для создания серьезных проектов.

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

Как я могу работать над одним и тем же кодом с моим другом в vs code?

Я и мой друг хотим создать сайт. Мы используем Vs-код. Как мы можем работать с одним и тем же кодом в vs code? Я ищу что-то, что позволит мне редактировать код в любое время, когда я захочу, и то же самое для него.

visual-studio-code

version-control

Поделиться

Источник


Bryt Brode    

11 июня 2020 в 17:27

5 ответов



1


Использовать GitHub


GitHub-это платформа разработки, вдохновленная тем, как вы работаете. От открытого исходного кода до бизнеса вы можете размещать и просматривать код, управлять проектами и создавать программное обеспечение вместе с 50 миллионами разработчиков.

Github-это веб-платформа, используемая для контроля версий. Git упрощает процесс работы с другими людьми и облегчает совместную работу над проектами. Члены команды могут работать с файлами и легко объединять их изменения.
Вы определенно должны сделать свой аккаунт на github в качестве разработчика, так как это очень помогает.

Проверьте это здесь: https://github.com

Поделиться


Soban    

11 июня 2020 в 17:31


1


Вы можете использовать https://github.com/ . Как только вы закончите делать свой код, вы должны загрузить его на github . Так же, как ваш друг может сделать. И самое главное, вы можете увидеть/отменить свой предыдущий код, если сделаете что-то не так.

Поделиться


Samon    

11 июня 2020 в 17:44


0


Это самоуверенный вопрос и ответ, но поскольку вы используете VsCode, я бы рекомендовал Microsoft Live Share . Поскольку Microsoft является создателем VsCode, я бы предположил, что это будет ваш лучший вариант остаться в Редакторе.

Visual Studio Live Share позволяет вам совместно редактировать и отлаживать данные с другими пользователями в режиме реального времени, независимо от того, какие языки программирования вы используете или какие типы приложений создаете. Он позволяет вам мгновенно (и безопасно) поделиться своим текущим проектом, а затем, при необходимости, поделиться сеансами отладки, экземплярами terminal, веб-приложениями localhost, голосовыми вызовами и многим другим! Разработчики, которые присоединяются к вашим сеансам, получают весь свой контекст редактора из вашей среды (например, языковые службы, отладка), что гарантирует, что они могут начать продуктивно сотрудничать немедленно, без необходимости клонировать какие-либо репозитории или устанавливать какие-либо SDKs.

Кроме того, в отличие от традиционного парного программирования, Visual Studio Live Share позволяет разработчикам работать вместе, сохраняя при этом свои личные предпочтения редактора (например, тему, привязки клавиш), а также иметь свой собственный курсор. Это позволяет вам легко переходить между следованием друг за другом и возможностью самостоятельно исследовать идеи/задачи. На практике эта способность работать вместе и независимо обеспечивает опыт совместной работы, который потенциально более естественен для многих распространенных случаев использования.

Поделиться


Jeremy Lucas    

11 июня 2020 в 17:31

• Есть ли инструмент для Visual C++ или другой IDE, который позволил бы более чем 1 программисту (онлайн) работать над одним и тем же проектом одновременно?

  Итак, есть ли способ поделиться всей средой, редактировать, компилировать и выполнять свой код в одном общем окне с моим другом-программистом, находящимся в 200 милях от меня ? Например, я начинаю онлайн-сессию, мой друг присоединяется к ней, и его IDE синхронизирует все настройки и исходные файлы…

• Насколько большая команда может работать над одним и тем же проектом

  Я знаю, как работает git. Но как мне получить архитектуру, чтобы большая команда могла работать над одним и тем же проектом без конфликтов? Есть ли в этом что-нибудь book/tutorial/example?


0


Ну, я бы рекомендовал GitHub, это отличный инструмент. Если вы хотите учиться на видео, я бы рекомендовал это видео . Или прочтите эту статью .

Поделиться


Dima Bors    

11 июня 2020 в 17:36


0


Лучший способ-это живая доля

Live Share- это расширение для VS Code, которое обеспечивает совместную работу разработчиков в режиме реального времени. Это дает пользователям возможность совместно использовать сеанс с кем-то еще, позволяя им редактировать код, а также совместно использовать сеанс разъединения и отладки

Поделиться


abadou    

11 июня 2020 в 17:37

Похожие вопросы:

Могут ли два человека одновременно работать над одним и тем же проектом javascript?

я и мой друг разработали эту игру в 18-часовом соревновании в пятницу, и мы должны использовать javascript (я не знаю почему), и это не очень приятно работать над одним и тем же проектом с двух…

два программиста работают над одним и тем же кодом

Я работаю над каким — то кодом PHP с партнером, и оба они запускали сервер LAMP (или в моем случае-MAMP) локально на наших машинах. Есть ли какой-то способ, которым мы оба можем работать…

Разрешить двум разработчикам работать над одним и тем же файлом одновременно

Помимо очевидного выбора GitHub, $7 в месяц, я искал бесплатный простой способ для двух разработчиков работать над одним и тем же файлом и вносить независимые изменения, не перезаписывая другие…

Как работать в команде на FlexBuilder

Поскольку мы с моим другом работаем над одним и тем же исходным кодом проекта на flex builder, я ищу решение, которое позволяет работать на разных компьютерах и редактировать один и тот же исходный…

Сколько человек могут одновременно работать над одним и тем же файлом, добавленным в репозиторий Tortioise SVN?

Сколько человек могут одновременно работать над одним и тем же файлом, добавленным в репозиторий Tortioise SVN?

Есть ли инструмент для Visual C++ или другой IDE, который позволил бы более чем 1 программисту (онлайн) работать над одним и тем же проектом одновременно?

Итак, есть ли способ поделиться всей средой, редактировать, компилировать и выполнять свой код в одном общем окне с моим другом-программистом, находящимся в 200 милях от меня ? Например, я начинаю…

Насколько большая команда может работать над одним и тем же проектом

Я знаю, как работает git. Но как мне получить архитектуру, чтобы большая команда могла работать над одним и тем же проектом без конфликтов? Есть ли в этом что-нибудь book/tutorial/example?

Как два человека могут работать над одним и тем же проектом, используя GitHub

У меня есть учетная запись git hub, я создал один проект и отправил его в свой онлайн-репозиторий git hub после того, как один из моих друзей вошел в систему со своей учетной записью git hub и fork…

Можно ли работать с одним и тем же файлом TFS одним и тем же пользователем ID в разных местах в одно и то же время

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

Что такое утилита split editor с тем же кодом в коде VS

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

Как настроить код Visual Studio для Salesforce

Visual Studio Code рекомендуется IDE для разработки Salesforce. В этом посте мы узнаем, как настроить Visual Studio Code для разработки Salesforce. Мы изучим возможности VS Code, настроим и настроим его, чтобы использовать его в качестве мощного инструмента для разработки Salesforce.

Шаг 1) Загрузите и установите VsCode

Загрузите код Visual Studio отсюда и установите на свой компьютер.

Шаг 2) Установите Salesforce DX CLI

Для подключения VsCode к организации Salesforce нам потребуется интерфейс командной строки SalesforceDX. Загрузите интерфейс командной строки Salesforce отсюда.

После установки Salesforce CLI. Вы можете проверить то же самое с помощью команды sfdx в терминале командной строки. Проверьте этот пост, если хотите узнать больше о Salesforce CLI

.

Шаг 3) Установите пакет расширений Salesforce

Мы почти у цели. Откройте свой VsCode и щелкните значок расширений слева или нажмите CTRL + SHIFT + X. Затем найдите « Salesforce Extension Pack » и нажмите кнопку «Установить»

.

С пакетом расширений Salesforce все указанные ниже расширения устанавливаются автоматически.

• Apex
• Интеграция интерфейса командной строки Salesforce
• Интерактивный отладчик Apex
• Отладчик воспроизведения Apex
• Visualforce
• Компоненты Aura
• Веб-компонент Lightning

Шаг 4) Создание проекта

Поздравление. На этом этапе настройка вашего программного обеспечения завершена. Пришло время создать свой первый проект в VsCode. Чтобы создать проект, откройте Command Palette или нажмите Ctrl + Shit + P. Затем введите SFDX: Создать проект с манифестом .

SFDX: Создать проект с манифестом

Затем укажите имя своего проекта и выберите место, где вы хотите сохранить свой проект.

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

.

Шаг 5) Свяжитесь с вашей организацией Salesforce

Наш проект готов на нашей локальной машине. Пришло время подключить наш VsCode к Salesforce.Снова откройте Command Palette или нажмите Ctrl + Shit + P. На этот раз нам нужно ввести или выбрать « SFDX: Authorize an Org ».

SFDX: авторизуйте организацию

Затем он спросит вас, в какой среде нам нужно подключиться к

На последнем этапе вам нужно указать псевдоним организации. Затем он перенесет вас в браузер по умолчанию и попросит ввести учетные данные организации. Если будет предложено разрешить доступ, нажмите Разрешить

До этого момента ваша организация Salesforce подключена к VsCode.Теперь пришло время для развития.

Шаг 6) Получить компонент

Теперь вы хотите извлечь весь компонент Salesforce в свой VsCode? Откройте файл Package.xml из папки Manifest . Затем измените файл Package.xml, чтобы добавить и удалить компонент. Наконец, щелкните Package.xml и выберите вариант

« SFDX: Получить этот источник из организации ».

SFDX: Получить этот источник из организации

Он получит все метаданные из вашей организации, которые указаны в вашем пакете.xml файл

Шаг 7) Разверните компонент

Откройте любой файл и работайте со своим компонентом. ЕСЛИ вы хотите узнать, как создать веб-компонент Lightning, проверьте этот пост. Теперь внесите изменения в VSCode, а затем выберите файл, который вы хотите развернуть в своей организации. Затем щелкните правой кнопкой мыши VsCode и выберите параметр « SFDC: Deploy This Source to Org » для развертывания.

Запись

Если вы хотите узнать, как использовать VsCode в облаке, проверьте этот пост.

Амит Чаудхари

Амит Чаудхари (Amit Chaudhary) — архитектор приложений и систем Salesforce, работает над платформой Salesforce с 2010 года. Он является MVP Salesforce с 2017 года и имеет 17 сертификатов Salesforce.

Он активный блогер и основатель Apex Hours.

Поделиться:

• Нажмите, чтобы поделиться в Twitter (Открывается в новом окне)
• Нажмите, чтобы поделиться в Facebook (Открывается в новом окне)

Превратите код Visual Studio в лучший редактор для разработки WordPress

Если вы используете множество доступных текстовых редакторов и инструментов для разработчиков, возможно, вы слышали о Microsoft Visual Studio Code.VS Code — это бесплатный редактор с открытым исходным кодом, который является легким, как Sublime Text, но предлагает многие из тех же функций, что и более крупные IDE, такие как PhpStorm или WebStorm.

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

Базовая установка для разработки WordPress

В большинстве случаев при кодировании в WordPress вы будете работать либо над плагином, либо над темой. Один из способов сделать это — открыть этот плагин или тему в своей среде IDE и начать писать код.Однако есть способ лучше — с помощью VS Code «Рабочие области».

Вы можете думать о рабочей области в VS Code как о контейнере для вашего проекта — она ​​не только включает ваш проект, но и может включать файлы, на которые опирается ваш проект (ваша установка WordPress), а также любые расширения или настройки, специфичные для этого проекта.

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

В моем случае большую часть времени я трачу на разработку плагинов. Итак, у меня будет папка Projects , в которой находятся все плагины, над которыми я работаю, и папка Sites , содержащая все мои сайты. Затем я создаю символическую ссылку на плагин, над которым я работаю, на новый веб-сайт WordPress в папке Sites.

В Visual Studio Code я сначала открою сам плагин, а затем добавлю сайт WordPress, выбрав Файл -> Добавить папку в рабочую область .Это создает новую рабочую область, где я могу редактировать плагин и установку WordPress одновременно.

Это удобно для быстрого редактирования файла wp-config.php и отслеживания файла debug.log во время разработки.

Затем нажмите Файл -> Сохранить рабочее пространство как , чтобы сохранить это рабочее пространство. Это создает файл * .code-workspace , который вы можете использовать для повторного открытия рабочего пространства в будущем, а также служит файлом конфигурации, который пригодится позже.

Более глубокая интеграция PHP и WordPress

Разобравшись с этим, давайте посмотрим, как можно улучшить работу Visual Studio Code и WordPress. По умолчанию VS Code не поддерживает WordPress и PHP, а также некоторые другие IDE, такие как PhpStorm (узнайте, как некоторые из нашей команды используют PhpStorm для разработки WordPress). К счастью, это легко изменить, установив некоторые расширения.

Поскольку WordPress по-прежнему в основном PHP, я использую расширение PHP Intelephense, которое добавляет автозаполнение PHP, поддержку навигации по символам и гораздо лучший способ поиска ссылок в вашем рабочем пространстве.

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

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

Отладка PHP

xDebug — бесценный инструмент для отладки PHP, но его сложно настроить. К счастью, VS Code упрощает настройку xDebug, и в моем случае работает просто .

Вам нужно только установить расширение PHP Debug и перезагрузить редактор. Затем вы можете перейти на вкладку «Выполнить» и щелкнуть «создать файл launch.json», чтобы создать новую конфигурацию отладки PHP.

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

Выберите «рабочее пространство», чтобы вставить новую конфигурацию в ваш *.code-workspace , а затем «PHP», чтобы добавить конфигурацию PHP. Это добавит в этот файл некоторую конфигурацию отладки, включая новую опцию «Listen for XDebug». Здесь вы можете отредактировать имя конфигурации или изменить порт XDebug.

  {
    "name": "Слушайте XDebug",
    "тип": "php",
    "запрос": "запуск",
    «порт»: 9000
},
  

В моем случае он также добавил конфигурацию «Запуск текущего открытого скрипта». В WordPress нам редко нужно загружать файл PHP напрямую, поэтому я просто удалил этот файл config.

Вот и все! Отсюда вы сможете начать отладку PHP. Перейдите к файлу PHP в своем плагине или теме WordPress и щелкните слева от номера строки, чтобы добавить в эту строку точку останова.

Когда вы вернетесь на вкладку «Выполнить», выберите «Слушать XDebug» в раскрывающемся списке и щелкните значок воспроизведения, чтобы начать прослушивание запросов. Когда ваш код достигает этой точки останова, среда выполнения должна остановиться, и вы сможете увидеть все переменные, стек вызовов и многое другое.Кто знал, что отладка WordPress в Visual Studio Code может быть такой простой?

Отладка JavaScript

Отладка PHP — это только половина проблемы — нам также нужно уметь отлаживать JavaScript. Поскольку я использую Mozilla Firefox в качестве основного браузера, я установил расширение Debugger for Firefox, которое интегрирует VS Code с Firefox.

Затем вам нужно отредактировать * .code-workspace добавить конфигурацию для JS:

  {
    "name": "Слушайте JS",
    "тип": "firefox",
    "запрос": "запуск",
    "url": "http: // ваш сайт.dev ",
    "webRoot": "/ путь / к / вашему / сайту / корню",
}
  

После того, как это будет добавлено, вы должны увидеть опцию Listen for JS в раскрывающемся списке отладки:

Для справки, вот мой файл mdb.code-workspace на данный момент:

  {
"папки": [
    {
    «путь»: «wp-migrate-db-pro»
    },
    {
    "путь": "/ Пользователи / mattshaw / Sites / mdb / app / public"
    }
],
"запуск": {
    "версия": "0.2,0 ",
    "конфигурации": [
    {
        "тип": "firefox",
        "запрос": "запуск",
        "name": "Слушайте JS",
        "url": "http: //mdb.test",
        "webRoot": "/ Пользователи / mattshaw / Sites / mdb / app / public"
    },
    {
        "name": "Слушайте XDebug",
        "тип": "php",
        "запрос": "запуск",
        «порт»: 9000
    }
    ]
}
}
  

Попался

Если вы используете что-то вроде Webpack для объединения файлов JS, вы можете заметить, что точки останова не работают.Вы можете использовать параметр sourceMapPathOverrides в файле * .code-workspace , чтобы вручную правильно сопоставить пути к файлам, но отладчик для Firefox предлагает более простое решение.

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

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

Теперь можно легко отлаживать JS из VS Code, используя тот же пользовательский интерфейс, который используется для xDebug:

Другие советы

Я встречал некоторые другие важные расширения, которые были полезны в повседневной разработке. Расширение Git Lens добавляет простые аннотации git blame к строке, над которой вы сейчас работаете. Эта однострочная аннотация git blame работает заметно быстрее, чем реализация PhpStorms, которая пытается работать со всем файлом сразу.К сожалению, у него нет интеграции с GitHub, но даже без него я все равно считаю, что его достаточно удобно держать под рукой.

Расширение PHP DocBlocker очень полезно для блокирования документов. Просто введите / ** над функцией, методом или классом, и он автоматически заполнит докблок на основе параметров функции / метода.

Расширение Prettier отлично подходит для очистки кода CSS, JS и HTML при сохранении редактора.

Если вы работаете с большим количеством современных JS, также стоит установить расширение Babel ES6 / ES7, которое добавляет подсветку синтаксиса для ES6 / ES7.У меня также установлен плагин Instant Markdown, который я использовал для написания этого поста, и это отличный способ предварительного просмотра вашей уценки в браузере.

Заключительные мысли

После трех лет использования я все еще люблю VS Code. Как будто он взял мои любимые функции PhpStorm и Sublime Text и объединил их, чтобы создать идеальную среду IDE (посмотрите, как она превосходит другие PHP IDE / редакторы для разработки WordPress в нашем сравнении). Мне также очень нравится, как вы можете устанавливать расширения прямо из VS Code и просматривать документацию по этому расширению, не выходя из редактора.

С тех пор я удалил PhpStorm и Sublime Text из своей док-станции и не планирую возвращать их.

Вы уже пробовали VS Code? Что ты подумал? Дайте нам знать об этом в комментариях.

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 / GitHub Codespaces.

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

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

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

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

Лицензия

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

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

Использование расширения Teamwork в Visual Studio Code

Visual Studio Code — это редактор кода, оптимизированный для создания и отладки веб-приложений и облачных приложений.

В Visual Studio Code вы можете
взаимодействовать с задачами из ваших проектов
прямо из приложения через расширение Teamwork.

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

Примечание: Если
вы работаете в репозитории Github,
вновь созданная задача будет иметь прямую
ссылка на точную строчку в Github.

После установки расширения Teamwork в VSCode выберите
значок совместной работы от
левую боковую панель и щелкните профиль пользователя
значок в верхней части расширения.

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

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

После того, как вы нажмете ОК (или
нажмите Введите на вашем
клавиатура) появятся выбранные проекты
в списке слева.

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

Просмотр существующей задачи совместной работы


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

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

Создание задачи из строки
код


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

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

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

Комментарий также будет добавлен в ваш
файл кода с подробным описанием созданной задачи.

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

При нажатии на задачу откроются сведения о задаче
панель в правой части VSCode.

В командной работе вы увидите
задача создана в выбранной задаче
список. Описание задачи будет включать
подробности из VSCode.

Добавление комментария к
существующий
задача


Чтобы добавить комментарий к задаче,
нажмите Добавить комментарий в
внизу панели, чтобы открыть комментарий
коробка.Нажмите Отправить , чтобы добавить
прокомментируйте задачу в Teamwork.

При просмотре задачи в Teamwork вы увидите, что комментарий был
добавлен в задачу.

Разработка Python в Visual Studio Code — Настоящий Python

Один из самых крутых редакторов кода, доступных программистам, Visual Studio Code — это расширяемый, легкий редактор с открытым исходным кодом, доступный на всех платформах. Именно эти качества делают Visual Studio Code от Microsoft очень популярным и прекрасной платформой для разработки на Python.

Из этой статьи вы узнаете о разработке Python в Visual Studio Code, в том числе о том, как:

• Установить код Visual Studio
• Найдите и установите расширения, упрощающие разработку Python
• Напишите простое приложение Python
• Узнайте, как запускать и отлаживать существующие программы Python в VS Code
• Подключите код Visual Studio к Git и GitHub, чтобы поделиться своим кодом со всем миром

Мы предполагаем, что вы знакомы с разработкой Python и уже установили некоторую форму Python в вашей системе (Python 2.7, Python 3.6 / 3.7, Anaconda или другие). Предоставляются скриншоты и демонстрации для Ubuntu и Windows. Поскольку Visual Studio Code работает на всех основных платформах, вы можете увидеть немного разные элементы пользовательского интерфейса и, возможно, потребуется изменить определенные команды.

Бесплатный бонус: 5 мыслей о Python Mastery, бесплатный курс для разработчиков Python, который показывает вам план действий и образ мышления, которые вам понадобятся, чтобы вывести свои навыки Python на новый уровень.

Установка и настройка кода Visual Studio для разработки на Python

Установка Visual Studio Code очень доступна на любой платформе.Доступны полные инструкции для Windows, Mac и Linux, а редактор ежемесячно обновляется новыми функциями и исправлениями ошибок. Вы можете найти все на сайте Visual Studio Code:

На случай, если вам интересно, Visual Studio Code (или сокращенно VS Code) не имеет почти ничего, кроме имени, со своим более крупным тезкой на базе Windows, Visual Studio.

Visual Studio Code имеет встроенную поддержку нескольких языков и модель расширения с богатой экосистемой поддержки других.VS Code обновляется ежемесячно, и вы можете быть в курсе событий в блоге Microsoft Python. Microsoft даже делает репозиторий VS Code на GitHub доступным для клонирования и внесения вклада. (Сигнал к пиару.)

Пользовательский интерфейс VS Code хорошо документирован, поэтому я не буду его здесь повторять:

Расширения для разработки на Python

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

Расширения Visual Studio Code охватывают не только возможности языка программирования:

Вот еще несколько расширений и настроек, которые мне пригодятся:

• GitLens предоставляет множество полезных функций Git прямо в окне редактирования, включая аннотации обвинений и функции исследования репозитория.

• Автосохранение легко включить, выбрав в меню Файл, Автосохранение . Время задержки по умолчанию составляет 1000 миллисекунд, которое также можно настроить.

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

• Docker позволяет быстро и легко работать с Docker, помогая автору Dockerfile и docker-compose.yml , упакуйте и разверните свои проекты и даже создайте подходящие файлы Docker для вашего проекта.

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

Чтобы открыть и установить новые расширения и темы, щелкните значок Extensions на панели действий. Вы можете искать расширения по ключевым словам, сортировать результаты различными способами и быстро и легко устанавливать расширения.В этой статье установите расширение Python, набрав python в элементе Extensions на панели действий и нажав Установить :

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

Файлы конфигурации кода Visual Studio

Важно отметить, что Visual Studio Code легко настраивается с помощью параметров пользователя и рабочей области.

Пользовательские настройки являются глобальными для всех экземпляров Visual Studio Code, а настройки рабочей области являются локальными для конкретной папки или рабочей области проекта.Настройки рабочего пространства придают VS Code огромную гибкость, и в этой статье я буду рассказывать о настройках рабочего пространства. Параметры рабочего пространства хранятся в виде файлов .json в локальной папке рабочего пространства проекта с именем .vscode .

Начать новую программу Python

Давайте начнем наше исследование разработки Python в Visual Studio Code с новой программы Python. В VS Code введите Ctrl + N , чтобы открыть новый файл. (Вы также можете выбрать в меню File, New .)

Примечание. Пользовательский интерфейс кода Visual Studio предоставляет палитру команд, с помощью которой вы можете искать и выполнять любую команду, не покидая клавиатуры. Откройте палитру команд, используя Ctrl + Shift + P , введите File: New File и нажмите Enter , чтобы открыть новый файл.

Независимо от того, как вы туда попали, вы должны увидеть окно VS Code, которое выглядит примерно так:

После открытия нового файла вы можете начать вводить код.

Ввод кода Python

Для нашего тестового кода давайте быстро закодируем решето Эратосфена (которое находит все простые числа меньше заданного числа). Начните вводить следующий код в только что открытой вкладке:

  сито = [Истина] * 101
для i в диапазоне (2, 100):
  

Вы должны увидеть что-то похожее на это:

Подождите, что происходит? Почему Visual Studio Code не выделяет ключевые слова, не выполняет автоматическое форматирование или что-то действительно полезное? Что дает?

Ответ заключается в том, что сейчас VS Code не знает, с каким файлом он имеет дело.Буфер называется Untitled-1 , и если вы посмотрите в нижний правый угол окна, вы увидите слова Plain Text .

Чтобы активировать расширение Python, сохраните файл (выбрав Файл, Сохранить в меню, Файл: Сохранить файл из палитры команд или просто используя Ctrl + S ) как sieve.py . VS Code увидит расширение .py и правильно интерпретирует файл как код Python. Теперь ваше окно должно выглядеть так:

Это намного лучше! VS Code автоматически переформатирует файл как Python, что вы можете проверить, проверив языковой режим в нижнем левом углу.

Если у вас несколько установок Python (например, Python 2.7, Python 3.x или Anaconda), вы можете изменить, какой интерпретатор Python использует VS Code, щелкнув индикатор языкового режима или выбрав Python: выберите Interpreter из палитры команд. VS Code по умолчанию поддерживает форматирование с использованием pep8 , но вы можете выбрать black или yapf , если хотите.

Давайте добавим остаток кода Sieve. Чтобы увидеть, как работает IntelliSense, введите этот код напрямую, а не вырезайте и вставьте, и вы должны увидеть что-то вроде этого:

Вот полный код базового Сита Эратосфена:

  сито = [Истина] * 101
для i в диапазоне (2, 100):
    если сито [i]:
        печать (я)
        для j в диапазоне (i * i, 100, i):
            решето [j] = Ложь
  

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

Запуск кода Python

Теперь, когда код готов, вы можете его запустить. Для этого не нужно выходить из редактора: Visual Studio Code может запускать эту программу прямо в редакторе. Сохраните файл (используя Ctrl + S ), затем щелкните правой кнопкой мыши в окне редактора и выберите Run Python File in Terminal :

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

Опора Python Linting

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

• пиллинт
• хлопья 8
• mypy
• пидокстиль
• pep8
• изыскатель
• пыляма
• бандит

На странице линтинга Python есть полная информация о том, как настроить каждый линтер.

Примечание : Выбор линтера — это настройка рабочего пространства проекта, а не глобальная пользовательская настройка.

Редактирование существующего проекта Python

В примере «Сито Эратосфена» вы создали один файл Python. Это замечательный пример, но во многих случаях вы будете создавать более крупные проекты и работать над ними в течение более длительного периода времени. Типичный рабочий процесс нового проекта может выглядеть так:

• Создать папку для хранения проекта (который может включать новый проект GitHub)
• Перейти в новую папку
• Создайте исходный код Python с помощью команды code filename.ру

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

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

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

После того, как папка будет создана локально, вы можете быстро открыть всю папку в VS Code. Мой предпочтительный метод (как упоминалось выше) изменен следующим образом, поскольку у меня уже есть папка и основные файлы:

  cd / путь / к / проекту
код.
  

VS Code понимает и будет использовать любые среды virtualenv, pipenv или conda, которые он видит при открытии таким образом. Вам даже не нужно сначала запускать виртуальную среду! Вы даже можете открыть папку из пользовательского интерфейса, используя File, Open Folder из меню, Ctrl + K , Ctrl + O с клавиатуры или File: Открыть папку из Command Палитра.

Вот что я вижу в моем проекте библиотеки уравнений eval:

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

Поддержка тестирования

VS Code может автоматически распознавать существующие тесты Python, написанные в среде unittest или в платформах pytest или Nose , если эти платформы установлены в текущей среде.У меня есть модульный тест, написанный в unittest для библиотеки eval eval, который вы можете использовать в этом примере.

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

Все они сохраняются как настройки рабочего пространства в локальном .vscode / settings.json и его можно там изменить. Для этого проекта уравнения вы выбираете unittest , текущую папку и шаблон * _test.py .

После того, как среда тестирования настроена и тесты были обнаружены, вы можете запустить все свои тесты, щелкнув Run Tests в строке состояния и выбрав параметр на палитре команд:

Вы даже можете запускать отдельные тесты, открыв тестовый файл в VS Code, нажав Run Tests в строке состояния и выбрав Run Unit Test Method… и конкретный тест для запуска.Это делает тривиальным устранение ошибок отдельных тестов и повторный запуск только неудачных тестов, что значительно экономит время! Результаты тестирования показаны на панели Выход под Протокол тестирования Python .

Поддержка отладки

Несмотря на то, что VS Code является редактором кода, возможна отладка Python непосредственно в VS Code. VS Code предлагает многие функции, которые вы ожидаете от хорошего отладчика кода, в том числе:

• Автоматическое отслеживание переменных
• Смотреть выражения
• Точки останова
• Проверка стека вызовов

Вы можете увидеть их все как часть представления Debug на панели действий:

Отладчик может управлять приложениями Python, работающими во встроенном терминале или экземпляре внешнего терминала.Он может подключаться к уже запущенным экземплярам Python и даже может отлаживать приложения Django и Flask.

Отладить код в одном файле Python так же просто, как запустить отладчик с помощью F5 . Используйте F10 и F11 для перехода и перехода к функциям соответственно и Shift + F5 для выхода из отладчика. Точки останова устанавливаются с помощью F9 или с помощью мыши, щелкая в левом поле в окне редактора.

Перед тем, как начать отладку более сложных проектов, включая приложения Django или Flask, вам необходимо настроить, а затем выбрать конфигурацию отладки.Настройка конфигурации отладки относительно проста. В представлении Debug выберите раскрывающийся список Configuration , затем Add Configuration и выберите Python :

Visual Studio Code создаст файл конфигурации отладки в текущей папке с именем .vscode / launch.json , который позволяет вам настроить определенные конфигурации Python, а также параметры для отладки определенных приложений, таких как Django и Flask.

Вы даже можете выполнять удаленную отладку и отлаживать шаблоны Jinja и Django.Закройте файл launch.json в редакторе и выберите правильную конфигурацию для своего приложения в раскрывающемся списке Configuration .

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

VS Code имеет встроенную поддержку управления исходным кодом и поставляется с поддержкой Git и GitHub прямо из коробки. Вы можете установить поддержку других SCM в VS Code и использовать их одновременно. Управление исходным кодом доступно из окна управления исходным кодом Представление :

Если папка вашего проекта содержит файл .git VS Code автоматически включает все функции Git / GitHub. Вот некоторые из множества задач, которые вы можете выполнить:

Все эти функции доступны непосредственно из пользовательского интерфейса VS Code:

VS Code также распознает изменения, внесенные вне редактора, и будет вести себя соответствующим образом.

Фиксация последних изменений в VS Code — довольно простой процесс. Измененные файлы отображаются в представлении Source Control с маркером M , а новые неотслеживаемые файлы помечаются с помощью U .Внесите изменения, наведя указатель мыши на файл и щелкнув знак плюса ( + ). Добавьте сообщение фиксации вверху представления, а затем щелкните галочку, чтобы зафиксировать изменения:

Вы также можете отправлять локальные коммиты на GitHub из VS Code. Выберите Sync из меню просмотра Source Control или щелкните Synchronize Changes в строке состояния рядом с индикатором ветви.

Заключение

Visual Studio Code — один из самых крутых универсальных редакторов и отличный кандидат для разработки на Python.Из этой статьи вы узнали:

• Как установить VS Code на любую платформу
• Как найти и установить расширения для включения специфичных для Python функций
• Как VS Code упрощает написание простого приложения Python
• Как запускать и отлаживать существующие программы Python в VS Code
• Как работать с репозиториями Git и GitHub из VS Code

Visual Studio Code стал моим редактором по умолчанию для Python и других задач, и я надеюсь, что вы дадите ему шанс стать вашим.

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

Автор благодарит Дэна Тейлора из команды Visual Studio Code в Microsoft за потраченное время и неоценимый вклад в эту статью.

Код

Visual Studio может это сделать? — Smashing Magazine

Краткое резюме ↬

Почему 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 вы можете экспортировать все свои настройки VS Code в Gist, а затем вытащить их из другой установки VS Code и сразу применить.

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

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

Эммет

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 внутри пакета .json . Нужен конкретный пакет, но вы не помните его версию? Без проблем! VS Code просмотрит npm и вернет самую последнюю версию в intellisense.

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

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

Тип Проверьте свой 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 включен в 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 Поделиться

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

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

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

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

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

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

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

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

Узел нулевой конфигурации.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 для настройки непрерывной доставки.

Да, VS Code может это сделать

К настоящему времени вы, вероятно, поняли, что на самом деле VS Code ничего не может сделать. Если вам нужна определенная функциональность, весьма вероятно, что либо редактор уже поддерживает ее (мы даже не касались интеграции Git), либо кто-то создал расширение для вашего конкретного варианта использования.Даже если это превратит Markdown в презентации Reveal.js!

Дополнительные ресурсы

(да, ра, иль)

Как использовать Live Share с Visual Studio Code

Введение

Live Share - это расширение для VS Code, которое обеспечивает сотрудничество между разработчиками в реальном времени. Это дает пользователям возможность совместно использовать сеанс с кем-то еще, позволяя им редактировать код, а также совместно использовать сеанс сервера и отладки.

Начало работы

1. Установите расширение Live Share
2. Открыть палитру команд
3. Начать Live Поделиться
4. Поделиться ссылкой

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

Шаг 1. Загрузка расширения

Самый первый шаг к использованию Live Share - установить его как расширение. В VS Code вы можете открыть вкладку extensions , выполнить поиск Live Share, нажать кнопку «Установить» и затем перезагрузить, когда установка будет завершена.

После этого вам нужно будет войти в систему. На данный момент вы можете выбрать для входа учетную запись Microsoft или Github.

Для входа используйте кнопку Войти в нижней строке состояния со значком человека.

Шаг 2 - Совместное использование и присоединение к сеансу

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

Для начала щелкните свое имя пользователя в нижней строке состояния и выберите Начать сеанс совместной работы из доступных вариантов. Кроме того, вы можете открыть палитру команд ( CMD + SHIFT + P на Mac, CTRL + SHIFT + P в Windows) и ввести Start Collaboration Session

Вы получите уведомление о том, что ссылка для приглашения скопирована в буфер обмена.

Поделитесь этой ссылкой с кем-нибудь, чтобы пригласить их на сеанс.

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

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

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

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

Шаг 3 - Ограничение соавторов

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

Создайте файл .vsls.json , чтобы ограничить количество соавторов. Базовая конфигурация будет выглядеть примерно так:

.vsls.json

  {
    "$ schema": "http://json.schemastore.org/vsls",
    "gitignore": "нет",
    "excludeFiles": [],
    "hideFiles": []
}
  

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

Шаг 4. Совместное использование сервера

Может быть сложно поделиться с другими при работе над приложением локально. Вы можете проверить код в GitHub и клонировать другого человека, но тогда ему все равно придется устанавливать зависимости и запускать сервер самостоятельно. С помощью Live Share вы можете запустить сервер локально, а другой человек может получить доступ к тому же запущенному приложению.

В качестве приглашающего запустите свой сервер как обычно.Затем щелкните имя пользователя в нижней строке состояния и выберите Share Server . Либо откройте палитру команд и введите Share Server .

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

Шаг 5 - Совместное использование терминала

Может быть сценарий, в котором вы хотите научить кого-нибудь командам в терминале, например, как перемещаться по файловой системе, работать с npm , запускать сервер разработки и т. Д.Как и в случае с описанными выше функциями, это может быть сложно сделать удаленно. Live Share также включает функцию совместного использования терминала для решения этой проблемы.

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

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

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

Заключение

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