Настройка sftp кода Visual Studio

Обновлено: 05.07.2024

Разработайте свой сайт Pantheon локально, используя Visual Studio Code для редактирования и синхронизации кода.

Последняя проверка: 16 октября 2019 г.

Обзор

Visual Studio Code или VS Code – это редактор кода с открытым исходным кодом, работающий в Windows, Linux и Mac OS.

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

Прежде чем начать

Создайте сайт в Pantheon или перейдите на панель мониторинга среды разработки существующего сайта.

Используйте SFTP, rsync или Git для клонирования файлов вашего сайта в среде разработки на локальный компьютер.

Если вы собираетесь загружать изменения кода через SFTP, поместите код своего сайта в подкаталог с именем "code" (например, ~/sites/mysite/code ). Это согласуется со структурой файлов на платформе при использовании режима SFTP.

Скачать и установить VS Code.

Создание рабочей области VS Code

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

На экране приветствия нажмите Открыть папку. под заголовком «Начать»:

Если вы уже закрыли экран приветствия, нажмите Открыть. в меню "Файл".

Перейдите к своей файловой системе и выберите каталог, содержащий ваш сайт (например, ~/sites/mysite ).

Сохраните это как рабочее пространство, выбрав Сохранить рабочее пространство как. в меню "Файл".

Настройки рабочей области хранятся в файле .code-workspace в корне вашего проекта. Рекомендуется убрать этот файл из Git, добавив его в файл .gitignore на уровне сайта или на глобальном уровне:

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

Развертывание изменений локального кода в среде Pantheon

После того как вы внесете некоторые изменения в код, вы захотите перенести их в свою среду Pantheon Dev или Multidev. Это можно сделать с помощью Git или SFTP.

Отправлять изменения с помощью Git (рекомендуется)

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

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

Контроль версий Git в VS Code

Откройте меню Git (Ctrl + Shift + G или View -> SCM). Отсюда вы можете просмотреть свои незавершенные изменения, зафиксировать их с помощью сообщения, переключить ветки и многое другое. Дополнительные сведения см. в видео в документации по VS Code.

Интегрированный терминал

