sitename
Emmet для sublime text 3 установка. Добавление Package Control
11.05.2015 Программы
Mr. Edyan
В закладки

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

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

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

Комментарии (36)
Добавить комментарий
Прокомментировать
  1. ,hbnsq
    #26 ,hbnsq Гость 2017-09-15
    0
    Миша,
    спасибо тебе Потапыч))
  2. Егор
    #25 Егор Гость 2017-09-14
    0
    где скачать
  3. Антон
    #24 Антон Гость 2017-09-14
    0
    Так же не создает классы после точки!!!
    Но сама табуляция работает
  4. Антон
    #23 Антон Гость 2017-09-14
    0
    Не работает ">" "+" не понимаю почему
  5. Андрей
    #22 Андрей Гость 2017-09-04
    0
    Работа плагина немного отличается от той, которая на скринах. Например, ul, нажимаю таб, и становится <ul></ul>-не как показано на сайте. Помогите
  6. Виталий
    #21 Виталий Гость 2017-09-04
    0
    Спасибо.Очень хорошо пошагово расказали как установить.
  7. Андрей
    #20 Андрей Гость 2017-09-04
    0
    Написано"Закрыть и перезапустить программу", а как перезапускать-то?
    1. Mr. Edyan
      #19 Mr. Edyan Администратор 2017-09-04
      0
      Просто запустите снова.
  8. Геннадий
    #18 Геннадий Гость 2017-09-01
    0
    Большое спасибо за статью, помогла!)
  9. Александ
    #17 Александ Гость 2017-08-29
    -1
    скачать прогу с оф сайта 3 версию, а плагин установил как тут пишут и нифига не работает
  10. Юрий Титов
    #16 Юрий Титов Гость 2017-08-27
    -1
    Огромное спасибо
  11. Farrukh
    #15 Farrukh Гость 2017-03-21
    0
    Thanks a lot
  12. Farrukh
    #14 Farrukh Гость 2017-03-21
    0
    Helpful page
  13. Мария
    #13 Мария Гость 2017-02-03
    +5
    Огромное спасибо!!!! Очень полезная статья. Все заработало
    1. Mr. Edyan
      #12 Mr. Edyan Администратор 2017-02-03
      0
      Пожалуйста )))
  14. Юрий
    #11 Юрий Гость 2017-01-23
    +1
    Доброго дня. После ввода кода вылетает вот это: ImportError: No module named request
    Скачал последнюю версию бутстрапа... в чем дело:? Подскажите.
    Спасибо.
  15. Андрей
    #10 Андрей Гость 2016-11-20
    0
    div.class работает и без Emmet
  16. Станислав
    #9 Станислав Гость 2016-10-10
    +3
    установил по инструкции, перезапустил, по кнопке tab работает простое табулирование а не работа плагина
    1. Denis
      #8 Denis Гость 2016-10-11
      0
      Такая же фигня!
      1. Миша
        #7 Миша Гость 2016-10-19
        +3
        у меня тоже самое, но вместо tab работает сочетание Ctrl+e
        1. Миша
          #6 Миша Гость 2016-10-19
          0
          Может кто-нибудь подсказать почему tab не работает?
          1. Mr. Edyan
            #5 Mr. Edyan Администратор 2016-10-19
            +1
            Попробуйте код с официальной страницы https://packagecontrol.io/installation
            1. Миша
              #4 Миша Гость 2016-10-19
              +10
              Спасибо! Понял в чём моя ошибка, сразу в окне программы tab не работает, нужно создать какой-нибудь файл html и уже в нём tab работает нормально.
  17. Владислав
    #3 Владислав Гость 2016-10-02
    0
    Спасибо.
    Очень все доступно :)
  18. Ромка
    #2 Ромка Гость 2016-09-13
    +1
    Автору сей спасительной статьи огромное спасибо!
  19. Дарья
    #1 Дарья Гость 2016-08-03
    0
    На линуксе тоже будет работать?
    1. Mr. Edyan
      #0 Mr. Edyan Администратор 2016-08-03
      0
      Думаю на операционной системе Linux, Emmet будет работать. https://packagecontrol.io/packages/Emmet
  20. Daria
    #-1 Daria Гость 2016-08-02
    0
    Работает, спасибо!!! Только почему то начальная страница не создается
    1. Mr. Edyan
      #-2 Mr. Edyan Администратор 2016-08-02
      0
      Рад что разобрались в моё отсутствие )))
  21. Daria
    #-3 Daria Гость 2016-08-02
    0
    Подскажите, где посмотреть установленные плагины? может не установился..
  22. Daria
    #-4 Daria Гость 2016-08-02
    0
    все вроде сделала, не работает(
  23. Александр
    #-5 Александр Гость 2016-08-02
    +1
    Большое спасибо! Я ваще в верстке зелёный да и в программировании тоже, короче во всем! :)... всё доходчиво!
  24. Серж
    #-6 Серж Гость 2016-07-06
    +1
    Благодарочка. 3 первыйх сайта ничуть не помогли. На твоем все по полочкам разложено!
  25. TrickBear
    #-7 TrickBear Гость 2016-05-25
    +1
    Thanks bro помог, "красивых" кодов bro :)
  26. Кирилл
    #-8 Кирилл Гость 2016-02-14
    +1
    Здравствуйте, подскажите пожалуйста, перепробовал кучу редакторов, из последних помню Атом, и SM, не могу установить плагины ни на один из них. Выдает ошибку при соединении с серверов. Возможно timout, как решить проблему?
    Спасибо!
    1. Mr. Edyan
      #-9 Mr. Edyan Администратор 2016-02-14
      -1
      Не сталкивался с подобным, не имею понятия как Вам помочь
Войти через: