Vs code как пользоваться: Страница не найдена | Losst

Содержание

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++ . Он предлагает немного важной помощи при кодировании с такими функциями, как раскраска синтаксиса, автоматическое отступление и базовое автозаполнение. При обучении программированию важно не перегружаться информацией и помощью.

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

Visual Studio IDE
NetBeans
Eclipse
IntelliJ IDEA

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

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

Sublime Text: июль 2013
Atom.io: июнь 2015
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 разделен на пять основных областей, которые вы можете легко настроить.

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

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

Command Prompt
PowerShell
PowerShell Core
Git Bash
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:

Git Lens
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+,. Вы также можете получить к нему доступ через команду меню следующим образом:

В Windows / Linux — File > Preferences > Settings
В macOS — Code > Preferences > Settings

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

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

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

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

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

Windows: %APPDATA%\Code\User\settings.json
macOS: $HOME/Library/Application Support/Code/User/settings.json
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 .

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

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

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

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

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

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

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

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

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

JavaScript, TypeScript
HTML
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. Вы также можете создать свой собственный.

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

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

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

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

JavaScript
TypeScript
JSON
HTML

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

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

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

"html.format.enable": false

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

Flow · JSX · JSON
CSS · SCSS · Less
Vue · Angular
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 с помощью WSL

05/28/2020

Чтение занимает 4 мин

В этой статье

Visual Studio Code, вместе с расширением Remote-WSL, позволяет использовать WSL в качестве среды разработки для полной времени непосредственно из VS Code. Можно сделать следующее:

Разработка в среде под управлением Linux
Использование цепочек инструментов и служебных программ для Linux
Запуск и отладка приложений Linux с помощью Windows с сохранением доступа к средствам повышения производительности, таким как Outlook и Office
Использование встроенного терминала VS Code для запуска дистрибутива Linux по выбору
Воспользуйтесь преимуществами VS Code функций, таких как завершение кода IntelliSense, linting, Поддержка отладки, фрагменты кодаи модульное тестирование .
Простота управления версиями с помощью встроенной поддержки Git VS Code
выполнение команд и VS Code расширений непосредственно в проектах WSL
Измените файлы в Linux или смонтированной файловой системе Windows (например,/МНТ/к), не беспокоясь о проблемах с путями, двоичной совместимости или других задачах, связанных с разными операционными системами.

Установка VS Code и расширения Remote WSL

Перейдите на страницу установки VS Code и выберите двоичный установщик 32 или 64. Установите Visual Studio Code в Windows (не в файловой системе WSL).
При появлении запроса на Выбор дополнительных задач во время установки обязательно установите флажок Добавить в путь , чтобы можно было легко открыть папку в WSL с помощью команды Code.
Установите Пакет расширений для удаленной разработки. Этот пакет расширений включает расширение Remote-WSL в дополнение к расширениям Remote-SSH и Remote-Container, что позволяет открывать любую папку в контейнере, на удаленном компьютере или в WSL.

Важно!

Чтобы установить расширение Remote-WSL, потребуется версия 1,35 или более поздняя VS Code. Не рекомендуется использовать WSL в VS Code без расширения Remote-WSL, так как будет потеряна поддержка автоматического завершения, отладки, linting и т. д. Забавный факт. это расширение WSL устанавливается в $HOME/.вскоде/екстенсионс (введите команду ls $HOME\.vscode\extensions\ в PowerShell).

Обновление дистрибутива Linux

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

Например, чтобы обновить Debian или Ubuntu, используйте:

sudo apt-get update

Чтобы добавить wget (для получения содержимого с веб-серверов) и CA-Certificates (чтобы разрешить приложениям на основе SSL проверять подлинность SSL-соединений), введите:

sudo apt-get install wget ca-certificates

Откройте проект WSL в Visual Studio Code

Из командной строки

Чтобы открыть проект из дистрибутива WSL, откройте командную строку распространения и введите: code .

Из VS Code

Кроме того, можно получить доступ к дополнительным VS Code удаленным параметрам с помощью ярлыка: CTRL+SHIFT+P в VS Code, чтобы открыть палитру команд. Если затем ввести, Remote-WSL вы увидите список доступных VS Code удаленных параметров, что позволит повторно открыть папку в удаленном сеансе, указать, какое распространение следует открыть в, и многое другое.

Расширения в VS Code Remote

Расширение Remote-WSL разделяет VS Code в архитектуру «клиент-сервер» с помощью клиента (пользовательского интерфейса), работающего на компьютере Windows, и сервера (код, Git, подключаемые модули и т. д.), запускаемые удаленно.

При запуске VS Code удаленно на вкладке «расширения» отобразится список расширений, разделенных между локальным компьютером и дистрибутивом WSL.

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

Некоторые расширения, такие как расширение Python или все, что обрабатывает такие действия, как linting или Отладка, должны устанавливаться отдельно на каждом удаленном распределении WSL. VS Code отобразит значок предупреждения ⚠ , а также зеленую кнопку «установить в WSL», если установлено локальное расширение, которое не установлено на удаленном компьютере WSL.

Дополнительные сведения см. в VS Code документах:

При запуске VS Code Remote в WSL сценарии запуска оболочки запускаться не будут. Дополнительные сведения о выполнении дополнительных команд или изменении среды см. в этой статье о сценариях расширенной настройки среды .
Возникли проблемы при запуске VS Code из командной строки WSL? В этом руководство по устранению неполадок содержатся советы по изменению переменных пути, устранению ошибок расширения, связанных с отсутствием зависимостей, устранению проблем с завершением строк Git, установке локального VSIX на удаленном компьютере, запуску окна браузера, порту localhost для блокировки, веб-сокеты не работают, ошибки при хранении данных расширения и многое другое.

Установка Git (необязательно)

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

Сведения об установке Git см. в статье Настройка Git для работы с подсистемой Windows для Linux.

Установка Терминала Windows (необязательно)

Новый терминал Windows включает несколько вкладок (для быстрого переключения между командной строкой, PowerShell или несколькими дистрибутивами Linux), настраиваемыми пользовательскими привязками клавиш (создайте собственные сочетания клавиш для открытия и закрытия вкладок, копирования и вставки и т. д.), эмодзи ☺ и пользовательские темы (цветовые схемы, стили и размеры шрифтов, фоновое изображение, размытие и прозрачность). Дополнительные сведения см. в документации по терминалу Windows.

Скачайте Терминал Windows из Microsoft Store: При установке через магазин обновления выполняются автоматически.
После установки откройте Терминал Windows и щелкните Параметры, чтобы настроить Терминал использовать файл profile.json.

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

К дополнительным рекомендуемым расширениям относятся следующие:

Раскладки клавиатуры других редакторов — эти расширения позволят использовать необходимую раскладку при переходе в другой текстовый редактор (например, Atom, Sublime, Vim, eMacs, Notepad++ и т. п.).
Расширение синхронизации параметров — позволяет синхронизировать параметры VS Code в разных установках, используя GitHub. Если вы работаете на разных компьютерах, это обеспечит согласованность среды между ними.
Отладчик для Chrome: после завершения разработки на стороне сервера с Linux необходимо разработать и протестировать клиентскую часть. Это расширение интегрирует редактор VS Code со службой отладки браузера Chrome, что увеличивает эффективность выполнения операций.

Сеансы Live Share для совместного редактирования в Visual Studio Code

07/16/2021

Чтение занимает 25 мин

В этой статье

Вы готовы организовать совместную работу с помощью Live Share в VS Code? В этой статье мы пошагово настроим сеанс совместной работы в Visual Studio Code с помощью расширения Live Share.

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

Вам достаточно краткой сводки? Перейдите к кратким руководствам по совместному использованию или подключению.

Совет

Знаете ли вы, что можно присоединиться к собственному сеансу совместной работы? Вы сможете попробовать Live Share самостоятельно либо запустить экземпляр Visual Studio или VS Code и подключиться к нему удаленно! Вы можете даже использовать одно удостоверение в обоих экземплярах. Убедитесь в этом сами!

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

Прежде всего вам необходима поддерживаемая версия Visual Studio Code, соответствующая базовым требованиям для Live Share.

Вам потребуется Visual Studio Code (1.22.0 или более поздней версии) под управлением одной из следующих ОС:

Windows: 7, 8.1 или 10
macOS: только Sierra (10.12 и более поздние версии). EL Capitan (10.11 и более ранние версии) в настоящее время не поддерживаются из-за требований .NET Core 2.0.
Linux: 64-разрядные версии Ubuntu Desktop 16.04 и выше, Fedora Workstation 27 и выше или CentOS 7

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