Откройте встроенный терминал с помощью Ctrl + ` или Вид -> Терминал. Теперь вы можете взаимодействовать с Git как обычно, не выходя из VS Code.

Загрузить изменения с помощью SFTP

Расширение SFTP для VS Code позволяет разработчикам загружать код в среду Pantheon Dev или Multidev непосредственно из VS Code, а также загружать файлы с серверов Pantheon.

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

Установите SFTP-расширение VS Code.

Откройте палитру команд VS Code (Ctrl/Command + Shift + P) и запустите SFTP: config, чтобы открыть файл конфигурации SFTP.

Отредактируйте файл, используя информацию о подключении на панели управления сайтом, нажав кнопку «Подключиться по SFTP» в режиме разработки. Удалите строку remotePath, так как путь может измениться, и вы будете автоматически перенаправлены в нужное место:

Если к вашей учетной записи Pantheon добавлен SSH-ключ, укажите путь к нему:

Если вы не используете ключ, вам будет предложено ввести пароль при использовании SFTP. Дополнительную информацию см. в разделе Учетные данные панели управления.

Предупреждение

Если при использовании ключа RSA вы получаете сообщение об ошибке Ошибка при подписании данных с помощью privateKey: error:06000066:подпрограммы открытого ключа:OPENSSL_internal:DECODE_ERROR , вы должны преобразовать свой ключ в формат PEM:

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

Дополнительные сведения см. в разделе об этой проблеме в репозитории подключаемого модуля vscode-sftp на GitHub.

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

Расширения для CMS

Основные функции VS Code можно расширить, добавив сторонние расширения, некоторые из которых существуют для Drupal, WordPress и PHP. Посетите указанные ниже сайты, чтобы найти полезные расширения для CMS.

Примечание

Поддерживается только удаленная машина Linux.Некоторые функции (например, просмотр файлов) могут не работать в других операционных системах (например, FreeBSD).

Возможности

Редактируйте удаленные файлы Linux напрямую в VS Code без использования временных файлов.
Чрезвычайно быстрое и недорогое отслеживание файлов для обнаружения изменений удаленной файловой системы.
Удобная загрузка/загрузка с отчетами о ходе выполнения и отменой.

Команды

Все команды сгруппированы в категорию SFTP.

SFTP: откройте папку, чтобы открыть удаленную папку
SFTP: Добавить папку, чтобы добавить удаленную папку в рабочую область.
SFTP: «Открыть файл», чтобы открыть удаленный файл.
SFTP: загрузка для загрузки удаленного файла/папки
Для пользователей, отличных от Windows, SFTP: Загрузить, чтобы загрузить файл/папку на удаленный сервер.
Для пользователей Windows: SFTP: Загрузить папку, чтобы загрузить папку на удаленный сервер.
Для пользователей Windows: SFTP: Загрузить файл, чтобы загрузить файл на удаленный сервер.
SFTP: удалить конфигурацию, чтобы удалить учетные данные SSH, хранящиеся в VS Code.
SFTP: Помогите показать этот справочный документ

Конфигурация учетных данных SSH

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

"порт": использовать 22 по умолчанию
"privateKeyFile": используйте абсолютный путь
необходимы "порт", "имя пользователя" и один из ["пароль", "privateKeyFile"].
"фраза-пароль" также необходима, если она нужна вашему "privateKeyFile".

Примечание

Конфигурации учетных данных хранятся без шифрования в VS Code, включая «хост», «порт», «имя пользователя», «пароль», «парольная фраза» и privateKey из «privateKeyFile». " . Вы можете использовать SFTP: Удалить конфигурацию для удаления конфигураций.

Быстрый старт

1. Команда триггера

Запуск связанной команды с помощью палитры команд, контекстного меню «Исследовать» или контекстного меню редактора.

2. Введите учетные данные SSH

После выбора параметра "Добавить новую конфигурацию SFTP" требуется учетная информация, запрашивая у пользователя отредактировать временный файл json.

3. Выберите удаленный файл/папку

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

Выбрать . (Подтвердить текущую папку), чтобы подтвердить выбор текущей папки.
Выберите «Создать новую папку», чтобы создать новую папку.
Выберите имя папки, чтобы перейти к ней.
Выберите имя файла, чтобы выбрать файл.

4. Пример открытия папки

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

1. Не удалось создать символическую ссылку в Windows

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

2. Не удалось обработать удаленные файлы, если имя файла содержит \

Имя файла Linux может содержать \ , но в VS Code оно будет рассматриваться как разделитель пути.

Спасибо

Искренне благодарим всех, кто внес свой вклад в это расширение.

Вы хотите удаленно редактировать файлы через SFTP в VSCode (Visual Studio Code)?

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

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

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

Предпосылки

В статье в качестве примера мы будем использовать SFTP (VSCode-sftp) от liximomo.

Установите VSCode-sftp

Откройте Visual Studio Code и перейдите на вкладку "Расширение"

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

VSCode-SFTP: подключение к другим машинам

Чтобы иметь возможность использовать SFTP в VSCode, вам нужно работать в папке/каталоге. Откройте каталог, нажав Ctrl + K и Ctrl + O, затем выберите его.

Открыв каталог в VSCode, давайте откроем конфигурацию расширения SFTP. Сначала вызовите палитру команд, нажав Ctrl+Shift+P. Введите sftp config в поле поиска и выберите SFTP: Config. Файл конфигурации расширения SFTP будет открыт немедленно.

Здесь вы можете установить имя для рабочей области, имя хоста или IP-адрес, имя пользователя, пароль (необязательно). Вы также сможете изменить параметр uploadOnSave на false, чтобы файлы не загружались сразу после их сохранения.

Обязательно задайте для параметра remotePath каталог, для которого у вас есть соответствующие разрешения (чтение и запись). Если

Этот файл конфигурации теперь сохраняется в папке/каталоге, который вы открыли, с именем sftp.json и применяется только к определенному каталогу.

VSCode-SFTP: загружать отредактированные файлы на сервер

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

После того, как вы введете правильный пароль, vscode-sftp автоматически загрузит файл на сервер по протоколу SFTP.

Обратите внимание, что весь каталог не будет синхронизироваться с сервером, а только измененные файлы. Например, у нас была куча файлов в каталоге, но мы редактировали только один файл с именем «Check.php». Только этот файл будет распознан vscode-sftp и загружен на сервер.

VSCode-SFTP: редактировать файлы на сервере

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

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

Для большей безопасности вы можете сгенерировать пару ключей SSH и поместить ее в свой домашний каталог. На компьютере с Windows это будет C:\Users\your_username\.ssh\config . В Linux пользователям придется поместить ключи SSH в ~/. **ssh**/authorized_keys .

После того, как вы пройдете аутентификацию одним из двух указанных выше способов, vscode-sftp сможет загружать файлы в remotePath (указанный в sftp.json ) и отображать их на вкладке SFTP.

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

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

Заключение

Вот и все. Мы продемонстрировали базовое использование расширения VSCode-SFTP. Лично мы находим расширение не совсем простым в использовании, как мы ожидаем. Но для людей, которые ежедневно возятся с разными серверами, это может быть полезно.

SSH FS — еще одно расширение, которое выглядит более перспективным. Он более продвинутый с точки зрения функций, но более простой в использовании, потому что вы сможете смонтировать удаленный каталог как локальный каталог рабочей области. Мы расскажем об этом на LinuxPip в ближайшее время, следите за обновлениями.

Visual Studio Code популярен среди разработчиков. Это редактор кода с открытым исходным кодом, доступный для операционных систем Windows, Linux и macOS. Этот редактор кода разработан Microsoft. Код Visual Studio (сокращенная форма кода VS) включает поддержку встроенного терминала, встроенного элемента управления Git, подсветки синтаксиса, фрагментов кода, рефакторинга кода и многого другого. В дополнение к этому вы можете установить расширения для выполнения различных задач. На их торговой площадке можно найти тысячи расширений VS Code абсолютно бесплатно.

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

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

Просмотр удаленных файлов с помощью Remote Explorer
Разница между локальным и удаленным
Синхронизировать каталог
Загрузить/Скачать
Загрузить при сохранении

Как установить расширение sftp в VS Code

Чтобы использовать расширение sftp, в вашей системе должен быть установлен Visual Studio Code. Для установки расширения откройте редактор и щелкните значок расширения на левой боковой панели. В поле поиска введите «sftp», и вы увидите список расширений.

Из списка выберите расширение, разработанное liximomo. Нажмите кнопку установки рядом с расширением.

Расширение будет установлено глобально в вашей системе.

Как использовать расширение sftp в VS Code

Установив расширение, давайте посмотрим, как его использовать. Откройте свой проект в редакторе VS Code. Вы можете сделать это из Файл->Открыть папку и выбрать каталог проекта.

Нажмите Ctrl+Shift+P, если вы используете Windows/Linux, или Cmd+Shift+P на Mac, чтобы открыть палитру команд.Введите SFTP и выберите параметр SFTP:config.

Это откроет файл sftp.json в редакторе. Вы получите примерно следующее содержимое в файле sftp.json.

Укажите данные, такие как протокол, хост, имя пользователя, удаленный путь и т. д. Порт по умолчанию – 22. Вы можете изменить его, если используете другой порт. Я рекомендую оставить значение «uploadOnSave» равным false, чтобы файл не загружался автоматически при его сохранении. При использовании расширения убедитесь, что локальный и удаленный проекты имеют одинаковую структуру файлов и папок.

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

Обратите внимание, что вы еще не ввели свой пароль. Расширение запрашивает пароль при первом выполнении операции, и это одноразовый процесс.

Откроем любой файл из вашего проекта. Щелкнув правой кнопкой мыши, вы увидите опцию «Загрузить и скачать». Щелкните любой из них, и он запросит пароль.

Добавьте пароль и нажмите Enter. Расширение sftp надежно сохранило ваш пароль, и теперь вам не нужно вводить его снова, пока ваш редактор открыт. Если вы не хотите запрашивать пароль при повторном открытии редактора, добавьте следующую пару "ключ-значение" в файл sftp.json.

Дополнительные возможности расширения sftp

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

Еще одна интересная функция – синхронизировать локальную сеть с удаленной и наоборот. Для этого вам нужно открыть палитру команд и ввести «Синхронизировать», это даст вам варианты «Синхронизировать локально -> Удаленно» и «Синхронизировать удаленно -> Локально».

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

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

Статьи по теме

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

Читайте также: