Remote development with visual studio code remote

2: Настройка плагина Remote-SSH и подключение к серверу

Теперь, когда у вас установлен плагин, вы можете настроить его для подключения к серверу. Для этого вам понадобится следующая информация:

• IP-адрес сервера или имя хоста.
• Имя пользователя, с помощью которого вы подключитесь.
• Закрытый ключ для аутентификации пользователя.

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

После установки Remote-SSH в левом нижнем углу интерфейса Visual Studio Code появится маленький зеленый прямоугольник. Если вы наведете указатель мыши на поле, всплывающее окно подскажет «Open a remote window». Найдите кнопку, которая выглядит как символы > и <, расположенные по диагонали друг от друга.

Нажмите эту кнопку, и вверху появится диалоговое окно. Выберите из списка Remote-SSH: Open Configuration File…

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

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

Host my_remote_server

HostName your_server_ip_or_hostname

User 8host

IdentityFile /location/of/your/private/key

Вот как работает этот файл:

• Host: имя вашего хоста. Это поле позволяет использовать короткое имя или аббревиатуру вместо полного IP-адреса или имени хоста при подключении к серверу.
• HostName: фактическое имя хоста сервера, это либо IP-адрес, либо полный домен.
• User: пользователь, с помощью которого вы создадите подключение.
• IdentityFile: путь к вашему закрытому ключу SSH. В системах Mac и Linux он хранится в домашнем каталоге, в скрытом каталоге .ssh. Обычно он называется id_rsa. Если вы работаете в Windows, вы должны были указать место для сохранения этого файла, когда создавали его с помощью putty-gen.

Укажите соответствующие значения в файле и сохраните его.

Visual Studio Code настроен и готов подключиться к вашему серверу. Нажмите зеленую кнопку Open a remote window в нижнем левом углу и выберите Remote-SSH: Connect to Host…

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

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

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

ssh-keygen -l -f /etc/ssh/ssh_host_key.pub

Если этот отпечаток совпадает с тем, который вы видите в диалоговом окне Visual Studio Code, то вы подключаетесь к правильному серверу. Можно нажать Continue.

При создании нового соединения Visual Studio Code по умолчанию открывает новое окно. Вы увидите окно приветствия. Ваше соединение успешно создано, если вы видите «SSH: your_ip_address_or_hostname» в зеленом поле в нижнем левом углу. Это означает, что Visual Studio Code подключен и взаимодействует с вашим удаленным сервером.

Теперь вы можете запускать команды и код из вашего редактора.

More to Explore

VS Code’s remote debugging feature can also help if you need to investigate CPU or memory use. The Flame Chart Visualizer for JavaScript extension provides a real-time chart of CPU and memory use of the process and a flame chart to help you identify CPU hotspots in your code.

Example flame chart

And you can use VS Code to debug more than just Node.js remotely: use it to connect to an Elixir cluster, a Go process, a Ruby process, and much more. There are VS Code extensions available for all popular languages that enable remote debugging for that language.

What are you going to use Render SSH for? Let me know!

Какой редактор когда выбрать?

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

Если вы стараетесь найти более современную и продвинутую замену Блокноту Windows, которая позволит комфортно работать с консольными скриптами, просматривать логи и править конфигурационные файлы, то наиболее подходящим вариантом будет Notepad++.

Для разработчиков или тех кому периодически приходится заниматься программированием стоит обратить внимание на Sublime Text и Visual Studio Code. Редактор Atom будет наиболее удобен для разработки сайтов и веб-приложений

Редактор Atom будет наиболее удобен для разработки сайтов и веб-приложений.

Автоформатирование кода

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

1. Возьмем для примера функцию, отступы в которой выстроены случайным образом.
2. Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
3. Смотрим на код и видим, что он преобразился и принял аккуратный вид.

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

Настройка SSH-соединения в редакторе VSCode

Есть два способа настроить подключение по SSH.

• Аутентификация с вводом пароля.
• Аутентификация через SSH ключи.

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

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

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

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

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

Вот как работает этот файл конфигурации:

• Host: указывает имя вашего хоста. Это позволяет использовать короткое имя или аббревиатуру вместо полного IP-адреса либо имя хоста при подключении к серверу.
• HostName: фактическое имя хоста сервера, которое представляет собой либо IP-адрес, либо полностью квалифицированное доменное имя.
• User: пользователь, от имени которого вы хотите выполнить подключение.
• IdentityFile: путь к вашему закрытому ключу SSH. На системах Mac и Linux вы найдете ее в домашнем каталоге в скрытом каталоге , обычно . Если вы используете Windows, у вас будет указано местоположение для сохранения этого файла при его создании с помощью .

Подключитесь к удаленному серверу SSH с помощью ввода пароля в VSCode

Теперь давайте подключимся к удаленному хосту, нажав или -> -> -> .

Теперь вам будет предложено проверить fingerprint, поскольку это первое подключение к удаленному компьютеру.

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

Подключитесь к удаленному серверу SSH с помощью ключа авторизации в VSCode

Для активации SSH key-based authentication, сгенерируйте пару публичного и приватного ssh ключей с помощью следующей команды.

И скопируйте публичный ключ на удаленный сервер с помощью следующей команды (заменив username@host на своё значение)

Теперь войдите на хост вручную, чтобы проверить, нормально ли работает аутентификация на основе ключей. Затем, откройте файл конфигурации SSH в VScode и добавьте параметр ниже. Этот параметр направляет на ваш файл с секретным ключом и указывает vscode использовать аутентификацию на основе ключей вместо аутентификации на основе пароля.

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

Чтобы открыть логи, нажмите или –> –> .

Чтобы закрыть активное соединение, выберите , нажав или -> -> , или просто закройте vscode, который отключит сеанс.

IntelliJ IDEA

IntelliJ IDEA — Java-ориентированная платформа для разработки от JetBrains. Несмотря на это, она позволяет работать со всеми языками, которые мы упоминали выше (HTML, CSS, JavaScript, PHP и Python). Из коробки вам будут доступны инструменты для написания кода на HTML, CSS и JavaScript (в версии Ultimate). Поддержку PHP и Python можно добавить с помощью плагинов.

IntelliJ IDEA доступна для систем Windows, macOS и Linux. Ключевые функции:

— Умное автодополнение, которое предлагает элементы кода исходя из текущего контекста;

— Встроенная отладка;

— Встроенная интеграция с системами контроля версий;

— Интеграция с инструментами сборки, такими как Apache Maven, Gradle и Webpack.

IntelliJ IDEA поставляется в трёх ценовых вариантах. Community-версия доступна бесплатно, однако она не включает себя поддержку JavaScript и работу с инструментами базами данных, что может быть критично для веб-разработки. Стоимость индивидуальной лицензии IntelliJ IDEA Ultimate — 149 $ в год, для организаций же цена составит 499 $ на пользователя в год. Также можно попробовать версию Ultimate бесплатно в течение 90 дней.

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

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

• Локальный компьютер для разработки, работающий под управлением Windows, MacOSX или Linux. Данный обучающий модуль не предназначен для устройств под управлением ChromeOS.
• Среда разработки Visual Studio Code, которую вы можете загрузить и установить с официального сайта.
• Сгенерированная пара ключей SSH:
  • Если вы используете macOS или Linux, то можете перейти к 1-му шагу модуля Настройка ключей SSH в Ubuntu 18.04. Команды аналогичны, т.ч. не беспокойтесь о том, что в обучающем руководстве говорится, что они предназначены для Ubuntu 18.04.
  • Если вы используете Windows, пройдите обучающий модуль Создание ключей SSH с помощью PuTTY в Windows для создания ключа SSH.
  • Если вы используете DigitalOcean, то можете использовать руководство Выгрузка открытых ключей SSH в учетную запись DigitalOcean.