Скачивая и используя Visual Studio Live Share, вы соглашаетесь с условиями лицензии и заявлением о конфиденциальности. Если у вас возникают проблемы, ознакомьтесь с руководством по устранению неполадок.

Установка Visual Studio Code
Скачайте из Marketplace и установите расширение Visual Studio Live Share.
Перезагрузка Visual Studio Code
Подождите, пока скачаются и установятся все зависимости (контроль по строке состояния).
Linux: Если вы видите уведомление об установке отсутствующих библиотек, выполните следующее.
1. Щелкните «Установить» в этом уведомлении.
2. Введите пароль администратора (sudo), когда появится соответствующий запрос.
3. После завершения операции перезапустите VS Code.

Процесс установки Linux

Среда Linux крайне разнообразна, и большой выбор сред и дистрибутивов для рабочего стола существенно усложняет подготовку к работе. Если вы придерживаетесь поддерживаемых версий Ubuntu Desktop (16.04 или более поздней), Fedora Workstation (27 или более поздней) или CentOS 7 в сочетании с официальными дистрибутивами VS Code процесс установки не должен вызывать затруднений. Но если же вам нужна нестандартная конфигурация или подчиненный дистрибутив, в некоторых случаях могут возникать проблемы. См. дополнительные сведения об установке Linux.

Установка необходимых компонентов для Linux

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

Когда вы щелкнете здесь «Установить», отобразится окно терминала, где вам нужно ввести пароль администратора (sudo) для продолжения установки. Если этот процесс завершится успешно, вам останется лишь перезапустить Visual Studio Code, и все готово! Вы также можете проверить советы для конкретного дистрибутива , где могут быть описаны дополнительные сложности и (или) обходные пути.

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

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

wget -O ~/vsls-reqs https://aka.ms/vsls-linux-prereq-script && chmod +x ~/vsls-reqs && ~/vsls-reqs

Интеграция с браузером в Linux

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

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

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

Выполнение входа в Live Share

Для совместной работы необходимо выполнить вход в Visual Studio Live Share, чтобы все коллеги знали, кто вы. Это нужно исключительно для обеспечения безопасности и не предполагает участия в какой-либо маркетинговой или исследовательской деятельности. Вы можете войти с личной учетной записью Майкрософт (например @outlook.com), с предоставляемой Майкрософт рабочей или учебной учетной записью (AAD) либо с учетной записью GitHub. Войти очень просто.

Щелкните элемент «Live Share» в строке состояния либо нажмите клавиши CTRL+SHIFT+P или CMD+SHIFT+P и выберите команду «Live Share: Sign In With Browser» (Вход в Live Share через браузер).

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

Примечание

Для пользователей Linux. в старых версиях Live Share (0.3.295 и более ранних) может появиться запрос на ввод кода пользователя. Обновите расширение до последней версии или щелкните ссылку «Возникли проблемы?» после входа в систему, чтобы увидеть код. Дополнительные сведения см. далее.

Дополнительный совет. Параметры liveshare.account и liveshare.accountProvider позволяют выбирать учетную запись для автоматического входа в систему при наличии кэшированных учетных данных для нескольких учетных записей.
Представьте, что вы работаете над двумя проектами, вход в которые требуется выполнять с использованием разных удостоверений. В параметрах рабочей области VSCode в качестве значения параметра liveshare.account можно задать разные адреса электронной почты в каждом каталоге проекта, чтобы при входе в проект автоматически применялась правильная учетная запись. Если вы используете один и тот же адрес электронной почты с несколькими поставщиками, параметру liveshare.accountProvider можно задать значение "microsoft" или "github".

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

Вход с использованием пользовательского кода

Если вы столкнетесь с тем, что VS Code не подтверждает завершение входа, можно применить так называемый «пользовательский код».

Для этого нажмите сочетание клавиш Ctrl+Shift+P или Cmd+Shift+P и запустите команду «Live Share: Sign in with user code» (Вход в Live Share с помощью пользовательского кода).
Откроется окно браузера, где вы сможете завершить процесс входа в систему.
Примечание
Если браузер не откроется автоматически, вручную введите этот адрес в адресную строку и выполните вход.
Закончив, щелкните ссылку «Having trouble? Click here for user code directions» (Возникли проблемы? Щелкните здесь, чтобы применить пользовательский код). Вам будет предоставлен пользовательский код.
Скопируйте этот пользовательский код.
Теперь вставьте пользовательский код в поле ввода, которое появилось при выполнении команды, и нажмите клавишу ВВОД для завершения процесса входа в систему.

Расположение команд Live Share

Вьюлет Live Share

После установки Visual Studio Live Share на панель действий VS Code добавляется новая пользовательская вкладка. На этой вкладке доступны все функции Live Share для совместной работы. Кроме того, при предоставлении общего доступа и участии в сеансе совместной работы на вкладке «Обозреватель» появляется специальное представление для использования всех этих функций.

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

Меню контекстных команд

Кроме того, все функции Visual Studio Live Share доступны из «Палитры команд» прямо в Visual Studio Code, которая открывается сочетанием клавиш Ctrl+Shift+P (Cmd+Shift+P) или клавишей F1. Чтобы получить полный список этих команд, введите строку «live share».

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

Запуск и остановка сеанса

Завершив скачивание и установку Visual Studio Live Share, выполните следующие шаги, чтобы начать сеанс совместной работы и пригласить коллегу для работы с вами.

Выполните вход.
Установив расширение Live Share, выполнив перезапуск и дождавшись завершения установки зависимостей, нужно войти в систему, чтобы другие пользователи знали, кто вы. Подробные сведения см. в разделе о входе.
Откройте папку.
Обычным образом откройте папку, проект или решение, к которым вы намерены предоставить гостям общий доступ.
(Необязательно) Обновите скрытые или исключенные файлы.
По умолчанию Live Share скрывает от гостей все файлы и папки в общих папках, перечисленные в файлах GITIGNORE. Скрытый файл не отображается в дереве файлов гостя. Исключение файла является более строгим правилом. Оно запрещает открывать файл в Live Share при выполнении таких действий, как переход к определению или пошаговое выполнение с заходом в файл при отладке или отслеживании. Если вам нужно скрыть или исключить различные файлы, добавьте в проект файл .vsls.json с указанными здесь параметрами. Подробные сведения см. в разделе, посвященном управлению доступом к файлам и видимостью.
Запустите сеанс совместной работы.
Теперь осталось лишь щелкнуть элемент «Live Share» в строке состояния либо нажать клавиши CTRL+SHIFT+P или CMD+SHIFT+P и выбрать команду «Live Share: Start a collaboration session (Share)» (Live Share: начало сеанса совместной работы (предоставления общего доступа)).
Примечание
При первом предоставлении общего доступа брандмауэр на компьютере может запросить разрешение на открытие порта для агента Live Share. Предоставлять это разрешение необязательно, но оно позволяет использовать защищенный «прямой режим», который повышает производительность, если вы работаете с пользователем в одной сети. Подробные сведения см. в разделе, посвященном смене режима подключения.
В буфер обмена автоматически скопируется ссылка приглашения. Открыв эту ссылку в браузере, другие пользователи смогут подключиться к сеансу совместной работы с доступом к общему содержимому таких папок.
Также вы увидите, что элемент «Live Share» на панели состояния теперь отображает состояние сеанса. Подробные сведения см. в разделе Состояния сеанса ниже.
Примечание: если вам потребуется снова получить ссылку приглашения после того, как вы уже предоставили общий доступ, щелкните значок общего доступа и состояния сеанса и выберите действие «Invite Others (Copy Link)» (Пригласить других участников (Копировать ссылку)).
(Необязательно) Включите режим только для чтения.
Запустив сеанс совместной работы, вы можете ограничить доступ гостей правами только для чтения, чтобы запретить им изменение общего кода.
После предоставления доступа вы получите уведомление о том, что ссылка приглашения была скопирована в буфер обмена. После этого вы можете сделать сеанс доступным только для чтения, выбрав соответствующий параметр.
Отправьте ссылку другому пользователю.
Отправьте ссылку пользователям, которых вы хотите пригласить в сеанс, по электронной почте, через Slack, Skype и т. д. Учитывая уровень доступа, предоставляемый гостям в рамках сеансов Live Share, следует приглашать только тех пользователей, которым вы доверяете, и всегда соблюдать осторожность при предоставлении общего доступа к важным данным.
Совет по безопасности. Сведения о вопросах безопасности при использовании некоторых функций Live Share см. в статье, посвященной безопасности.
Если у приглашенного вами гостя возникли вопросы, он может обратиться к статье Краткое руководство. Присоединение к первому сеансу, в которой приводятся дополнительные сведения о работе в качестве гостя.
(Необязательно) Утвердите гостя.
По умолчанию гости автоматически присоединяются к сеансу совместной работы и вы получаете уведомление о том, что они готовы работать с вами. Такое уведомление дает вам возможность удалить гостя из сеанса, но вместо этого вы можете настроить явное утверждение тех пользователей, которые присоединяются к сеансу.
Чтобы включить эту функцию, просто добавьте следующие параметры в файл settings.json:
```
"liveshare.guestApprovalRequired": true
```
Если этот параметр включен, вы будете получать уведомления с предложением утвердить присоединившихся гостей.
В разделе о приглашениях и доступе для присоединения вы найдете дополнительные сведения по безопасности приглашения.

Вот и все.

Завершение сеанса совместной работы

Организатор в любой момент может полностью прекратить общий доступ и завершить сеанс совместной работы, открыв представление Live Share в проводнике или на настраиваемой вкладке Live Share и выбрав значок Stop collaboration session (Остановка сеанса совместной работы).

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

Возникли проблемы с общим доступом? См. раздел по устранению неполадок.

Присоединение и выход из сеанса

После скачивания и установки Visual Studio Live Share гостю остается лишь пара шагов до присоединения к размещенному сеансу совместной работы. Существует два способа присоединения: через браузер и вручную.

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

Присоединение через браузер

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

Выполните вход.
Установив расширение Live Share, выполнив перезапуск и дождавшись завершения установки зависимостей, нужно войти в систему, чтобы другие пользователи знали, кто вы. Подробные сведения см. в разделе о входе.
Нажмите ссылку приглашения или откройте приглашение в браузере.
Теперь просто откройте ссылку приглашения в браузере (повторно, если вы уже открывали ее ранее).
Примечание. Если вы еще не установили расширение Live Share, отобразятся ссылки на магазин расширений. Установите расширение, перезапустите средство и повторите попытку.
Должно появиться уведомление о том, что в браузере будет запущено средство с поддержкой Live Share. Если подтвердить запуск, средство запустится и подключится к сеансу совместной работы.
Если организатор сеанса не в сети, появится соответствующее уведомление. Вы можете обратиться к организатору и попросить его открыть доступ снова.
Примечание
Обязательно запустите средство хотя бы один раз после установки расширения Visual Studio Live Share и дождитесь завершения установки, прежде чем открывать страницу приглашения. По-прежнему есть проблемы? Воспользуйтесь разделом о присоединении вручную.
Начните совместную работу.
Вот и все! Через несколько секунд вы подключитесь и сможете начать работу.
Вы увидите, что кнопка «Live Share» изменилась на кнопку с отображением состояния сеанса. Подробные сведения см. в разделе Состояния сеанса ниже.
После завершения присоединения вы автоматически перейдете к файлу, который в настоящее время редактирует организатор сеанса.

Присоединение вручную

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

Выполните вход.
Установив расширение Live Share, выполнив перезапуск и дождавшись завершения установки зависимостей, нужно войти в систему, чтобы другие пользователи знали, кто вы. Подробные сведения см. в разделе о входе.
Воспользуйтесь командой присоединения.
Откройте настраиваемую вкладку Live Share на панели действий VS Code и выберите значок или строку «Join collaboration session…» (Присоединение к сеансу совместной работы…).
Вставьте ссылку приглашения.
Вставьте полученный URL-адрес приглашения и нажмите ВВОД для подтверждения.
Начните совместную работу!
Вот и все! Вы сразу же подключитесь к сеансу совместной работы.
Вы увидите, что кнопка «Live Share» изменилась на кнопку с отображением состояния сеанса. Подробные сведения см. в разделе Состояния сеанса ниже.
После завершения присоединения вы автоматически перейдете к файлу, который в настоящее время редактирует организатор сеанса.

Выход из сеанса совместной работы

Гость всегда может покинуть сеанс совместной работы, не завершая его для других пользователей, просто закрыв окно VS Code. Если вы хотите оставить окно открытым, откройте представление обозревателя Live Share или настраиваемую вкладку Live Share и щелкните значок «Leave collaboration session» (Выход из сеанса совместной работы).

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

Возникли проблемы с присоединением? См. раздел по устранению неполадок.

Совместное редактирование

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

Примечание

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

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

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

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

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

Изменение поведений для флага участника

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

Просто откройте для редактирования settings.json (Файл > Настройки > Параметры), добавьте любую из следующих строк и перезапустите VS Code:

Параметр	Поведение
`"liveshare.nameTagVisibility":"Never"`	Флаг отображается только в том случае, если на курсор наводится указатель мыши.
`"liveshare.nameTagVisibility":"Activity"`	Это значение по умолчанию. Флаг отображается при наведении указателя мыши и тогда, когда участник вносит изменения, выделяет фрагменты или перемещает свой курсор.
`"liveshare.nameTagVisibility":"Always"`	Флаг всегда остается видимым.

Поиск и вывод списка участников

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

Щелчок по любому из участников в этом списке запускает для него режим отслеживания в активной группе редактирования.

Кроме того, вы можете нажать Ctrl+Shift+P или Cmd+Shift+P и выбрать пункт «Live Share: List Participants» (Live Share: список участников) или щелкнуть элемент в строке состояния, который отображает количество участников в текущем сеансе.

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

Отслеживание действий другого участника

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

Примечание

По умолчанию Live Share предоставляет доступ и к файлам, расположенным за пределами папки для общего доступа. Если вы хотите отключить эту функцию, установите для параметра liveshare.shareExternalFiles Live Share значение false в файле settings.json.

Запрос обратить внимание

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

Откройте настраиваемую вкладку Live Share в панели действий VS Code или представлении обозревателя Live Share, а затем щелкните значок Focus participants (Фокусировка участников).

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

Они смогут переместить фокус на ваши действия, когда будут к этому готовы, просто нажав кнопку «Отслеживать» в этом уведомлении.

Запуск и остановка отслеживания участников

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

Кроме того, можно щелкнуть значок прикрепления в правом верхнем углу группы редактирования или нажать сочетание клавиш Ctrl+Alt+F или Cmd+Alt+F.

Примечание

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

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

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

вы начинаете редактирование открытого файла;
вы открываете другой файл;
вы закрываете активный открытый файл.

Кроме того, вы можете явным образом прекратить отслеживание, повторно щелкнув значок прикрепления или нажав сочетание клавиш Ctrl+Alt+F или Cmd+Alt+F.

Совместная отладка

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

Совет по безопасности. Учитывая, что все участники могут независимо друг от друга просматривать и редактировать файлы, организатор может с помощью файла vsls.json ограничить, к каким файлам в проекте получают доступ гости. Также следует учитывать, что доступ к консоли или REPL позволяет участникам выполнять команды на вашем компьютере. Это означает, что совместную отладку следует выполнять только с теми пользователями, которым вы доверяете. Гостям также важно понимать, что некоторые действия отладчика отслеживать не удастся, например при шагах с заходом в файлы, защищенные этими настройками. Подробные сведения см. в разделе, посвященном управлению доступом к файлам и видимостью.

Здесь все очень просто.

Убедитесь, что на компьютерах организатора и всех гостей установлено нужное расширение для отладки. (Технически это требуется не всегда, но так будет правильнее.)
Если организатор еще не настроил проект, ему следует обычным образом подготовить launch.json для отладки приложения из VS Code. Специальная настройка для совместной работы не требуется.
После этого организатор сможет запускать отладку кнопкой на вкладке «Отладка», как обычно.
Совет
Также вы можете принять участие в сеансе отладки Visual Studio из VS Code и наоборот. Подробные сведения о совместной отладке см. в инструкции для Visual Studio.

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

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

Примечание

Сведения о состоянии функций отладки по языку или платформе см. в разделе о поддержке платформы.

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

Примечание

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

Изменение условий подключения VS Code к сеансам отладки

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

