Atol ftp: Atom.io — удобная работа с редактирование кода на сайте в реальном времени по FTP
Atom.io — удобная работа с редактирование кода на сайте в реальном времени по FTP
Atom — очень крутая среда редактирования кода от GitHub. Сайт https://atom.io/
Тут расскажу о редактировании кода на сайте в реальном времени.
Есть 3 основных метода разработки сайтов:
- Редактирование сайта на живую (сайт работает и тут же идет разработка). Этот метод хорош для простых правок или если сайт не боевой.
- Создание тестовой копии сайта где-либо на внешнем хостинге и его разработка.
- Создание локальной копии у себя и загрузка кода по готовности, возможно через GIT (наиболее правильная, но не всегда оптимальная)
Данная статья будет полезная для первых двух методик и бесполезна для третьей.
Итак имеем:
- Сайт на каком либо внешнем хостине с доступом по FTP (или SFTP)
- Редактор Atom
Далее…
Берем тут https://atom.io/packages/Remote-FTP и устанавливаем в Atom через менеджер пакетов
На своем компьютере создаем папку для работы с сайтом. У меня все такие папки хранятся на рабочем столе.
Далее открываем эту папку в редакторе через команду Add Poject
Очень важно, чтобы эта папка была в списке проектов первой. Если это не так, то надо закрыть все проекты и добавить нужную папку.
У нее должна быть синяя рамка слева:
Данные о FTP подключении сохраняются в эту самую папку как файл .ftpconfig
Для этого нужно выполнить команду:
Далее появляется файл
Где обычно заполняются параметры: host, user, pass и иногда remote (указание пути для подключения).
Сохраняем. И проверяем что этот файл сохранился в папке из шага 2.
Если все сделано правильно, то можно подключаться. Для этого даем команду:
Просто щелкаем по нужным файлам, они подгружаются в рабочую папку с сохранением структуры подпапок. Правим и тут же обновленные файлы загружаются на хостинг.
Я по началу опешил от такого. И отключил эту опцию. Но потом все же вернулся к ней, оказалось что это очень удобно. Поправил — тут же посмотрел результат.
6 оцените контент и участвуйте в выборе трендов
Подключение Atom FTP FTPS SFTP
Работа с программой Atom и как подключиться к удаленному сайту через FTP / FTPS / SFTP.
Нужные пакеты
Atom-i18n — установить русский язык интерфейса в программе Atom. Remote-ftp — подключение к серверу через FTP / FTPS / SFTP.
Установка пакета. Находим нужный пакет (Atom » Preferences » Install)
Настройка пакета remote-ftp
Добавляем проект (Файл » Добавить папку с проектом). В файл .ftpconfig вставляем код
{
"protocol": "sftp",
"host": "",
"port": 22,
"user": "admin",
"pass": "",
"promptForPass": false,
"remote": "/home/web/",
"local": "",
"agent": "",
"privatekey": "",
"passphrase": "",
"hosthash": "sha2",
"ignorehost": true,
"connTimeout": 10000,
"keepalive": 10000,
"keyboardInteractive": false,
"keyboardInteractiveForPass": false,
"remoteCommand": "",
"remoteShell": "",
"watch": [],
"watchTimeout": 500
}Заполняем:
"host": " ", //имя хоста или IP-адрес сервера. По умолчанию: localhost
"user": " ", //имя пользователя для аутентификации.
"pass": " ", //пароль для аутентификации
"remote": "/home/web/", //попробуйте использовать абсолютные пути
Подключение к серверу через FTP / FTPS / SFTP
Расширения » Remote FTP » Toggle » Connect
Поиск кода в файлах сайта в Atom
Ctrl + Shift + F (поиск кода в файлах сайта)
Прежде чем искать часть кода в файлах сайта, скачайте файлы в папку проекта.
Для этого достаточно встать на папку и нажать скачать.
Плагины Atom на видеокурсе от Loftblog
В данном видеоуроке мы продолжим знакомство с редактором кода Atom, узнаем как устанавливать и настраивать нужные пакеты. Разберемся, какие дополнения можно и нужно установить для комфортной frontend-разработки.
Установка плагинов Atom
Установка дополнений происходит через специальный раздел меню настроек. Нужный пакет можно найти по имени через строку поиска на странице установки дополнений. Также есть возможность установки через командную строку терминала, где требуется ввести специальную команду и указать название дополнения. После установки рекомендуется перезагрузить редактор Atom.
Плагины Atom, необходимые для frontend-разработки
Познакомимся с минимальным набором плагинов Atom для современной фронтенд-разработки:
1) Autocomplete+ обеспечивает автозаполнение при введении html-тэгов и атрибутов. При вводе нескольких символов выражения, дополнение формирует выпадающий список с вариантами команд для подстановки в текст кода.
2) Color-Picker добавляет в интерфейс редактора панель с выбором цвета и цветовой палитрой. Этот плагин Atom помогает быстрее и нагляднее выбирать цвет для стилизации элементов верстки. Обладает множеством настроек для обеспечения более удобного процесса работы.
3) Emmet повышает скорость ввода html-тэгов. Добавляет в редактор поддержку специального синтаксиса, который позволяет вводить сразу целую группу тэгов. Может помочь быстро создать иерарихию тэгов, сложные вложения элементов и создать сразу несколько одинаковых тэгов. Дополнение широко используется разработчиками и доступно для всех популярных редакторов кода.
4) Minimap. Плагин Atom создает превью полного кода страницы открытого файла. Позволяет быстро и удобно перемещаться в разные участки кода. Также есть ряд опций для более тонкой настройки дополнения.
5) Atom-Beautify позволяет быстро, используя простое сочетание клавиш, отформатировать внешний вид кода, согласно его структуре (дополнительные отступы для вложенных элементов кода и др.). Удобно читаемый код — это один из принципов командной разработки. Данный плагин Atom помогает быстро привести свой код в порядок.
6) Git Plus. Дополнение обеспечивает комфортную поддержку системы контроля версий Git без использования терминала. Добавляет удобный интерфейс для синхронизации изменений с git-репозиторием и панель управления для быстрого выбора команд управления процессами обмена кодом.
7) Remote FTP. Добавляет возможность соединения с удаленными FTP-серверами (также и через SSH-протокол). После настройки появляется специальное окно, где отображается содержимое сервера. Этот плагин Atom позволяет редактировать файлы прямо на сервере.
Приятного всем просмотра! Учитесь с удовольствием!
Полезные ссылки:
Autocomplete-plus https://atom.io/packages/autocomplete-plus
Color-picker https://atom.io/packages/color-picker
Emmet https://atom.io/packages/emmet
Minimap https://atom.io/packages/minimap
Atom-beautify https://atom.io/packages/atom-beautify
Git plus https://atom.io/packages/git-plus
https://atom.io/packages/remote-ftp
Рекомендуемые курсы
Средство разработки: Atom
Пользователи Linux могут вести разработку даже во встроенном в большинство дистрибутивов редакторе vi. К сожалению, с помощью него будет проблематично написать серьёзный проект длиной ~100 тысяч строк. Просто потому что большое количество времени уйдёт на механические действия, к примеру, выравнивание строк и набор названий функций. Но есть редактор Atom, который облегчает и ускоряет разработку. Он даёт подсказки по названиям функций и автоматически вставляет выбранные. В Atom можно часть тега, а вторая часть будет дописана автоматически. В Atom есть подсветка синтаксиса (в том числе HTML, PHP, CSS, XML) и плагины, которые ещё больше расширяют возможности редактора.
Скачать клиент Atom можно бесплатно на официальном сайте проекта.
Как редактировать файлы на сайте через Atom
Для начинающих программистов редактор Atom будет синонимом редактору Notepad++. Поэтому дальше описание будет практически идентичным:
Для начинающего пользователя нет нужды разделять процесс разработки на «черновик» и «чистовик». Можно делать все изменения непосредственно на сайте проекта. Потому что посещаемость проекта не настолько большая, чтобы ошибка в разработке привела к потере денег от простоя проекта. Поэтому вполне нормально изменять файлы сайта непосредственно на сервере, без скачивания к себе на компьютер.
Atom по умолчанию не умеет подсоединяться к серверу и редактировать/ удалять/ создавать файлы на сайте. Чтобы он научился это делать, необходимо установить плагин «ftp-remote-edit«. С помощью этого плагина вы сможете редактировать любые файлы на своём сайте без загрузки их к себе на компьютер. Это сильно ускоряет процесс разработки, а также процесс обучения. Далее будет описана часть процесса установки плагина и работы с ним. Для начала скачайте и установите Atom. Запустите его и в верхнем меню найдите пункт «Edit» — «Preferences»:
Откроется меню настроек. В левой части выберите пункт «Install». В поисковую строку введите название плагина «ftp-remote-edit»:
Нажмите на кнопку «Install», чтобы установить плагин. После завершения установки перезагрузите Atom и нажмите комбинацию «Ctrl + Пробел». Откроется боковое меню. В будущем, в этом меню будет список сохранённых серверов. А когда соединение с одним из сервером будет установлено, то в этом боковом меню будет показан список файлов и папок на сайте.
Теперь необходимо задать настройки подключения к сайту, чтобы подключаться в один клик, без ввода пароля. Для этого кликните правой кнопкой мыши по пустому пространству в боковом меню плагина и выберите пункт «Edit Servers»:
Кликните на этот пункт и откроется окно, в котором необходимо настроить и сохранить подключение к серверу. Введите все данные сервера: ip адрес, протокол для связи FTP/SFTP, имя и пароль пользователя. Настоятельно рекомендуем передавать файлы через SFTP. В противном случае они передаются без шифрования, их можно перехватить и прочитать.
Настоятельно рекомендуем передавать файлы через SFTP, а не FTP. В противном случае они передаются без шифрования, их можно перехватить и прочитать.
Затем сохраните настройки с помощью кнопки «Save» внизу формы. После чего в боковом меню появится сервер. Можно кликнуть на него один раз и начнётся подключение. Если все настройки введены правильно, то произойдёт подключение к серверу, и будет показан список файлов на сервере.
Кликните два раза на файл, и он откроется в режиме редактирования. Сохраните файл и он будет автоматически обновлён на сервере.
Полезные плагины Atom
В предыдущем параграфе мы разобрали, как пользоваться плагином «ftp-remote-edit«, который позволяет редактировать файлы удалённо. Но в Atom есть и другие очень полезные плагины. Перечислим часть из них:
Emmet — плагин для быстрого написания HTML кода
С плагина Emmet можно быстрее писать код. К примеру, если вам нужен HTML код маркированного списка для с 3 пунктами, то вы начинаете писать в редакторе такую строку:
ul>li*3>После чего нажимаете клавишу TAB на клавиатуре и появляется список:
<ul>
<li></li>
<li></li>
<li></li>
</ul>Это простейший пример. Представьте, что появилась задача сделать HTML таблицу с 8 строками и 15 ячейками в каждой. Конечно, можно руками написать весь код, но это займёт время. Намного легче набрать такую строку и нажать TAB:
table>tr*8>td*15>И появится код таблицы с 8 строками и 15 ячейками в каждой. Ознакомьтесь с описанием плагина
highlight-selected — плагин для подсветки одинаковых кусков кода
С помощью плагина highlight-selected можно подсветить все куски кода в документе, которые совпадает по значению с выделенным:
Эта функция чрезвычайно полезна, потому что помогает искать описки в названиях переменных и функций. Кликните на переменную и все её упоминания на странице будут подсвечены. А если не будут, то значит там ошибка-описка в написании.
simple-drag-drop-text — плагин для перетаскивания текста
Редактор Atom — это легковесный редактор, из которого убрано всё лишнее. Каждый настраивает его под себя, добавляя необходимые функции. Одной из самых востребованных функций является перетаскивание текста. Его можно сделать с помощью плагина simple-drag-drop-text
Во время перетаскивания можно зажать клавишу Ctrl, тогда текст будет скопирован, а не вырезан.
Дополнительно про Atom
Atom есть как на Linux, так и на Wondows. Поэтому если работаете на Windows и Atom не понравится, то всегда можете установить Notepad++.
Для загрузки большого количества файлов на сервер рекомендуем использовать программу FileZilla.
Atom.io — удобная работа с редактированием кода на сайте в реальном времени по FTP
Atom — очень крутая среда редактирования кода от GitHub. Сайт https://atom.io/
Тут расскажу о редактировании кода на сайте в реальном времени.
Есть 3 основных метода разработки сайтов:
- Редактирование сайта на живую (сайт работает и тут же идет разработка). Этот метод хорош для простых правок или если сайт не боевой.
- Создание тестовой копии сайта где-либо на внешнем хостинге и его разработка.
- Создание новой копии у себя и загрузки кода по готовности, возможно через GIT (наиболее правильная, но не всегда оптимальная)
Данная статья будет полезная для первых двух методик и бесполезна для третьей.
Итак имеем:
- Сайт на каком-либо внешнем хостине с доступом по FTP (или SFTP)
- Редактор Atom
Далее…
Берем тут https://atom.io/packages/Remote-FTP и установить в Atom через менеджер пакетов
На своем компьютере создаем папку для работы с сайтом.У меня все такие папки хранятся на рабочем столе.
Далее открываем эту папку в редакторе через команду Добавить проект
Очень важно, чтобы папка была в списке проектов первой. Если это не так, то надо закрыть все проекты и добавить нужную папку.
У нее должна быть синяя рамка слева:
Данные о FTP-подключении сохраняются в этой самой папке .ftpconfig
Для этого нужно выполнить команду:
Далее появляется файл
Где обычно записываются параметры : host, user, pass и иногда remote (указание пути для подключения).
Сохраняем. И проверяем что этот файл сохранился в папке из шага 2.
Если все сделано правильно, то можно подключаться. Для этого даем команду:
Просто щелкаем по нужным файлам, они подгружаются в рабочую службу с сохранением структуры подпапок. Правим и тут же обновленные файлы загружаются на хостинг.
Я по началу опешил от такого. И отключил эту опцию. Но потом все же вернулся к ней, оказалось что это очень удобно. Поправил — тут же посмотрел результат.
6 оцените контент и участвуйте в выборе трендов.
Подключение Atom FTP FTPS SFTP
Работа с программой Atom и как подключиться к удаленному сайту через FTP / FTPS / SFTP.
Нужные пакеты
Atom-i18n — установить русский язык интерфейса в программе Atom. Remote-ftp — подключение к серверу через FTP / FTPS / SFTP.
Установка пакета. Находим нужный пакет (Atom »Настройки» Установить)
Настройка пакета remote-ftp
Добавляем проект (Файл »Добавить папку с проектом).В файл .ftpconfig вставляем код
{
"протокол": "SFTP",
"хост": "",
«порт»: 22,
"пользователь": "администратор",
"проходить": "",
"promptForPass": ложь,
"удаленный": "/ главная / сеть /",
"местный": "",
"агент": "",
"приватный ключ": "",
"кодовая фраза": "",
"hosthash": "sha2",
"ignorehost": правда,
"connTimeout": 10000,
"keepalive": 10000,
"keyboardInteractive": false,
"keyboardInteractiveForPass": false,
"remoteCommand": "",
"remoteShell": "",
"смотреть": [],
"watchTimeout": 500
} Заполняем:
"host": "", // имя хоста или IP-адрес сервера.По умолчанию: localhost
"user": "", // имя пользователя для аутентификации.
"pass": "", // пароль для аутентификации
"remote": "/ home / web /", // Попробуйте использовать абсолютные пути
Подключение к серверу через FTP / FTPS / SFTP
Расширения »Удаленный FTP» Переключить »Подключить
Поиск кода в файлах сайта в Atom
Ctrl + Shift + F (поиск кода в файлах сайта)
Прежде чем искать чем часть кода в файлах сайта, скачайте файлы в папку проекта.
Для этого достаточно встать на кнопку и нажать скачать.
.
Средство разработки: Atom
.
Пользователи могут вести правила даже во встроенном в большинстве дистрибутивов редактора vi. К сожалению, с помощью него будет проблематично написать серьёзный проект длиной ~ 100 тысяч строк. Просто потому что большое количество времени уйдёт на механические действия, к примеру, выравнивание строк и набор названий функций. Но есть редактор Atom, который облегчает и ускоряет разрешение. Он даёт подсказки по названиям функций и автоматически вставляет выбранные.В Atom можно часть тега, а вторая часть будет дописана автоматически. В Atom есть подсветка синтаксиса (в том числе HTML, PHP, CSS, XML) и плагины, которые ещё больше расширяют возможности редактора.
Скачать клиент Atom можно бесплатно на официальном сайте проекта.
Как редактировать файлы на сайте через Atom
Для начинающих программистов редактор Atom будет синонимом редактору Notepad ++. Поэтому дальше описание будет идентичным:
Для начинающего пользователя нет нужды разделять процесс разработки на «черновик» и «чистовик».Можно делать все изменения непосредственно на сайте проекта. Потому что посещаемость проекта не настолько большая, чтобы ошибка в разработке привела к потере денег от простоя проекта. Поэтому вполне нормально файлы сайта непосредственно на сервере, без загрузки к себе на компьютер.
Atom по умолчанию не умеет подключаться к серверу и редактировать / удалять / создавать файлы на сайте. Чтобы он научился это делать, необходимо установить плагин « ftp-remote-edit «.С помощью этого плагина вы сможете редактировать любые файлы на своём сайте без загрузки их к себе на компьютер. Это сильно ускоряет процесс разработки, а также процесс обучения. Далее будет описана часть процесса установки плагина и работы с ним. Для начала скачайте и установите Atom. Запустите его и в меню найдите пункт «Редактировать» — «Настройки»:
Откроется меню настроек. В левой части пункта «Установить». В поисковую введите название плагина «ftp-remote-edit»:
Нажмите на кнопку «Install», чтобы установить плагин.После завершения установки перезагрузите Atom комбинацию «Ctrl + Пробел». Откроется боковое меню. В будущем, в этом меню будет список сохраненных серверов. А когда соединение с одним из серверов будет установлено, то в этом боковом меню будет показан список файлов и папок на сайте.
Теперь необходимо настроить подключение к сайту, чтобы подключаться в один клик, без ввода пароля. Для этого кликните правой кнопкой мыши по пустому пространству в боковом меню и выберите пункт «Редактировать серверы»:
Кликните на этот пункт и откроется окно, в котором необходимо настроить и сохранить подключение к серверу.Введите все данные сервера: ip адрес, протокол для связи FTP / SFTP, имя и пароль пользователя. Настоятельно рекомендуемый файл через SFTP. В противном случае они передаются без шифрования, их можно перехватить и прочитать.
Настроенный файл через SFTP, а не FTP. В противном случае они передаются без шифрования, их можно перехватить и прочитать.
Затем сохраните настройки с помощью кнопки «Сохранить» внизу формы. После чего в боковом меню появится сервер.Можно кликнуть на него один раз и начнётся подключение. Если все настройки введены правильно, то произойдёт подключение к серверу, и будет показан список файлов на сервере.
Кликните два раза на файл, и он откроется в режиме редактирования. Сохраните файл и он будет автоматически обновлён на сервере.
Полезные плагины Atom
В предыдущем параграфе мы разобрали, как пользоваться плагином « ftp-remote-edit «, который позволяет редактировать файлы удалённо. Но в Atom есть и другие очень полезные плагины.Перечислим часть из них:
Emmet — плагин для быстрого написания HTML кода
С плагина Emmet можно быстрее писать код. К примеру, если вам нужен HTML код маркированного списка для с 3 пунктами, то вы начинаете в редакторе такую строку:
ul> li * 3> После чего нажимаете TAB на клавиатуре и появляется список:
-
-
-
Это простейший пример.Представьте, что появилась задача сделать HTML таблицу с 8 строками и 15 ячейками в каждой. Конечно, можно руками написать весь код, но это займёт время. Намного легче набрать такую строку и нажать TAB:
таблица> tr * 8> td * 15> И появится код таблицы с 8 строками и 15 ячейками в каждой. Ознакомьтесь с описанием плагина
highlight-selected — плагин для подсветки одинаковых кусков кода
С помощью плагина highlight-selected можно подсветить все куски кода в документе, которые совпадает по значению с выделенным:
Эта функция полезна, потому что помогает искать описки в названиях чисел и функций.Кликните на переменную и все её упоминания на странице будут подсвечены. А если не будут, то значит там ошибка-описка в написании.
simple-drag-drop-text — плагин для перетаскивания текста
Редактор Atom — это легковесный редактор, из которого убрано всё лишнее. Каждый настраивает его под себя. Одной из самых востребованных функций является перетаскивание текста. Его можно сделать с помощью плагина простым перетаскиванием текста
Во время перетаскивания можно зажать инструмент Ctrl, тогда текст будет скопирован, а не вырезан.
Дополнительно про Атом
У Atom есть как на Linux, так и на Wondows. Поэтому если работает на Windows и Atom не понравится, то всегда можно установить Notepad ++.
Для загрузки большого количества файлов на сервер рекомендуем использовать программу FileZilla.
.