Как установить плагин в atom

Настройка Atom

Первым продвинутым блокнотом, которым я начал активно пользоваться, был Notepad++ (до сих пор им часто пользуюсь), потом пытался перейти на Sublime Text. А потом пробовал перейти на Atom, про который говорится в этой статье.

И да. Потом я всё равно перешел на Visual Studio Code.

Установка

Скачиваем либо официальную последнюю версию с сайта, либо текущую последнюю версию y в GitHub:

Запускаем скаченный файл, и он автоматически запустит установку без всяких диалоговых окон, но Windows может поругаться (но мы скачивали с официального репозитория):

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

Первоначальная настройка

Перейдем в настройки приложения File → Settings :

Снимаем галочку с пункта Open Empty Editor On Start в разделе Core , чтобы при запуске программы открывались последние открытые файлы:

Также в разделе Core можно указать папку ваши основных проектов:

В разделе Editor включаем переносы строк Soft Wrap :

В этом же разделе можно указать сколько пробелов будет ставиться при нажатии на табуляцию:

Открытие файлов и каталогов через контекстное меню

Идем File → Settings .

В разделе System добавляем в контекстном меню возможность открывать файлы и папки с помощью Atom:

Сейчас в 2018 году всё работает отлично, но раньше в 2016 году у меня эта команда не помогла, поэтому добавлял вручную в реестр Windows 10. Поэтому, если у вас не работает, то читайте ниже:

Для этого создайте текстовой файл расширения .reg (например, open-w-atom.reg ) с подобным содержанием:

Везде текст C:\\Users\\sensor\\AppData\\Local\\atom\\app-1.11.0-beta5\\atom.exe поменяйте на путь к программе на вашем компьютере. Он будет обязательно другой у вас. И обратите внимание, что в пути у вас должны быть двойные слэши.

После этого запустите сохраненный файл и внесите изменения в реестр. После этого у вас в контекстном меню у файлов и папок появятся такие подобные пункты:

Выбор темы оформления (Material Design)

Идем File → Settings . И там идет в раздел Themes :

Там можно выбрать тему для оформления интерфейса Atom, а также для отображения непосредственно текста в документах:

Вот не люблю я темные темы для текстовых редакторов. Поэтому выбирал светлые темы:

Вот так будет выглядеть редактор с такими темами:

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

Например, популярны темы в стиле Material Design :

Выбранные темы можно установить.

Я себе установил atom-material-ui и atom-material-syntax-light .

И они потом появятся в выборе тем:

Темы также имеют варианты настроек:

Я поменял основной цвет темы:

Сделал компактный вид панели вкладок:

После этих настроек редактор выглядит так:

Проверка орфографии на английском и русском языках

Идем File → Settings . Там идет в пакеты Packages .

В поиске установленных пакетов выбираем spell .

И в пакете spell-checker переходим в настройки:

И в разделе Locales напишите en-US, ru-RU :

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

Также в настройках поставьте галочку около Add Known Words . Тогда вам будет предлагаться добавлять новые слова в словарь:

Вызов подсказок о том, как можно исправить слово, делается через Ctrl + Shift + : :

Не для всех расширений файлов включается проверка орфографии. Чтобы подключить проверку в орфографии для файлов нового расширения, вызовете консоль Ctrl + Shift + P , находясь в файле. Там пропишите Editor: Log Cursor Scope и выберете этот пункт. И вы увидите внизу справа уведомление с одним или несколькими пунктами текста. Один из них будет означать тип документа. Копируем этот тип и закрываем уведомление. Потом идем в настройки нашего пакета проверки орфографии. И в разделе Grammars дописываем наш тип файлов:

Установка пакетов

Идем File → Settings . И там идет в раздел Install , и там выбираем Packages :

Пишем название пакета, который нам нужен, нажимаем Enter . И после появление списка плагинов устанавливаете тот, что вам нужен:

Установленный пакет появится в списке пакетов:

Настройка предустановленных пакетов

Идем File → Settings . И там идет в раздел Packages .

Находим там пакет tree-view . И переходим в настройки его:

И там ставим галочку около Hide Ignored Names . Например, чтобы в дереве папок не показывалась папка .git , которая нам не понабиться:

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

Установленные пакеты у меня

Список тех пакетов, которые я дополнительно установил.

— карта документа справа от документа с возможностью прокрутки документа:

— для отображения цветов там, где мы их обозначаем в коде:

— теперь цвет можно менять через пипетку Ctrl + Alt + C :

— иконки для файлов в списке файлов:

— подсветка синтаксиса для файлов .qml :

language-ini — подсветка синтаксиса для файлов .ini .

language-latex — для отображения LaTeX кода:

— Если выделили слово, то в других местах это же слово будет подсвечиваться:

— дополнение к предыдущему пакету. Теперь подсветка выделяемого слова будет и в карте документа справа:

— сортировка текста по F5 . А если войти в консоль Ctrl + Shift + P и там набрать Sort , то увидите, что есть еще команды для работы с текстом по сортировке:

Команда Sort lines: Natural сортирует числа как числа:

— печать документа с подсветкой синтаксиса. Переходим в консоль и там набираем export и выбираем нашу команду:

— для просмотра PDF документов:

— превью SVG файлов:

— красиво расставляет отступы в коде по сочетанию Ctrl + Alt + B .

Плагин поддерживает много разных языков, но для поддержки некоторых нужно пошаманить. Например, для C++ программа выдает такое предупреждение: Could not find ‘uncrustify’. The program may not be installed. :

Вам нужно установить программу uncrustify .

Скачивайте файл, разархивируйте проект. Там найдете файл uncrustify.exe .

Теперь нужно, чтобы в глобальной переменной PATH в Windows был путь к данному файлу. Самое простое — это скопировать файл в папку Windows ( C:\Windows ).

После этого поддержка C++ в Atom будет осуществлена.

Подробно посмотреть на список поддерживаемых языков и того, что может пригодится, можно тут: https://atom.io/packages/atom-beautify.

— позволяет перетаскивать текст, как в любом другом редакторе:

— по умолчанию в редакторе стоит вертикальная линия обозначающая 80 символов в строке. Но сейчас много где (например, в Qt) используется длина строки в 120 символов. С помощью этого плагина можно добавить еще вертикальные линии:

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

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

Там открываем styles.less :

И там добавляем такой текст, например:

В итоге получаем вот такое:

— через Ctrl + Alt + O открываем файлы и их создаем, открываем папки без диалоговых системных окон:

— люблю в Notepad++ открывать HTML файлы прямо из редактора. Здесь это решается этим плагином:

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

split-diff — позволяет сравнивать два файла.

minimap-split-diff — дополнение к предыдущему пакету, чтобы изменения отображались и на миникарте.

Итак, как производить сравнения файлов. Один из двух файлов отправляем во вторую панель:

В первой вкладке открываем второй файл:

Вызываем консоль Ctrl + Shift + P . Там пишем Split .

Выбираем команду Split Diff: Enabled :

У нас синхронизировались две панели и показываются изменения файлов:

— переключение между вкладками с помощью Alt + [ и Alt + ] :

— при сворачивании блока показывает заметную линию:

— в контекстном меню во вкладке появляется возможность скопировать путь к файлу, имени файлу и так далее. В Notepad++ постоянно этим пользовался:

команды для работы с markdown файлами:

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

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

При установке плагина появляется пустая панель инструментов с одной кнопкой, которая открывает файл, в котором будем прописывать наши кнопки:

Я прописал вот такие кнопки:

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

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

Обратите внимание на то, что многие команды пакетов доступны и из главного меню:

Как вызвать командную строку Atom

Через Ctrl + Shift + P :

Как поменять язык подсветки синтаксиса кода

Внизу справа имеется возможность поменять подсветку синтаксиса:

Как найти файл в папке проекта по его имени

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

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

Как сворачивать код

Подведите курсор на номера строк. И там появятся стрелочки, нажимая на которые, код свернется:

Как найти что-то в файле

Делается через стандартное сочетание клавиш Ctrl + F . Также там отображается число найденных мест:

Как заменить что-то в файле

Аналогично через Ctrl + F :

Как найти в файлах всей папки

Делается через сочетание клавиш Shift + Ctrl + F . Замена во всех файлах проекта также делается:

Можно также там задавать фильтр для файлов, по которым производится поиск:

Как показать невидимые символы

Входим в консоль Ctrl + Shift + P и там набираем invisibles (или часть строки) и выбираем команду Window: Toggle Invisibles и её выбираем.

Отмена показа невидимых символов осуществляется аналогичным способом:

Как продублировать текущую строку

Через Ctrl + Shift + D :

Как закомментировать выделенные строчки

Как объединить выделенные строки в одну