• Один сервер Ubuntu 18.04, настроенный в соответствии с руководством по начальной настройке сервера Ubuntu 18.04, включая пользователя с разрешениями без прав root и брандмауэр.

Step 5: Copy the Public Key to the Remote Server

Login to the remote server via VS Code or any other terminal with password. Check if you have the file under directory. If not, create one by following commands:

cd ~/.ssh  touch authorized_keys 

is the default file name defined by OpenSSH used to store the public keys. You can maintain multiple public keys in this file. Make sure that each key is on a single line and no line-breaks in the middle of the key.

Then maintain your public key (the content in your local file) in this remote file:

-> press to shift to INSERT mode -> paste your public key content here -> press + + to write into and quit the file -> recheck it by .

Now, your secure and convenient remote development workspace in VS Code is ready!

Step 1. Setup Private Keys

Once everything is installed, we now need to make sure that you have
an SSH private key and that this key is registered with your
Git hosting service (for instance, GitHub or Bitbucket). If you already
have keys and have registered them with your hosting provider, please skip
on ahead.

In any case, to generate keys, we’ll again use PowerShell:

Simply follow the prompts to make yourself a new public/private
key pair, making sure to choose a long (~40 character) passphrase.
This passphrase provides much of the entropy for your key, such that
it should be much longer than a typical password. Never type your
passphrase into a remote password prompt— the passphrase is used
to unlock your key locally on your machine, and should never be sent over
the network. If a website asks you for your SSH passphrase, you are probably
being scammed.

By default, the new keys will be located in
and . As the names suggest, the first of
these is the private key and should not be shared with anyone. The other
is the public key, and serves to identify yourself to others. Follow
the instructions for GitHub
or Bitbucket
(for Bitbucket, make sure to follow the Linux and OS X instructions, even
from Windows) to upload your public key to your hosting provider.

Configure the extension

The extension has several settings that you can enter through the command “Remote-SSH: Setting”. At the top of the page, you can specify the path to a custom SSH configuration file and add a default connection timeout. This prevents Visual Studio from hanging for too long when a remote host stops responding. Further down the page, the configuration “Maximum reconnection attempts” enables you to change the behavior of Visual Studio when a connection fails.

The configuration of “Default extensions” enables you to add VS code extensions that will be installed on all remote SSH hosts. These extensions will be universally available, even if you haven’t added them to your active project proceedings.

The following check boxes control automatic agent forwarding. These correspond to the default settings of the SSH client in your SSH configuration file.

More settings allow you to customize how VS Code is exposed and connects to the remote server. You can choose to use a socket instead of a port, group connections in open windows and use a custom SSH binary path. These settings are environment specific; each accompanied by a description of its intended use.

Step 4: Generate SSH Key Pairs

In VS Code Powershell terminal, execute the command:

ssh-keygen

During the key generation, it will prompt:

This allows you define a location to store the keys. Press ENTER to leave it as default.

This allows you enter and double confirm a password to protect your private key (when you type, it won’t display your password). After this, you need to enter this password when you use the private key in future. This is an extra protection. You can press ENTER to skip it.

After the creation, you will see a key’s random art image. And your key pairs are stored in the default hidden directories:

To double check, you can review he key pairs in above location via:

cd ~/.sshls

You will see two new files which stores the private key and which stores the public key. Run to check the key content.

If everything is fine. Now, you can add the path of the private key in the ssh configuration file as Step 2 with name of IdentityFile:

Just keep in mind, one public key can be used multiple times and do NOT share your private key to anyone.

Why SSH?

We primarily built SSH on Render to allow you to get a command line in containers running a service you’ve deployed. We don’t recommend using it in production regularly, but it can be helpful in a pinch, to run a database migration after a deployment or to check the contents of a file being written to disk.

SSHing into a Web Service on Render