Параметр	Поведение
`"liveshare.joinDebugSessionOption":"Automatic"`	По умолчанию. Гости автоматически подключаются к любому сеансу отладки, запущенному организатором в режиме общего доступа.
`"liveshare.joinDebugSessionOption":"Prompt"`	Гости получают запрос для подключения к сеансу отладки, запущенному организатором в режиме общего доступа.
`"liveshare.joinDebugSessionOption":"Manual"`	Гостю придется вручную подключаться к любому сеансу отладки. Подробнее см. раздел об отсоединении и повторном присоединении.

Отсоединение и повторное присоединение

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

Если вы изменили параметры так, что автоматическое присоединение не выполняется, или решите повторно присоединиться к сеансу позже, вы можете нажать сочетание клавиш Ctrl+Shift+P или Cmd+Shift+P или щелкнуть элемент состояния на панели состояния сеанса и выбрать действие «Attach to a Shared Debugging Session» (Присоединение к общему сеансу отладки).

Общий доступ к работающему приложению в браузере

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

Организатор может настроить аналогичное поведение, вручную предоставив общий доступ к приложению или другим конечным точкам, например к службам REST, с помощью функции Share Local Server (Предоставление общего доступа к локальному серверу). Гости в Visual Studio и VS Code в этом случае смогут открывать в браузере один и тот же локальный порт для доступа к запущенному приложению. Подробнее см. разделе об общем доступе к серверу.

Общий доступ к серверам и терминалам

Общий доступ к серверу

Время от времени организатору совместного сеанса нужно предоставить гостям доступ к веб-приложениям или другим локальным серверам и (или) службам. Это могут быть другие конечные точки REST или базы данных и другие серверы. Visual Studio Live Share позволяет указать номер локального порта, при необходимости присвоить ему имя и предоставить общий доступ к нему всем гостям.

Гости в этом случае смогут подключаться к указанному порту сервера, предоставленному в общий доступ, через аналогичные порты на своих локальных компьютерах. Например, если вы предоставили общий доступ к веб-серверу, работающему на порту 3000, гости будут обращаться к тому же веб-серверу на своих компьютерах через порт http://localhost:3000. Для этого создаются защищенные туннели SSH или SSL между компьютерами организатора и гостей с аутентификацией через службу. Таким образом вы можете быть уверены, что доступ получат только участники сеанса совместной работы.

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

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

Откройте настраиваемую вкладку Live Share в панели действий VS Code или представлении обозревателя Live Share, а затем щелкните значок или строку «Share server…» (Общий доступ к серверу).
Введите номер порта, на котором работает сервер, и необязательное имя сервера.

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

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

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

Чтобы прекратить совместное использование локального сервера, организатору следует навести указатель мыши на запись сервера в списке общих серверов в представлении обозревателя Live Share или настраиваемой вкладки, а затем щелкнуть значок Unshare server (Отключение совместного доступа к серверу).

Общий доступ к терминалу

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

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

Если вам, как организатору, нужно предоставить общий доступ к терминалу, откройте настраиваемую вкладку Live Share в панели действий VS Code или представлении обозревателя Live Share, а затем щелкните значок или строку «Share server…» (Общий доступ к серверу).

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

Примечание

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

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

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

Чтобы завершить сеанс терминала, просто наберите команду exit, закройте окно терминала или щелкните значок Unshare terminal (Отключение общего доступа к терминалу) в представлении обозревателя Live Share или на настраиваемой вкладке. Все участники будут отключены от этого терминала.

Состояния сеанса и ограничения

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

Ниже перечислены возможные состояния.

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

Следующие шаги

Дополнительные сведения можно найти в следующих статьях:

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

Как пользоваться плагином Emmet (VS Code)

Вы здесь:
Главная — Как пользоваться плагином Emmet (VS Code)

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

Как пользоваться Emmet верстальщику

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

Emmet: HTML сокращения

Создать базовую структуру HTML документа

Если набрать в редакторе «!» и нажать Tab, то Emmet вставит скелет HTML документа.

Подключение CSS файла

Для подключения CSS файла к HTML документу, достаточно написать link и нажать Tab, чтобы Emmet вставил весь тег.

<link rel="stylesheet" href="">

Развернуть ссылку

Меня всегда бесило прописывание в ссылке http и вот наконец-то пришел конец моим мучениям a:link.

<a href="http://"></a>

Добавить тег

Чтобы добавить тег, нужно просто написать название тега и нажать Tab.

<section></section>

Для добавления тега с классом, вводите только название класса и точку .box.

<div></div>

Если нужен какой-то другой тег с классом, то соответственно пишем header.top

<header></header>

Развернуть список

С Emmet стало проще разворачивать списки, пользуясь формулой ul>li*5.

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

Генерация текста lorem

Невероятно просто стало генерировать текст с любым количеством абзацев p*3>lorem.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae illum placeat quisquam, eaque quia vero neque, itaque ducimus cum quasi doloribus aperiam eos dignissimos, eum labore esse. Eligendi, veritatis nulla!</p> <p>Autem maxime unde iusto sunt atque deleniti perspiciatis id praesentium. Necessitatibus sequi non delectus! Maxime voluptates excepturi ducimus nesciunt at, dolor iste molestias itaque sed esse nisi perferendis sequi! Fugiat?</p> <p>Suscipit molestias odit impedit voluptatem laborum a est, iure dolorum autem? Accusamus, esse pariatur ipsam eum consequatur error, accusantium corporis magni a ipsa blanditiis neque impedit porro, alias deserunt voluptatibus?</p>

Emmet: CSS сокращения

Аббревиатуры CSS сокращений исходят из названия самих свойств, поэтому здесь все логично. Напишем стили вместе с Emmet для селектора header. Вам не нужно ничего заучивать, плагин Emmet умеет давать подсказки.

header { mb30 pr10 bg c }

header { margin-bottom: 30px; padding-right: 10px; background: #fff; color: #ccc; }

Как видите использование Emmet в разы ускоряет написание кода, при условии что вы хорошо знаете HTML теги и CSS свойства. Кроме того прописывание всего селектора (свойство: значение), малоинтересное занятие. Если вы ещё не используете Emmet, то я настоятельно рекомендую не отказываться от такой замечательной возможности.

Создано 13.03.2020 10:58:05

Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:

Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт

BB-код ссылки для форумов (например, можете поставить её в подписи):

[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Как настроить VS Code для увеличения продуктивности

Перевод статьи
«How to set up VSCode to improve your productivity».

С течением времени редакторы кода существенно улучшились. Еще несколько лет назад Visual Studio Code (VS Code) вообще не существовало. Вы, вероятно, пользовались Sublime Text, Atom, Bracket и т. п. Но теперь VS Code стал любимым редактором большинства разработчиков.

Почему VS Code?

Любви разработчиков к этому редактору
способствуют (среди прочих) такие его
особенности:

Настраиваемость
Легкость отладки
Emmet
Расширения
Интеграция Git
Встроенный терминал
Intellisense

Теперь, когда вы знаете о преимуществах
использования VS Code, давайте рассмотрим,
как его настроить и какие расширения
установить, чтобы использовать этот
редактор максимально эффективно.
(Примечание редакции: в статье приводятся
советы для macOS, но многие из них
универсальны. Для вызова палитры команд
вместо CMD + SHIFT + P можно использовать CTRL
+ SHIFT + P).

Терминал

Вы можете настроить
ваш терминал для использования iTerm2
и Zsh, а затем сделать так, чтобы встроенный
терминал в VS Code использовал эти настройки.

После конфигурации Zsh (для основного
терминала) запустите встроенный в VS
Code терминал Terminal > New Terminal и введите
команду

[code]source ~/.zshrc[/code]

или

[code]. ~/.zshrc[/code]

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

Шрифт

Благодаря поддержке лигатур хорошо
смотрится FiraCode.
Скачайте и установите этот шрифт, а
затем добавьте его в ваш файл settings.json.
(Примечание редакции: для доступа к
файлу выберите в палитре команд Open
Settings (JSON)).

[code]»editor.fontFamily»: «Fira Code»,
«editor.fontLigatures»: true,[/code]

Запуск из командной строки

Хорошо бы иметь возможность запускать
VS Code из терминала. Для этого нажмите CMD
+ SHIFT + P, введите shell command и выберите
Install code command in path. После чего перейдите
в любой проект из терминала и, находясь
в выбранной директории, введите «code .»,
чтобы запустить проект с помощью VS Code.

Конфигурация

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

Скопируйте и вставьте этот код в файл
settings.json:

[code]{
«editor.multiCursorModifier»: «ctrlCmd»,
«editor.formatOnPaste»: true,
«editor.wordWrap»: «bounded»,
«editor.trimAutoWhitespace»: true,
«editor.fontFamily»: «Fira Code»,
«editor.fontLigatures»: true,
«editor.fontSize»: 14,
«editor.formatOnSave»: true,
«files.autoSave»: «onFocusChange»,
«emmet.syntaxProfiles»: {
«javascript»: «jsx»
},
«eslint.autoFixOnSave»: true,
«eslint.validate»: [
«javascript»,
«javascriptreact»
],
«javascript.validate.enable»: true,
«git.enableSmartCommit»: true,
«files.trimTrailingWhitespace»: true,
«editor.tabSize»: 2,
«gitlens.historyExplorer.enabled»: true,
«diffEditor.ignoreTrimWhitespace»: false,
«workbench.sideBar.location»: «right»,
«explorer.confirmDelete»: false,
«javascript.updateImportsOnFileMove.enabled»: «always»,
}[/code]

Расширения

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

Чтобы найти эти расширения,

Перейдите View -> Extensions
Найдите нужное расширение
Кликните «Install».

1. Auto Import

Благодаря этому расширению вам не
придется импортировать файлы вручную.
Если вы работаете над компонентно-ориентированным
проектом, просто введите имя компонента,
и он будет автоматически импортирован.

2. Add jsdoc comments

Это расширение добавляет блок
комментариев к коду. Чтобы его использовать,
выделите первую строку функции, нажмите
CMD + SHIFT + P и выберите Add Doc Comments.

3. ESDoc MDN

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

[code]//mdn [object].[method];[/code]

4. CSS Peek

Как следует из названия (peek –
«заглянуть»), это расширение помогает
вам просмотреть правила, задействованные
при применении определенного стиля в
кодовой базе. Это бывает удобно при
работе с legacy-кодом.

5. GitLens

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

6. ESLint

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

Для локальной установки запустите

[code]npm install eslint[/code]

а для глобальной –

[code]npm install -g eslint[/code]

Вам также понадобится создать
конфигурационный файл .eslintrc. Если вы
установили ESLint локально, запустите

[code]./node_modules/.bin/eslint —init[/code]

или

[code]eslint —init[/code]

– в случае глобальной инсталляции.

7. Debugger for Chrome

С его помощью вы сможете осуществлять
отладку вашего JavaScript-кода прямо из
браузера Google Chrome.

8. Google Fonts

С помощью этого расширения облегчается
установка шрифтов Google. Больше не придется
искать их в браузере. Чтобы получить
список шрифтов, нажмите CMD + SHIFT + P и
поищите Google fonts.

9. TODO Highlight

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

10. Docker

Благодаря этому расширению вы сможете
на лету создавать Dockerfiles. Также
предоставляется подсветка синтаксиса,
intellisense и многое другое.

Нажмите CMD + SHIFT + P и поищите Add Docker
files to workspace.

11. Code Spellchecker

Это расширение позволяет с легкостью
находить опечатки в коде.

12. Import Cost

Import Cost показывает, как импортируемые
пакеты влияют на код. Это позволяет
оценивать проблемы с производительностью.

13. HTMLHint

Это расширение проверяет ваш HTML,
помогая вам писать код, совместимый
со стандартами.

14. Peacock

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

После установки Peacock кликните на иконке
настроек > settings, выберите вкладку
настроек рабочего пространства, кликните
на {} и вставьте следующий код:

[code]{
«workbench.colorCustomizations»: {
«activityBar.background»: «#e90b8d»,
«activityBar.foreground»: «#fff»,
«activityBar.inactiveForeground»: «#b5b5b5»,
},
«peacock.affectedElements»: [
«activityBar»,
]
}[/code]

Также можно добавить titleBar и statusBar в
affectedElements и настрйоки цвета для них в
разделе colorCustomizations.

Чтобы использовать один из дефолтных
цветов, нажмите CMD + SHIFT + P, введите peacock
и выберите тему по своему вкусу. Это
перезапишет настройки цвета в файле
settings.json для данного рабочего пространства.

15. Prettier

При написании кода все время приходится набирать пробелы или табы? На помощь вам придет Prettier. Это расширение форматирует строки кода и делает код читаемым.

Настройка подключения по FTP и SFTP в VS Code | Вопросы-ответы на Wiki

Если при изменении файлов возникает ошибка «Не удается выполнить изменения в редакторе только для чтения», то следует нажать в редакторе правой кнопкой мыши и активировать изменение в локальной среде нажав на «Edit in local» («Локальное редактирование»).

В редакторе VS Code присутствует нативный функционал синхронизации с сервером, но достигается он за счёт установки и настройки дополнительного ПО на сервер, что не всегда возможно. На нашем хостинге использовать такой вид синхронизации не получится. Для синхронизации данных с сервером можно также использовать плагины, к примеру один из наиболее популярных FTP/SFTP плагинов это liximomo SFTP. Документация плагина доступна на английском языке на странице GitHub.

Внимание! Плагин использует текущий открытый проект для синхронизации с подключённым к нему сервером. Для нескольких проектов следует создавать несколько подключений.

Перед подключением

Убедитесь, что соблюдены следующие требования:

Чтобы настроить синхронизацию VS Code с сервером, выполните следующее:

На странице проекта в магазине VS Market или в поиске плагинов в приложении нажмите «Установить (Install)» для расширения lLiximomo SFTP:
В приложении нажмите комбинацию клавиш Ctrl+Shift+P для Windows/Linux, Cmd+Shift+P для macOS и введите SFTP: config, после чего нажмите Enter. После выполнения указанных действий будет открыт конфигурационный файл, в котором нужно указать подходящие настройки:
```
[
  {
    "name": "connection1",
    "protocol": "sftp",
    "port": 22,
    "host": "host",
    "username": "username",
    "password": "password",
    "remotePath": "/home/user/example.com/www/",
    "uploadOnSave": true,
    "ignore": [
        ".vscode",
    ]
  }
]
```
Сохраните изменения в конфигурационном файле, после чего VS Code произведет несколько попыток подключиться к серверу, информация о подключении будет выведена в левом нижнем углу.

setup_mac

Загрузите Visual Studio Code для Mac.
Дважды щелкните загруженный архив, чтобы развернуть содержимое.
Перетащите Visual Studio Code.app в папку Приложения, сделав ее доступной в Launchpad.
Добавьте VS Code в свою Dock, щелкнув правой кнопкой мыши по значку и выбрав Параметры, Закрепить в Dock.

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

Запустите VS Code.
Откройте командную палитру (Ctrl + Shift + P) и введите команду ‘shell’, чтобы найти команду Shell: установите команду ‘code’ в команде PATH.

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

Примечание: Если у вас все еще есть старый псевдоним code в вашем .bash_profile (или эквивалент) из ранней версии VS Code, удалите его и замените, выполнив команду Shell Command: Install ‘code’ command in PATH.

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

После установки VS Code эти темы помогут вам узнать больше о VS Code:

Моно перестала работать в Visual Studio Code после установки OS X 10.11 публичной бета-версии El Capitan. Что мне делать?

Выполните следующие команды:

brew update

brew reinstall mono

Код Visual Studio

— Flutter

Документы
Развитие
Инструменты
VS Код

Установка и настройка

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

Обновление расширения

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

Для установки обновлений вручную:

Нажмите кнопку Extensions на боковой панели.
Если расширение Flutter отображается с доступным обновлением,
нажмите кнопку обновления, а затем кнопку перезагрузки.
Перезапустить код VS.

Создание проектов

Есть несколько способов создать новый проект.

Создание нового проекта

Чтобы создать новый проект Flutter из Flutter
шаблон начального приложения:

Открыть палитру команд
( Ctrl + Shift + P ( Cmd + Shift + P в macOS)).
Выберите команду Flutter: New Application Project и нажмите Введите .
Введите желаемое имя проекта .
Выберите местоположение проекта .

Открытие проекта из существующего исходного кода

Чтобы открыть существующий проект Flutter:

Щелкните Файл> Открыть в главном окне IDE.
Перейдите в каталог, в котором хранится ваш существующий
Файлы исходного кода Flutter.
Щелкните Открыть .

Редактирование кода и просмотр проблем

Расширение Flutter выполняет анализ кода, который
позволяет:

Подсветка синтаксиса
Завершение кода на основе анализа расширенного типа
Переход к объявлениям типов
( Перейти к определению или F12 ),
и поиск использования шрифтов
( Найти все ссылки или Shift + F12 )
Просмотр всех текущих проблем с исходным кодом
(Вид > Проблемы или Ctrl + Shift + M
( Cmd + Shift + M на macOS))
Все проблемы анализа отображаются на панели «Проблемы»:

Запуск и отладка

Примечание:
Вы можете отлаживать свое приложение двумя способами.

Использование DevTools, набора отладки и профилирования
инструменты, которые запускаются в браузере. DevTools заменяет предыдущий
инструмент профилирования на основе браузера, Observatory, и включает
функциональность, ранее доступная только для Android Studio
и IntelliJ, например инспектор Flutter.
Используя встроенные функции отладки VS Code,
например, установка точек останова.

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

Начните отладку, нажав Выполнить> Начать отладку
из главного окна IDE или нажмите F5 .

Выбор целевого устройства

Когда проект Flutter открыт в VS Code,
вы должны увидеть набор записей, специфичных для Flutter, в строке состояния,
включая версию Flutter SDK и
имя устройства (или сообщение No Devices ):

Примечание:

Если вы не видите номер версии Flutter или информацию об устройстве,
возможно, ваш проект не был обнаружен как проект Flutter.Убедитесь, что папка, содержащая ваш pubspec.yaml , является
внутри папки рабочего пространства VS Code .
Если в строке состояния указано Нет устройств , Flutter не был
возможность обнаружить любые подключенные устройства iOS или Android или симуляторы.
Вам необходимо подключить устройство или запустить симулятор или эмулятор,
продолжать.

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

Вы разрабатываете для macOS или iOS удаленно, используя
Visual Studio Code Remote? Если да, возможно, вам придется вручную
разблокировать брелок. Для получения дополнительной информации см. Это
вопрос по StackExchange.

Запустить приложение без точек останова

Нажмите Выполнить> Начать без отладки в
в главном окне IDE или нажмите Ctrl + F5 .
Строка состояния станет оранжевой, чтобы показать, что вы находитесь в сеансе отладки.

Запустить приложение с точками останова

При желании установите точки останова в исходном коде.
Нажмите Выполнить> Начать отладку в главном окне IDE,
или нажмите F5 .
- Левая боковая панель отладки показывает кадры стека и переменные.
- Нижняя панель Debug Console показывает подробный вывод журнала.
- Отладка основана на конфигурации запуска по умолчанию.Для настройки щелкните шестеренку в верхней части
  Боковая панель отладки для создания файла launch.json .
  Затем вы можете изменить значения.

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

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

Откройте файл launch.json в VS Code.
Если у вас нет запускай.json перейдите в
представление Run в VS Code и щелкните , чтобы создать файл launch.json .
В разделе конфигураций измените свойство flutterMode на режим сборки, на который вы хотите настроить таргетинг. Например, если вы хотите работать в режиме отладки, ваш launch.json может выглядеть так: "конфигурации": [ { "name": "Flutter", "запрос": "запуск", "тип": "дротик", "flutterMode": "отладка" } ]
Запустите приложение через представление Выполнить .

`Цикл разработки быстрого редактирования и обновления`

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

`Расширенная отладка`

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

`Отладка проблем с визуальной компоновкой`

Во время сеанса отладки, несколько дополнительных команд отладки добавлены в Палитра команд и инспектор Flutter.Когда пространство ограничено, значок используется в качестве визуального версия этикетки.

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

`Отладка внешних библиотек`

По умолчанию отладка внешней библиотеки отключена. в расширении Flutter. Для включения:

Выберите Настройки> Расширения> Конфигурация Dart .
Отметьте опцию Отладка внешних библиотек .

`Советы по редактированию кода Flutter`

Если у вас есть дополнительные советы, которыми мы хотели бы поделиться, дайте нам знать!

`Ассисты и быстрые исправления`

Ассисты - это изменения кода, связанные с определенным идентификатором кода.Некоторые из них доступны, когда курсор находится на Идентификатор виджета Flutter, обозначенный значком желтой лампочки. Помощник можно вызвать, щелкнув лампочку или используя сочетание клавиш Ctrl + . ( Cmd + . на Mac), как показано здесь:

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

Обертка с новым помощником виджета: Это можно использовать, когда у вас есть виджет, который вы хотите обернуть в окружающем виджете, например, если вы хотите обернуть виджет в строке или столбце .
Обернуть список виджетов новым помощником виджетов: Аналогичен описанному выше, но для упаковки существующего список виджетов, а не отдельный виджет.
Превратить ребенка в помощника ребенка: Изменяет дочерний аргумент на дочерний аргумент, и помещает значение аргумента в список.
Преобразование StatelessWidget в StatefulWidget Assistant: Изменяет реализацию StatelessWidget на реализацию StatefulWidget , создав класс State и переместив код там.

`Фрагменты`

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

Расширение Flutter включает следующие фрагменты:

Префикс stless : Создайте новый подкласс StatelessWidget .
Префикс stful : создать новый подкласс StatefulWidget и связанный с ним подкласс State.
Префикс stanim : Создать новый подкласс StatefulWidget , и связанный с ним подкласс State, включая инициализированное поле с AnimationController .

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

`Сочетания клавиш`

Горячая перезагрузка: Во время сеанса отладки нажатие кнопки Hot Reload на Панель инструментов отладки или нажатие Ctrl + F5 ( Cmd + F5 в macOS) выполняет горячую перезагрузку. Раскладки клавиатуры можно изменить, выполнив Открытие сочетаний клавиш команда из палитры команд.

`Горячая перезагрузка против горячего перезапуска`

Горячая перезагрузка работает путем вставки обновленных файлов исходного кода в работает Dart VM (виртуальная машина). Это включает не только добавление новых классов, а также добавление методов и полей в существующие классы и изменение существующих функций. Однако некоторые типы изменений кода не могут быть перезагружены в горячем режиме:

Инициализаторы глобальных переменных
Инициализаторы статического поля
Метод main () приложения

Для этих изменений полностью перезапустите приложение без необходимо завершить сеанс отладки.Чтобы выполнить горячий перезапуск, запустите команду Flutter: Hot Restart из палитры команд, или нажмите Ctrl + Shift + F5 ( Cmd + Shift + F5 в macOS).

`Поиск и устранение неисправностей`

`Известные проблемы и отзывы`

Все известные ошибки отслеживаются в системе отслеживания ошибок: Трекер проблем GitHub с расширениями Dart и Flutter.

Мы приветствуем отзывы, как по ошибкам / проблемам, так и по запросам функций. До подачи новых выпусков:

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

При регистрации новых выпусков включайте вывод датчика трепетания.

`Stripe для Visual Studio Code`

Расширение

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

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

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

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

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

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

`Возможности`

`Быстрое начало работы с Stripe Sample`

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

Кнопка «Начать с образца полосы» позволяет просматривать каталог и выбирать нужный язык для интеграции. Расширение клонирует и открывает образец в новой рабочей области, автоматически заполняя ключи API в файле .env образца.

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

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

Щелкните Пересылать события веб-перехватчика на локальный компьютер в разделе События .
Выполните команду Stripe: пересылка событий веб-перехватчика на локальный компьютер из палитры команд.

Затем введите локальный URL-адрес, на который вы хотите перенаправлять события. Если вы используете Connect, вы можете установить другой URL-адрес для событий из приложений Connect. Если URL-адреса вашего локального хоста используют HTTPS, вы можете пропустить проверку сертификата SSL.

Вы можете использовать кнопку Trigger new event , чтобы проверить интеграцию веб-перехватчика с событиями из Stripe API.

Вы можете запускать события только в тестовом режиме.

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

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

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

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

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

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

Можно указать параметры forwardTo и forwardConnectTo ; это URL-адреса на вашем локальном компьютере, на которые вы хотите получать события своей учетной записи и события Connect соответственно. Параметр events принимает дополнительный список, чтобы указать, какие события следует принимать. Если вы используете URL HTTPS, параметр skipVerify принимает логическое значение, чтобы пропустить проверку сертификатов SSL.

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

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

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

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

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

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

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

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

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

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

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

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

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

Для Java справочные ссылки API поддерживаются только частично.

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

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

`Настройки`

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


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

`Команды`

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

`Участие`

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

`Отзыв`

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

`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 с любыми дополнительными вопросами или комментариями.

`Лицензия`

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

`Причины, по которым вы должны использовать Visual Studio Code | Денис Кангеми`

Если вы веб-разработчик , то вы, вероятно, используете Visual Studio Code для написания кода в своих проектах.

Редактор быстро завоевал популярность среди разработчиков, став самой популярной средой разработки в опросе разработчиков Stack Overflow 2019 года.

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

Это также бесплатно, оно разработано и поддерживается Microsoft с использованием современного подхода с использованием Electron .

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

Тот факт, что код VS в основном с открытым исходным кодом , является беспрецедентным преимуществом.

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

Переход на открытый исходный код - отличный выбор, если вы хотите повысить вовлеченность сообщества .

Хотя не все пользователи VS Code вносят свой вклад в его кодовую базу, у них возникает определенное чувство единства.

Другие редакторы кода, такие как Atom , и даже целые IDE, такие как Eclipse или NetBeans , также имеют открытый исходный код.

От первых шагов до установки новых расширений - все в VS Code кажется простым и интуитивно понятным .

С учетом сказанного, я не имею в виду, что в VS Code отсутствуют какие-либо функции, совсем нет.

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

Но, в отличие от этих IDE, ему все же удается сделать это компактно и удобно .

Эта простота также проявляется в производительности VS Code , которая на удивление хороша, особенно для приложения Electron.

VS Code построен с использованием Electron - фреймворка для создания настольных приложений с JavaScript с помощью Chromium и Node.js .

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

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

Если вы используете TypeScript, можно сказать, что VS Code - ваш лучший выбор.

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

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

Пользовательский интерфейс VS Code чистый и хорошо продуманный

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

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

Единственным конкурентом VS Code в этом отношении, вероятно, является Atom , хотя в некоторых других областях он уступает .

На рынке VS Code есть буквально тысячи расширений, и новые, кажется, появляются каждый божий день!

Расширения могут служить множеству целей .

От тем пользовательского интерфейса, похожих на расширения, до поддержки языков программирования, отладки, интеграции с Git и даже проигрывателей Spotify!

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

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

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

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

Итак, вот причины, по которым VSCode - отличный редактор кода, который вы не должны игнорировать.

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

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

Спасибо за чтение и удачного кодирования!

`Использование подключаемого модуля VS Code для Python`

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

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

Единственные предварительные условия - у вас запущен Kite Engine и установлен плагин VS Code. Если у вас не установлен плагин VS Code, вы можете узнать, как это сделать, здесь.

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

`Проверка состояния воздушного змея`

Если Kite установлен правильно, вы должны увидеть текстовый индикатор в правом нижнем углу окна VS Code.

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

Сообщение	Описание
Кайт: не установлен	Kite Engine не устанавливается.
Кайт: не работает	Kite Engine не работает.
Кайт: индексация	Kite Engine анализирует ваш код.
Воздушный змей	Kite готов к работе - начинайте кодировать!
Без значка	Обычно это означает, что вы кодируете несохраненный файл или тип файла, который еще не поддерживается Kite.

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

Для первых двух (красных) состояний вам нужно будет вручную установить и / или запустить Kite.

`Написание кода и доступ к функциям`

В следующих разделах символ $ указывает положение текстового курсора вашего редактора.

`Выполнено`

Для начала откройте файл Python. Убедитесь, что этот файл был сохранен с расширением .py . Теперь введите следующий код:

 импорт j $

Список предлагаемых доработок должен появиться автоматически. Когда выделено, все комплекты Kite отмечены символом kite с правой стороны.

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

 импорт json
json. $

`Функциональные сигнатуры`

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

 импорт json
json.dumps ($)

Kite должен показать вам информацию о том, как позвонить json.Свалки . Подписи Kite также отмечены символом ⟠ .

По мере ввода Kite покажет вам, на каком аргументе вы сейчас сосредоточены.

Примечание: Если у вас установлено официальное расширение Microsoft Python, Kite не сможет показать вам справку по сигнатурам функций.

`Доработки Kite Pro`

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

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

Вы можете узнать больше о Kite Pro здесь.

`Просмотр документации`

Kite также может быстро получить документацию по коду, с которым вы работаете.Если вы наведете указатель мыши на идентификатор, вы можете щелкнуть ссылку «Документы», чтобы открыть документацию в Copilot.

Вы также можете выбрать команду Kite: Docs At Cursor из палитры команд.

При срабатывании триггера документация отображается в Copilot.

`Перейти к определению`

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

`Команды`

Плагин VS Code предоставляет ряд команд для простоты использования. Репозиторий GitHub содержит информацию о доступных командах.

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

Кроме того, Microsoft выпускает обновление каждый месяц для обеспечения качества.

`Как использовать Visual Studio Code Guide`

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

`Экран приветствия Visual Studio Code`

5 значков на левой панели инструментов предоставляют доступ к:

`Проводник`

Нажмите кнопку «Открыть папку» на боковой панели или ссылку Открыть папку… на странице приветствия . Оба будут запускать окно выбора файлов . Выберите одну папку, в которой есть исходный код или даже просто текстовые файлы, и откройте ее.

`VS Code покажет содержимое этой папки в вашем представлении:`

В правой части пустого представления показаны некоторые команды для выполнения некоторых быстрых операций и их сочетание клавиш.Если вы выберете файл слева, этот файл откроется на главной панели . : Как только вы начнете его редактировать, вы заметите, что рядом с именем файла на вкладке, а также на боковой панели появится точка: Нажатие CMD + P покажет вам средство быстрого выбора файлов, чтобы легко перемещать файлы в больших проектах: вы можете скрыть боковую панель, на которой размещен файл, с помощью ярлыка CMD + B .

Примечание. Здесь используются сочетания клавиш Mac.

Просмотр ярлыков кода Visual Studio

`Поиск`

Второй значок на панели инструментов - «Поиск» .При щелчке по нему отображается интерфейс поиска: можно щелкнуть значки, чтобы сделать поиск чувствительным к регистру, сопоставить целые слова (не подстроки) и использовать регулярное выражение для строки поиска. Чтобы выполнить поиск, нажмите ввод . Щелчок по символу ▷ слева включает инструмент поиска и замены. Нажатие на 3 точки показывает панель, которая позволяет вам просто включать файлы определенного типа и исключать другие файлы:

`Source Control`

Вкладка Source Control включается нажатием третьего значка на панели инструментов.

`Git & Visual Studio Code`

Visual Studio Code включает интеграцию с Git из коробки. В этом случае для папки, которую мы открыли, не инициализирован исходный элемент управления. Щелчок по первому значку сверху с логотипом Git позволяет нам инициализировать репозиторий Git: U рядом с каждым файлом означает, что он был обновлен с момента последней фиксации (поскольку мы никогда не выполняли фиксацию в первую очередь, все файлы обновляются ). Создайте первую фиксацию, написав текстовое сообщение и нажав Cmd-Enter или щелкнув значок ✔︎ вверху.Обычно я устанавливаю это так, чтобы изменения выполнялись автоматически при их фиксации. Значок из 3 точек при нажатии предлагает множество вариантов взаимодействия с Git : Git Repo Initialized

`Debugger`

Четвертый значок на панели инструментов открывает отладчик JavaScript . Это заслуживает отдельной статьи. А пока просматриваем официальную документацию.

`Расширения`

Пятый значок переносит нас к добавочным номерам . Расширения - одна из замечательных особенностей VS Code. Они могут обеспечить неограниченную ценность, и вы обязательно воспользуетесь многими из них. У меня установлено много расширений. Помните, что каждое устанавливаемое вами расширение будет в некоторой степени влиять на производительность вашего редактора. Вы можете отключить расширение , которое вы устанавливаете, и включать только тогда, когда оно вам нужно. Вы также можете отключить расширение для определенной рабочей области (о рабочих областях мы поговорим позже). Например, вы не хотите включать расширения JavaScript в проекте Go.Есть список рекомендуемых расширений, в который входят все самые популярные инструменты. Если вам нужно отредактировать файлы уценки для чего-то вроде Github, VS Code автоматически предлагает расширение MarkdownLint, которое обеспечивает линтинг и проверку синтаксиса для файлов Markdown. В качестве примера давайте установим его. Сначала проверим количество просмотров. Это 1,2 миллиона тонн! И отзывы положительные (4,5⁄5). Если щелкнуть имя добавочного номера , справа откроется подробная информация. Нажатие зеленой кнопки Install запускает простой процесс установки.Он делает все за вас, и вам просто нужно нажать кнопку «Перезагрузить» , чтобы активировал его , что эффективно перезагружает окно редактора. Готово! Давайте проверим это, создав файл уценки с ошибкой, такой как отсутствие атрибута alt на изображении . Он успешно сообщает нам об этом: Ниже мы представляем некоторые популярные расширения, которые вы не хотите игнорировать, и некоторые из расширений, которые я часто использую.

`Терминал`

VS Code имеет встроенный терминал .Вы можете активировать его в меню «Вид» ➤ «Интегрированный терминал» или с помощью CMD + \ `, и он откроется с оболочкой по умолчанию. Это очень удобно, потому что в современной веб-разработке почти всегда в фоновом режиме выполняется процесс npm или yarn . Вы можете создать более одной вкладки терминала и показывать их одну рядом с другой, а также располагать их справа, а не в нижней части окна:

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

Палитра команд - чрезвычайно мощный инструмент в вашем арсенал.Вы можете включить его, нажав Вид ➤ Палитра команд или используя CMD + SHIFT + P Модальное окно появится вверху, предлагая вам различные варианты, в зависимости от того, какие плагины вы установили, и какие команды вы использовали последними. .

`Общие операции, которые необходимо выполнить:`

Расширения: Установка расширений
Предпочтения: Цветовая тема для изменения цветовой темы (я предпочитаю более темную тему)
Формат документа - , который автоматически форматирует код
Код запуска - , который предоставляется Code Runner, и выполняет выделенные строки JavaScript

, вы можете активировать любую из них, начав вводить текст, и функция автозаполнения покажет вам тот, который вы хотите.Помните, когда вы раньше набирали CMD + P , чтобы увидеть список файлов? Это ярлык для конкретной функции палитры команд. Вот другие:

Ctrl-Shift-Tab показывает активные файлы
Ctrl-G открывает палитру команд, позволяющую ввести номер строки для перехода к
CMD + SHIFT + O показывает список символов, найденных в текущем файле

Какие символы зависят от типа файла . В JavaScript это могут быть классы или функции.В Markdown , заголовки разделов.

`Темы`

Вы можете переключить используемую цветовую тему, щелкнув CMD-k + CMD-t или вызвав команду Preferences : Color Theme. Это отобразит список установленных тем: вы можете щелкнуть одну или переместить ее с помощью клавиатуры, и VS Code покажет вам предварительный просмотр. Нажмите, введите , чтобы применить тему:

`Настройка`

Тема - это всего лишь одна настройка, которую вы можете сделать. Значки боковой панели, которые назначаются файлу, также являются большой частью хорошего взаимодействия с пользователем.Вы можете изменить их, перейдя в «Настройки » ➤ «Тема значка файла ». Тема Ayu поставляется с собственной темой значков, которая идеально соответствует цветам темы: все настройки, которые мы сделали до сих пор, тема и тема значков, сохраняются в пользовательских настройках . Перейдите в «Настройки » ➤ «Настройки » (также доступны через CMD-,), чтобы увидеть их: в представлении слева для удобства отображаются настройки по умолчанию, а справа - переопределенные настройки. Вы можете увидеть название темы и тему значков, которые мы создали, в рабочей среде .Рабочие места colorTheme и .iconTheme . Я увеличил масштаб, используя CMD- + , и этот параметр также был сохранен в window.zoomLevel, поэтому при следующем запуске VS Code он запоминает мой выбор масштабирования. Вы можете применить некоторые настройки глобально, в настройках пользователя, или относительно рабочего пространства, в настройках рабочего пространства. В большинстве случаев эти настройки автоматически добавляются расширениями или самим VS Code, но в некоторых случаях вы можете редактировать их прямо здесь.

`Рабочие пространства`

Пользовательские настройки можно переопределить в настройках рабочего пространства.Они имеют приоритет и полезны, например, когда вы используете проект, в котором правила линтинга отличаются от всех других используемых вами проектов, и вы не хотите редактировать свои любимые настройки только для этого. Вы создаете рабочее пространство из существующего проекта, щелкнув меню «Файл Сохранить рабочее пространство как…». Текущая открытая папка станет основной папкой рабочей области. В следующий раз, когда вы откроете код VS или переключите проект, вместо открытия папки вы откроете рабочую область, которая автоматически откроет папку, содержащую ваш код, и запомнит все настройки, которые вы установили для этой рабочей области.Помимо настроек на уровне рабочей области, вы можете отключить расширения для определенной рабочей области. Вы можете просто работать с папками, пока у вас не появится конкретная причина, по которой вам нужно рабочее пространство. Одна из веских причин - возможность иметь несколько отдельных корневых папок. Вы можете использовать Файл ➤ Добавить папку в рабочую область, чтобы добавить новую корневую папку, которая может располагаться в любом месте файловой системы, но будет отображаться вместе с другой существующей папкой, которая у вас была.

`Редактирование`

Как редактировать в Visual Studio Код, показанный ниже.

`Ошибки и предупреждения`

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

`Командная строка Visual Studio`

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

-n

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

  --diff file1.js file2.js.   "files.useExperimentalFileWatcher": true,
  "files.exclude": {
    "/.git": правда,
    "/.DS_Store": правда,
    "/ node_modules": правда,
    "/ node_modules /": правда
  },
  "search.exclude": {
    "/ node_modules": правда
  },
  "файлы.watcherExclude ": {
    "/ node_modules /": правда
  },  
 Как комментировать в VS Code 
 Я не знаю языка программирования, который не поддерживает комментарии.
 Код-комментарии невероятно полезны. При создании сложной функциональности я иногда даже записываю всю функцию в комментариях псевдокода, прежде чем писать какой-либо код.
 Комментарии делают код более читаемым и понятным. Это особенно полезно, если вы работаете в большой команде с большим количеством людей.Каждый комментарий, который вы напишете, может сэкономить вам и вашим коллегам некоторое время назад и вперед.
 Другой отличный вариант использования комментариев - быстрое отключение одной или нескольких строк кода. Это пригодится при отладке вашей программы.
 Комментарии служат двум основным вариантам использования:
 Добавьте информацию, которая дает контекст для вашего кода
 Быстро отключить код при отладке
 Вот как это сделать в VS Code:
 Вы будете использовать это в основном для добавления информации в поток вашей программы, которая поможет вашему будущему и вашим коллегам понять, что происходит.
 Сначала поместите курсор в то место, где вы хотите добавить комментарий. Затем используйте ярлык комментария VS Code, соответствующий вашей платформе ниже.
 В Windows ярлык: CTRL + /
 На Mac ярлык: Command + /
 Ярлык комментария VSCode Mac очень похож на версию для Windows.
 Это еще одно основное использование комментариев. Комментирование кода при отладке. Это, наверное, самый полезный ярлык здесь.Вот как это сделать:
 Выберите текст или код, который вы хотите закомментировать
 Выполните ярлык, соответствующий вашей платформе. (editor.action.commentLine)
 Windows: Ctrl + /
 Mac: команда + /
 Вы также можете раскомментировать, используя ту же команду. Выберите код, который в настоящее время закомментирован, и выполните ярлык. Он должен снова стать незамеченным.
 Magic.
 Если вы проделаете это несколько раз, это укрепит мышечную память и повысит вашу продуктивность. Я использую эту команду постоянно и не могу представить, чтобы ее не было.
 Некоторые языки программирования поддерживают блочные комментарии. Это комментарии, которые охватывают несколько строк кода (блок). Если вы хотите закомментировать несколько строк кода в одном комментарии, это то, что вам нужно.
 Чтобы переключить блок комментариев VSCode, вы можете использовать editor.action.blockComment:
 Windows: Shift + Alt + A
 Mac: Shift + Option + A
 Закомментировать код (редактор.action.addCommentLine):
 Окна: Ctrl + K + C
 Mac: Command + K + C
 Код отмены комментария (editor.action.removeCommentLine):
 Окна: Ctrl + K + U
 Mac: Command + K + U
 Основное отличие этих команд состоит в том, что каждая из них имеет только одну цель. Они не переключают код, как ярлык с косой чертой. Итак, если вы продолжите выполнение (CTRL + K + C), комментарии будут накапливаться, как показано на скриншоте ниже.
 То же самое и с отказом от комментариев.
 Как я уже сказал, я думаю, что эти команды намного менее удобны, и я не думаю, что для них когда-либо есть веская причина по сравнению с косой чертой ... если, конечно, вы не восстановите ярлык с косой чертой, чтобы сделать что-то еще.