Плагин SFTP для соединения VS Code с сервером

фото автора StockShablonov Валерий
Ср 27 сентября 2023
Рубрика поста: Мой Блокнот

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

Читать этот пост...

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

Почему стоит установить плагин SFTP, какие его преимущества и почему плагин VS Code SFTP предпочитают многие разработчики, я коротко опишу в своём блокноте it-шника.

Почему я установил плагин Vs Code SFTP

Вначале соей работы я, как и многие программисты сталкивались с неудобными манипуляциями. Что бы внести какие-то правки на сайте, нужно сгружать файлы WordPress с сервера. После редактирования снова загружать файлы вручную, на сервер. Как я это делал, через sPanel на Хостинге или через FileZilla, не важно, это всё равно занимало время. 

У меня, я уверен, что, как и у многих программистов возник вопрос, нельзя ли оптимизировать этот процесс? И вот чудо, после поиска в Интернете я быстро наткнулся на плагин VS SFTP от автора liximomo. И был в восторге, потому что плагин решает именно мою проблему.

Как работает VS CODE SFTP

По сути, плагин создает интерфейс SFTP или FTP, в зависимости от того, что вам нужно или что вы предпочитаете. Затем локальное рабочее пространство синхронизируется с сервером. Сама синхронизация работает в обе стороны:

  • Из локальной рабочей области на сервер
  • С сервера в локальное рабочее пространство
  • Ручная синхронизация отдельных файлов или всей папки
  • Автоматическая синхронизация сразу после сохранения файлов с помощью Visual Studio Code.

Как установить и настроить плагин Vs Code SFTP

  1. Откройте редактор кода Visual Studio.
  2. Нажмите следующие клавиши: CTRL + SHIFT + X. Слева откроется область расширений.
  3. В поле поиска расширения введите название плагина «SFTP» и нажмите Enter. Вы увидите различные плагины.
  4. Установите расширение от автора liximomo. Для этого нажмите «Установить».

Конфигурация и синхронизация

После установки мы создаем файл .json в нужной папке.

  1. Для этого нажмите сочетание клавиш «CTRL+SHIFT+P». В верхней части редактора откроется поле поиска.
  2. Введите SFTP: Config или выберите из предложенных.
  3. Ваши рабочие папки будут отображаться в рабочей области. Теперь выберите нужную папку.
  4. Плагин VS Code SFTP создаст файл .json в нужной папке. Теперь нам предстоит файл настроить.

Заполните файл правильно, чтобы синхронизация произошла успешно.

Теперь на боковой панели редактора VSCode вы можете найти новый значок. Все ваши соединения хранятся там. При нажатии на соединение автоматически устанавливается соединение по FTP. Вы можете использовать SFTP, если отредактируете «protocol» в SFTP:

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

Кстати, так можно сделать сразу несколько записей:

Здесь важно указать «context». Я введу здесь то же самое, что и для «remotePath». Без указания context отображается только последняя запись в списке SFTP.

Если есть проблемы с доступом по SFTP, поможет сохраненный ключ SSH. Получив ключ, вы можете сохранить его с помощью SFTP:

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

Как пример настройки, я укажу сервер Hostiq

  • В разделе «name» вы можете указать ключевое слово, чтобы быстро находить нужную вам настройку. В моем случае я пишу «соединение #1».
  • В поле «host» нужно ввести адрес сервера. Например, для Хостинга Hostiq это будет «uashared15.twinservers.net». Поэтому замените «localhost» на «uashared15.twinservers.net».
  • В разделе «protocol» я рекомендую использовать «sftp». Но «ftp» тоже работает.
  • В зависимости от «протокола» выберите «22» (SFTP) или «21» (FTP).
  • В разделе «username» введите имя пользователя для SFTP, назначенное в Hostiq.
  • Строка «password» отсутствует. Создайте это самостоятельно и введите здесь главный пароль от Hostiq.
  • В разделе «remotePath» введите каталог сервера который вы хотите синхронизировать в будущем. Для установки WordPress это может выглядеть так: (/папка веб-сайта/wp-content/themes/папка темы).
  • В поле «uploadOnSave» обычно вводится «true». Эта команда автоматически синхронизируется с каждым сохранением в редакторе кода. Значение «false» стоит по умолчанию и при «false» функция авто сохранения отключается.

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

Вы также найдете еще один символ в Проводнике. Он называется «SFTP». Здесь вы можете увидеть файлы, которые в данный момент хранятся на сервере.

29.05.2023

Установить и настроить Live Sass Compiller, расширение для компиляции Scss Sass кода в Css в VS Code, настройка пути и Autoprefix

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

06.01.2022

Создать тему WordPress: краткий обзор наиболее важных функций

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

02.06.2022

Как перенести WordPress сайт с localhost на хостинг. Коротко

Вот и всё, ваш WordPress сайт полностью готов и находится на локальной машине localhost. Теперь чтобы им поделиться в сети и …

12.01.2022

Как настроить капчу на сайте WordPress

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

08.02.2023

HTTPS, SSL и TLS: что это такое и для чего это нужно?

С современным развитием Интернета в последние годы обмен конфиденциальными данными в Интернете увеличился в геометрической прогрессии, а вместе с ним …

Напиши мне. Мои Контакты

В настоящее время я не ищу возможности, но если у вас есть вопрос или вы просто хотите пообщаться, не стесняйтесь отправить мне сообщение, и я свяжусь с вами!