Как настроить atom для html

Настройка текстового редактора Atom и дополнительные пакеты

В статье рассказывается как настроить Atom, чтобы людям, которые до этого работали с Notepad++, было удобно и комфортно.

15.12.2015 28 комментариев 121 445 просмотров

В статье рассказывается как настроить Atom, чтобы людям, которые до этого работали с Notepad++, было удобно и комфортно.

Содержание

В своё время я пытался перейти с Notepad++ на Sublime Text. Не получилось: не сумел найти все нужные для меня фишки из Notepad++ для нормальной работы. Сейчас попробую перейти на Atom.

Статьи по Atom

Установка

Установка на Windows ничем не отличается от установки обычных программ.

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

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

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

Я всегда ставлю перенос строк для обычной работы с текстом в Notepad++:

Внесите путь к стандартной папке, где у вас находятся в основном ваши проекты:

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

Включим работу плагина autosave.

File → Settings → Packages . Там находим наш плагин:

И перейдем в настройки Settings, и там включим наш плагин:

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

Очень много дополнительного функционала скрывается в дополнительных пакетах.

Переходим в File → Settings , а там выбираем Install :

А там ищем нужный нам пакет и его устанавливаем.

Установленные пакеты появятся в разделе Packages :

Пакеты, которые себе установил

Я себе установил следующие пакеты (помните, что многие пакеты включаются при перезагрузке программы):

minimap – отображение карты документа.

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

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

file-icons – у файлов появляются иконки под их расширение:

language-qml – для отображения файлов *.qml.

markdown-preview-plus – для отображения preview файлов Markdown *.md. Превью появляется после комбинации клавиш Ctrl + Shift + M .

open-recent – позволяет открывать недавно открываемые файлы.

highlight-selected – Если выделили слово, то в других местах это же слово будет подсвечиваться. Очень полезное сочетание клавиш Ctrl + F3 для перемещения к следующему фрагменту кода, содержащего выделенный текст.

minimap-highlight-selected – дополнение к предыдущему пакету. Теперь подсветка выделяемого слова будет и в карте документа справа.

copy-path – добавляет в контекстное меню вкладок возможность скопировать имя файла или его путь.

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

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

export-html – позволяет экспортировать документ в html с подсветкой синтаксиса. Переходим в консоль и там набираем export и выбираем нашу команду. Данным плагином можно частично заменить функцию печати документов: конвертируем файл в Html и уже в браузере его печатаем.

pdf-view для просмотра pdf документов.

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

Linter

Кроме всех перечисленных пакетов есть еще один из мощных плагинов Atom редактора – Linter. Он позволяет проверять ошибки в коде. Очень полезная вещь.

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

Например, устанавливаю я потом пакет linter-csslint, и у меня появляется возможность править документы с CSS и HTML.

Например, в данном документе я забыл поставить открывающую скобку:

Источник

Используем Atom для первой вёрстки

Инструкция по установке, настройке и использованию самого передового на сегодняшний день редактора кода

Почему я выбираю Atom

Не так давно все переходили с какого-нибудь TextMate на SublimeText и это было реально своевременно круто. Но когда в индустрию редакторов кода вошёл GitHub, сразу стало понятно за кем будущее.

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

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

Установка

Для установки вам необходимо быть обладателем одной из описанных на сайте Atom систем:

OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux

Так как я работаю на Mac, то большая часть инструкции будет для него, иногда с информацией для Windows.

Скачайте дистрибутив и установите его как полагается в вашей системе. На Mac OS X нужно перенести приложение в папку приложений (Applications), на Windows запустить установочный дистрибутив.

После этого откройте Atom и давайте перейдём к настройке.

Настройка

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

Настройка Atom

После установки Atom сразу готов к работе и настроен в соответствии с последними тенденциями. Вам нужно настроить всего две вещи.

Добавьте разметку отступов
Зайдите в настройки Atom → Preferences → Settings и поставьте галочку на Show Indent Guide. Это включит отображение специальных полосочек, которые помогают видеть вложенность кода.