![Объединение строк в одну(img/join-lines.png)

Как ставить около строк отметки «bookmarks»

Через Ctrl + Alt + F2 .

Переход между отметками осуществляется через F2 :

Как вызвать автодополнение принудительно

Через Ctrl + Space :

Как сделать все буквы заглавными/маленькими в выделенном тексте

Через Ctrl + K + U , чтоб все буквы стали большими:

Через Ctrl + K + L , чтоб все буквы стали маленькими:

Как перейти к соответствующей скобке (открывающейся/закрывающейся)

Как посмотреть превью markdown файла

Превью появляется после комбинации клавиш Ctrl + Shift + M :

Как открыть несколько проектов (папок)

И у вас будет открыто несколько папок:

Как полностью удалить Atom

Вначале удаляем как обычное приложение через Программы и компоненты в панели управления.

А потом в папке C:\Users\[Пользователь] удаляем папку .atom :

Также возможно придется полазить в реестре и поудалять упоминания об Atom:

И какие-то файлы могут остаться в папке «C:\Users[Пользователь]\AppData\Local в папке atom`:

Набор горячих клавиш

Клавиатурные сокращения можно посмотреть тут:

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

Ctrl + S — сохранить файл.

Ctrl + Shift + P — открыть консоль Atom.

Ctrl + Alt + C — выбор цвета с помощью плагина color-picker.

Ctrl + Shift + T — открытие последней закрытой вкладки.

Ctrl + Alt + O — добавляет список функций в файле для быстрого перехода между ними в плагине symbols-tree-view.

Ctrl + P — поиск файла в проекте по имени.

Ctrl + F — поиск и замена.

Shift + Ctrl + F — поиск по всем файлам проекта.

Ctrl + Shift + D — продублировать строку.

Ctrl + / — закомментировать строки.

Ctrl + J — объединить строки в одну.

Ctrl + Alt + F2 — поставить метку около строчки.

F2 — перемещение между метками строк.

Ctrl + Space — вызов автодополнения.

Ctrl + K + U — все буквы заглавными.

Ctrl + K + L — все буквы маленькими.

Ctrl + M — перейти к соответствующей скобке (открывающейся/закрывающейся).

Ctrl + Shift + M — превью markdown файла.

Ctrl + Shift + : — вызов подсказок, как исправить слово.

Ctrl + Alt + V — превью SVG файлов.

Ctrl + Alt + B — расставляем отступы в коде.

Ctrl + Shift + I — нужно нажать два раза, чтобы вызвать Developer Tools.

Ctrl + Alt + O — открытие файлов, папок, их создание с помощью плагина advanced-open-file.

Atom Github: настройка текстового редактора для работы с кодом

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

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

Настройка Atom от GitHub

Скачать редактор можно под любую операционную систему: Windows, Linux, MacOS непосредственно из репозитория на GitHub.

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

Настройка Atom от GitHub: как добавить новое расширение

1. Запустит ь редактор Атом.

2. Изначально программа откроется на вкладке «Welcome Guide». На этой вкладке нас интересует пункт «Install a pack a ge» , а в нем на м нужен пункт «Open Installer».

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

4. Выбираете нужный вам пакет с расширением и нажимаете на кнопку «Install». Установленное расширение всегда можно будет удалить или настроить.

Настройка Atom от GitHub: основные пункты

1. Если нужно русифицировать. Обычно у программистов не должно быть проблем с английским языком, но бывает всякое. Ру с ифицировать Атом можно разными пакетами, но в качестве рекомендации можете попробовать пакет «atom-i18n». Это расширение можно использовать и для других языков, так как оно поддерживает не только русский. После установки данного пакета нужно будет найти в настройках пункт с настройкой языка и выбрать подходящий вам язык перевода редактора. После перезагрузки Атома он ру с ифицируется, если вы выбрали русский язык.

2. Можно сменить тему оформления. При смене темы оформления можно выбирать и стилистику подсветки синтаксиса. Делается это по следующему пути: «Edit-Preferences-Themes». Вариантов тем по умолчанию немного, но если ничего не устраивает, то в сети можно найти подходящую именно вам тему внешнего вида. С выбором стилистики подсветки синтаксиса дела обстоят немного л учше.

3. Подсветка синтаксиса. Для большинства популярных языков программирования подсветка синтаксиса включена по умолчанию, потому что работа с данными языками также включена по умолчанию. Среди этих языков можно найти: Go, C++, JavaScript, CoffeeScript, CSS, HTML, PHP и др. Для того чтобы Атом поддерживал подсветку других языков, н ужно добавить их в редактор ; для этого нужно добавить пакет «atom-twig».

4. Подсветка ошибок. Это очень удобная функция, которая помогает видеть большинство ошибок прямо в процессе разработки. Чтобы активировать эту функцию в редакторе , нужно добавить пакет «linter» — это общий пакет для множества языков ; либо под каждый отдельный язык, например , «linter-php» для подсветки ошибок в языке PHP.

5. Интеграция Git. Продвинутые программисты очень часто используют контроль версий, поэтому интеграция с этим сервисом важна для многих. Делается это при помощи добавления пакета «git-plus».

6. Для тех , кто любит редактор Vim. Те программисты, которые работали в редакторе Vim, часто в других редакторах пытаются добавлять его особенности. В Атом это сделать очень просто, нужно инсталлировать два пакета: «vim-mode-plus», «ex-mode».

7. Доработать программирование CSS. В частност и в Атом можно автоматизировать расстановку префиксов в CSS для разных браузеров, например: -webkit, -ms, и т. д. Как всегда , делается это простой установкой нужного пакета, а таким пакетом является «autoprefixer».

8. И др.

Заключение

Основная настройка Atom от GitHub для веб-разработки окончена. Но нужно понимать, что количество расширений у Атом а исчисляется тысячами, поэтому настроить этот редактор прямо под свои нужды сможет абсолютно любой разработчик, если постарается.

Atom от GitHub — это первоклассный , качественный, бесплатный редактор, который можно превратить в полноценную IDE.

Мы будем очень благодарны

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

#2 — Плагины Atom для фронтенд разработки. Установка.

В данном видеоуроке мы продолжим знакомство с редактором кода 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 позволяет редактировать файлы прямо на сервере.