But there’s a lot more you can do with SSH. For example, you can to or from your service’s persistent disk. For my own needs, I was curious if I could use Render SSH for port forwarding and eventually remote debugging.

Some of the most frustrating bugs I’ve encountered are those I can’t reproduce locally. I get a bug report from a user along with instructions to reproduce it. I can reproduce the bug in production (running Linux) but surprisingly can’t reproduce it on my Mac. How do I investigate and fix a bug if I can’t reproduce it on my development machine?

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

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

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

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

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

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

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

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

Configuration

The following sections will cover what is required in order to setup both your Visual Studio Code instance, as well as your running Linux instance. Ensure that you have root or administrative privileges to your running Linux instance.

Visual Studio Code

Install the Remote VSCode extension for Visual Studio Code. This extension will enable launch a run-time during the launch of Visual Studio Code which will enable for text file editing over a listening SSH tunnel.

Configuring Remote VSCode Extension

Modify your user or workspace settings (whichever you prefer), and specify the following properties. This configuration file can be found in the directory of your workspace. Alternatively, you can modify your workspace settings by using CTRL + P and searching «workspace».

User settings required for configuring Remote VSCode extension.

This property will ensure that the required run-time for opening a connection with rmate will be running and listening when Visual Studio Code launches. This local run-time will enable for you to open remote files over a SSH connection, that will be configured and setup in the next section.

Step 1 — Installing the Remote-SSH Plugin

The Extensions Marketplace is where you can download supported and third-party extensions for a variety of different tools and programming languages. This is where you will search for the Remote-SSH plugin and install it.

On the left-hand side of the IDE there is a vertical row of five icons. The bottom icon, which looks like four squares in a box with the top right square exploding out, is the icon for the Extensions Marketplace:

You can also access this section by pressing . When you open this page you will see suggested plugins to download and install.

Once you have the Extensions Marketplace open, type in the Search Extensions in Marketplace search bar. When you find the plugin, select it and then click the green Install button to install the extension.

The extension is now installed. Next, you’ll configure the extension so you can connect to your server.

Настройка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How does it work?

Remote capabilities work by installing a VS Code server component on your remote machine. This happens automatically the first time you connect. The server monitors the file system, applies changes and initiates processes requested by the editor.

The server is required for VS Code to have full access to the file system and the ability to run code and run debugging on your host. Regularly, no need to interact with the server procedure, since it is fully managed by its publisher client. You can restart it from the command palette if needed.

Extensions in your The file will also be installed on the remote host. This gives them the same no-compromise access to their files, so most of the extensions will work without problems.

When editing within VS Code, get near-native performance with little overhead. Requests to read and write files are transmitted from the VS Code editor window to the server procedure on the remote host. This interacts with the file system to provide the requested data and make any necessary changes..

Unlike other remote editing extensions, this is focused on providing a complete remote development experience, not just simple file editing. The inclusion of the server component is vital to this approach, since the main functions of the editor are kept close to the code. They are decoupled from the edit window you see and interact with.

Установка

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

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

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

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

На что обратить внимание при выборе среды разработки

1. Поддержка нужной вам операционной системы (ОС)

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

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

3. Поддерживаемые языки (программирования, разумеется). Здесь не забывайте о долгосрочной перспективе — вдруг когда-нибудь вы решите добавить в проект возможности, реализуемые на каком-либо другом языке. Стоит выбрать среду, которая поддерживает несколько языков программирования.

4. Цена вопроса. Есть много бесплатных решений с открытым исходным кодом. Однако, как обычно бывает почти со всем подобным программным обеспечением, стоимость зависит от количества доступных функций.

Чтобы помочь вам определиться, мы собрали 10 лучших IDE и редакторов кода, которые поддерживают популярные языки для веб-разработки (HTML, CSS, JavaScript, PHP и Python). Сразу оговоримся, что это не топ, а список (первый — не значит лучший, последний — не значит самый плохой). Поэтому вы можете выбирать любой инструмент, исходя из своих нужд и предпочтений.