(UPDATE: не актуально) Настройте правильную работу autocomplete
Autocomplete — это инструмент для автоматического написания кода. Зайдите в Atom → Open Your Keymap и вставьте в конец документа следующий код:

Настройка Mac OS X

В современных редакторах кода можно раздвигать курсор на несколько строк. Что бы это делать на Mac, нужно выключить пару стандартных сочетаний клавиш. Зайдите в системные настройки  → System Preferences → Keyboard → Shortcuts → Mission Control и снимите галочки на двух пунктах:

Mission Control
Занимает сочетание клавиш ^↑

Application windows
Занимает сочетание клавиш ^↓

Теперь, когда будете играться с кодом, попробуйте по нажимать Shift-Ctrl-↑ и Shift-Ctrl-↓. Вы можете редактировать несколько строк одновременно. Также можно вставлять дополнительные курсоры в любые места в коде зажав Cmd и просто кликая в необходимое место.

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

Packages — это небольшие, но очень удобные дополнения, которые расширяют возможности Atom.

Для установки пакетов зайдите в Atom → Preferences → Install и через строку поиска найдите и установите следующие пакеты:

Atom-color-highlight
Подсвечивает цветовые величины в коде

Autocomplete-css
Упрощает написание CSS

Autocomplete-paths
Упрощает написание путей к файлам проекта

Autocomplete-plus
Упрощает автоматическое написание кода

Emmet
Незаменимый инструмент дзен коддера, ускоряет написание HTML кода в разы

Выбор темы подсветки кода

Моя любимая тема Twilight не поставляется с Atom, скорей всего потому, что эта тема пришла из другого редактора кода TextMate. Несмотря на новизну Atom, к сожалению, я пока не нашёл для себя ни одной нормальной темы поставляемой с ним.

Для установки Twilight, нужно опять зайти в установку как в прошлый раз, только в этот раз в строке поиска нужно выбрать Themes, вместо Packages. Найти Twilight и установить.

После того, как пакеты и темы поставлены, перезагрузите Atom для того, что бы всё точно заработало (полностью закройте программу и откройте снова).

Как всё работает

Что бы попробовать новые установки и настройки в действии давайте сделаем несколько упражнений.

Emmet в действии

Создайте новый файл и сохраните его, назовите “index.html”, естественно без кавычек. Для правильной работы всех помощников Atom, так называемых сниппетов (snippets) и для правильной подсветки кода (syntax highlighting) обязательно нужно указывать правильное расширение файла (.html в данном случае).

Итак, пишем в документе восклицательный знак и нажимаем Tab. Emmet развернёт вам базовую структуру HTML.

Подробней об использовании Emmet читайте в документации на официальном сайте.

Источник

Настройка Atom (full version)

Полная инструкция по установке, настройке, работе с FAQ.

21.09.2016 37 комментариев 171 352 просмотров

Свершилось! Наконец-то в Atom появилась проверка орфографии русского и английского языка! Так что опять возвращаюсь к теме Atom.

Содержание

Введение

Некоторое время назад, я пытался перейти с Notepad++ на Atom, а до этого на Sublime Text. Но всякий раз попытки были безуспешными, так как некоторых привычных инструментов из Notepad++ не хватало. Для Atom самым главным минусом для меня было отсутствие проверки орфографии русского языка.

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

Установка

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

Запускаем скаченный файл, и он автоматически запустит установку без всяких диалоговых окон.

После установки откроется редактор.

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

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

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

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

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

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

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

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

Идем File → Settings .

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

Но, у меня почему-то не при последней установке данные команды не сработали. И никакие шаманства не помогли. Пришлось вручную добавлять соответствующие команды в реестр 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-ckecker переходим в настройки.

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

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

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

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

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

У меня для LaTeX файлов этот тип определился как text.tex.latex .

Копируем этот тип и закрываем уведомление. Потом идем в настройки нашего пакета проверки орфографии.

И в разделе Grammars дописываем наш тип файлов.

Теперь проверка орфографии появилась и в LaTeX файлах.

Как могли заметить выше на моей светлой теме подсказки появляются с темным фоном. Исправим это.

Источник