Emmet для sublime text 3 установка. Добавление Package Control

Выведем ваш сайт в ТОП выдачи
Хочешь увидеть свой сайт в ТОПе выдачи поисковиков ещё при жизни?
Emmet для sublime text 3 установка. Добавление Package Control

Каждый Веб-разработчик всегда в поиске упрощения своего рабочего места. Эта статья посвящена начинающим верстальщикам которые часто работают с HTML и CSS, при этом пользуются Sublime Text 3.

Плагин "Emmet" облегчит работу с самым популярным текстовым редактором. Помимо Соблайма, Эммет может работать и с другими редакторами, такими как - Notepad++, Coda, Eclipse, TextMate, и Adobe DreamWeaver.

Процесс установки Emmet для Sublime

Когда я устанавливал плагин Эммет на свой редактор, то у меня возникла проблема, для установки мне нужна была вкладка «Package Control» которая должна была находится в «Preferences», ее там небыло, если и у вас нет, то читайте ниже.

Как добавить Package Control в Sublime Text 3

Очень просто и быстро. В редакторе жмите Ctrl+ или View -> Show console а если у вас русифицированный Соблайм то Вид -> Показать/скрыть консоль. После этого откроется панель ввода, вставьте в нижнюю строку код.

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

Установка package control в Sublime

Нажмите Enter и перезапустите ваш редактор.

Установка плагина Emmet для Sublime Text 3

Теперь у нас есть Пакет управления в Саблайме и можно переходить к установки Эммета. Тут тоже делов на минуту. Как вы уже наверное поняли, нужно нажать на «Preferences» (Глобальные параметры) или Ctrl + Shift + P и в самом низу кликнуть на Package Control, у вас всплывет окно, нажимайте на «Install Package» (Установить Пакет) на шестой строке.

После этого всплывет еще одно окно где нужно ввести слово «Emmet», появится много предложений и словосочетаний, нажать нужно на самую первую надпись.

Установка emmet

Вот и все, когда откроется вкладка «Package Control Messages» с содержимым о том что плагин установлен, можно все закрыть, перезапустить и пользоваться!

Как работает плагин Emmet

Приведу пару примеров «Emmet горячие клавиши». Например при написании ul без <> и нажатия Tab будет автоматически развернут полный список.

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

Таким же методом можно написать div.class для назначения класса.

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

Для первоначального создания страницы достаточно добавить ! и нажать Tab.

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

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

На сегодня все, пока!

Программы

Вступившие в диалог 23

  1. Мария
    Мария (сказал) от 2017-02-03
    Огромное спасибо!!!! Очень полезная статья. Все заработало
    1. Mr. EdЯn (ответил) от 2017-02-03
      Пожалуйста )))
  2. Юрий
    Юрий (сказал) от 2017-01-23
    Доброго дня. После ввода кода вылетает вот это: ImportError: No module named request
    Скачал последнюю версию бутстрапа... в чем дело:? Подскажите.
    Спасибо.
  3. Андрей
    Андрей (сказал) от 2016-11-20
    div.class
    работает и без Emmet

  4. Станислав
    Станислав (сказал) от 2016-10-10
    установил по инструкции, перезапустил, по кнопке tab работает простое табулирование а не работа плагина
    1. Denis
      Denis (ответил) от 2016-10-11
      Такая же фигня!
      1. Миша
        Миша (ответил) от 2016-10-19
        у меня тоже самое, но вместо tab работает сочетание Ctrl+e
        1. Миша
          Миша (ответил) от 2016-10-19
          Может кто-нибудь подсказать почему tab не работает?
          1. Mr. EdЯn (ответил) от 2016-10-19
            Попробуйте код с официальной страницы https://packagecontrol.io/installation
            1. Миша
              Миша (ответил) от 2016-10-19
              Спасибо! Понял в чём моя ошибка, сразу в окне программы tab не работает, нужно создать какой-нибудь файл html и уже в нём tab работает нормально.
  5. Владислав
    Владислав (сказал) от 2016-10-02
    Спасибо.
    Очень все доступно :)
  6. Ромка
    Ромка (сказал) от 2016-09-13
    Автору сей спасительной статьи огромное спасибо!
  7. Дарья
    Дарья (сказал) от 2016-08-03
    На линуксе тоже будет работать?
    1. Mr. EdЯn (ответил) от 2016-08-03
      Думаю на операционной системе Linux, Emmet будет работать. https://packagecontrol.io/packages/Emmet
  8. Daria
    Daria (сказал) от 2016-08-02
    Работает, спасибо!!! Только почему то начальная страница не создается
    1. Mr. EdЯn (ответил) от 2016-08-02
      Рад что разобрались в моё отсутствие )))
  9. Daria
    Daria (сказал) от 2016-08-02
    Подскажите, где посмотреть установленные плагины? может не установился..
  10. Daria
    Daria (сказал) от 2016-08-02
    все вроде сделала, не работает(
  11. Александр
    Александр (сказал) от 2016-08-02
    Большое спасибо! Я ваще в верстке зелёный да и в программировании тоже, короче во всем! :)... всё доходчиво!
  12. Серж
    Серж (сказал) от 2016-07-06
    Благодарочка. 3 первыйх сайта ничуть не помогли. На твоем все по полочкам разложено!
  13. TrickBear
    TrickBear (сказал) от 2016-05-25
    Thanks bro помог, "красивых" кодов bro :)
  14. Кирилл
    Кирилл (сказал) от 2016-02-14
    Здравствуйте, подскажите пожалуйста, перепробовал кучу редакторов, из последних помню Атом, и SM, не могу установить плагины ни на один из них. Выдает ошибку при соединении с серверов. Возможно timout, как решить проблему?
    Спасибо!
    1. Mr. EdЯn (ответил) от 2016-02-14
      Не сталкивался с подобным, не имею понятия как Вам помочь!

Оставить отзыв