Примечание: все указанные цены актуальны на момент написания материала.

Atom

Еще в августе 2011 года один из основателей GitHub Крис «defunkt» Уонстрат поставил перед собой амбициозную цель: создать редактор, который был бы по-настоящему открытым и предлагал неограниченные возможности для хакинга, но при этом не превращался бы во второй Vim или Emacs (который, как известно, умеет почти все, но только если у тебя мозги как у Джеффа Дина). И вот спустя три года и более чем пятнадцать тысяч коммитов началось публичное бета-тестирование. В марте этого года Atom стал доступен для загрузки всем желающим. Чем же собирается перевернуть наш подход к кодингу знаменитая компания?

Первое, что бросается в глаза при запуске нового детища GitHub, — это невероятно похожий на Sublime Text интерфейс. Само по себе это не минус. Известный факт, что интерфейс Sublime был вдохновлен другим, некогда не менее популярным редактором кода для OS X TextMate. Нынешняя история с Atom и Sublime лишь подчеркивает удачные решения GUI последнего.

Вторая особенность Atom заключается в том, что это, по сути, веб-приложение в обертке Chromium. Нет, конечно, у редактора есть своя иконка в доке, нормальные системные меню и поддержка нативных хоткеев. Просто ядро Atom написано по большей части на CoffeeScript, работает оно на Node.js, а сам интерфейс редактора является HTML-страницей со вполне обычной разметкой. Убедиться в этом можно, если выбрать из меню View пункт Developer -> Toogle developer tools.

Из коробки Atom сильно напоминает Sublime
Другие статьи в выпуске:

Хакер #185. Докажи баг!

• Содержание выпуска
• Подписка на «Хакер»-60%

Третья интересная фишка Atom — его модульность. В лучших традициях экосистемы Node.js он написан с использованием максимального количества открытых модулей (больше пятидесяти). Это значит, что если тебе не нравится какой-то штатный функционал, то, по уверениям разработчиков, ты без труда сможешь подобрать ему замену из более чем 70 тысяч пакетов в npm registry или написать свой плагин. Учитывая, что JavaScript фактически уже давно стал самым популярным языком на GitHub, и у CoffeeScript лишь немного отстает от Perl, это вселяет уверенность в будущее Atom.

Пакетов еще мало, но написать свой действительно просто

А что же с киллер-фичами? Вот тут все не так радужно. То ли дело в молодости проекта, то ли еще в чем-то, но Atom, кроме громкого имени создателей и больших надежд, из коробки не предоставляет ничего, что бы могло заставить часами играться с ним. То, что преподносится разработчиками как преимущества (например, автокомплит, вкладки, коллапс кода, снипеты), может вызвать лишь снисходительную улыбку на лицах адептов Sublime. Да, конечно, Atom уже имеет свой пакетный менеджер, но я не нашел в его репозиториях ничего такого, что было бы нельзя реализовать с помощью плагинов для Sublime.

Using remote connections

After setup is complete, you will be in a normal Visual Studio Code window running operations on the selected host. Click the button “Open folder” at the top left of the sidebar to search for a directory on your server. You may be prompted to acknowledge a Workspace Trust message; if so, click on “Yes” to mark the directory as trusted and enable all editor functions.

Now you will see that the server side directory is displayed in the normal Explorer pane of VS Code. Can open files, view your content and edit them using the familiar workflow. If you are working on a Git repository, you can use the built-in source code control functions to organize and commit your changes as usual.

Directories with files enable features like builds and debugging. VS Code can execute the content of remote directories, giving you a complete development experience. Press F5 to start your application if a build system is set. You can determine breakpoints and walk through your code in the same way as local projects.

The VS code terminal panel at the bottom of your window will additionally connect to the selected host. You can use this to run commands on your remote server.

Once you have opened a directory once, will appear in the Remote Explorer sidebar in the future. Click on its name under SSH host to launch a new VS Code window directly to that remote directory.