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

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

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

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

Материал подготовил(а): Mr. Edyan
Читайте больше про: Лайфхаки
Понравилось: 70
Комментарии (62)
Добавить комментарий
Прокомментировать
  1. Алексей
    #41 Алексей Гость 2018-08-11
    +2
    Мне помогло вот это "у меня тоже ни с того, ни с сего перестало работать развертывание. помог совет Прогера, ревключить синтаксис HTML На верхней панели инструментов ST ищем View, потом Syntax -> HTML, кликаем и проверяем. и переназначать ничего не надо было"
    1. Sv
      #40 Sv Гость Вчера, 09:13
      0
      Спасибо. Помогло)
  2. Гость Надежда
    #39 Гость Надежда Гость 2018-08-02
    0
    Все получилось! Большое спасибо автору! Узнала из этой статьи, что комбинация !+<Tab> создают скелет html-документа. До этого знала для этой же цели про html:5+<Tab>.
    Телеграм-Бот, который сам зарабатывает вам деньги – просто за то, что вы на него подпишетесь.
  3. Павел
    #38 Павел Гость 2018-07-10
    +2
    Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
    что делать?
    1. Анон
      #37 Анон Гость 2018-08-04
      +1
      Используй вот этот import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)
      1. Никита
        #36 Никита Гость 2018-08-19
        0
        Большое спасибо
  4. bague or blanc cartier copie
    #35 bague or blanc cartier copie Гость 2018-05-30
    0
    The discussion was about unfounded fear… Of which you seem to be loaded with!
    bague or blanc cartier copie http://www.braccialegioielli.ru/fr/replica-cartier-love-ring-pink-gold-with-three-diamonds-b4087500-p194/
  5. евгений
    #34 евгений Гость 2018-04-26
    +3
    Обычно начинающие при сохранении документа пишут index и выбирают тип файла html. Для полноценной работы Emmet нужно при указании имени файла писать index.html а затем выбирать тип файла html Вот такая мелочь может мозг вынести.
  6. Саша
    #33 Саша Гость 2018-03-16
    +4
    я вставил кодовую страку что бы установить emmet но он не установился в консольной строке написало error
  7. Артур
    #32 Артур Гость 2018-01-29
    +2
    Вообщем,установил плагин, потом когда пишу Emmet. виндоус выдаёт такую ошибку:
    Произошла ошибка при распаковке пакета для Emmet
  8. almaz
    #31 almaz Гость 2017-12-18
    +2
    спасибо вашей статье я установил как и хотел благодарен вам сильно
  9. Owl
    #30 Owl Гость 2017-11-26
    0
    Всё установил как надо. Ни хрена Tab не работает! Вводил даже кусок готового HTML-кода, продолжать не желает1 В чём дело?..
  10. Alex
    #29 Alex Гость 2017-11-03
    +1
    Миша, у меня так и не работает с Тав, по Ctrl + e срабатывает( Хотя и новый файл открывал.
  11. Vadim Chumachenko
    #28 Vadim Chumachenko Участник 2017-10-29
    0
    Подскажите у меня не работает через кнопку ТАБ,только через ctrl+e Как задать чтоб была через ТАБ?
    1. Максим
      #27 Максим Гость 2017-11-01
      +9
      Попробуйте в настройках включить HTML-синтаксис, мне помогло.
    2. Максим
      #26 Максим Гость 2017-11-01
      +26
      view > syntax > html
      1. Антон
        #25 Антон Гость 2017-11-20
        +2
        Спасибо, сработало
  12. knock off bulgari snake bracelet
    #24 knock off bulgari snake bracelet Гость 2017-10-25
    0
    Hi Rebecca – he might qualify. I cannot know for sure without having a more indepth conversation with you but you are a US citizen and he has not left the US yet – correct? You might benefit from speaking to me or another immigration attorney in Denver about the situation.
    knock off bulgari snake bracelet http://www.vsdws.com/tag/serpenti-bracelet-fake
  13. Никита
    #23 Никита Гость 2017-10-25
    +2
    ответьте пожалуйста что делать. пишет Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
    1. Оганес
      #22 Оганес Гость 2017-10-27
      +28
      На официальном сайте (https://packagecontrol.io/installation) есть другой код. У меня тоже такая ошибка валилась.

      import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)
      1. Grarnik
        #21 Grarnik Гость 2017-12-11
        +2
        Спасибо!) Мне помог данный код
  14. Fara
    #20 Fara Гость 2017-10-01
    +1
    Здравствуйте у меня в компьютер не подключен к интернету ,установить плагин можно как без связи Спасибо заранее
  15. Саша
    #19 Саша Гость 2017-09-27
    +8
    Что от меня хочет эта бездушная махина Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
  16. ,hbnsq
    #18 ,hbnsq Гость 2017-09-15
    +1
    Миша,
    спасибо тебе Потапыч))
  17. Егор
    #17 Егор Гость 2017-09-14
    +2
    где скачать
  18. Антон
    #16 Антон Гость 2017-09-14
    +1
    Так же не создает классы после точки!!!
    Но сама табуляция работает
    1. Максим
      #15 Максим Гость 2018-03-21
      0
      У меня та же проблема. Если вы уже разобрались, напишите как это исправить пожалуйста.
  19. Антон
    #14 Антон Гость 2017-09-14
    0
    Не работает ">" "+" не понимаю почему
  20. Андрей
    #13 Андрей Гость 2017-09-04
    +1
    Работа плагина немного отличается от той, которая на скринах. Например, ul, нажимаю таб, и становится <ul></ul>-не как показано на сайте. Помогите
  21. Виталий
    #12 Виталий Гость 2017-09-04
    0
    Спасибо.Очень хорошо пошагово расказали как установить.
  22. Андрей
    #11 Андрей Гость 2017-09-04
    0
    Написано"Закрыть и перезапустить программу", а как перезапускать-то?
    1. Mr. Edyan
      #10 Mr. Edyan Администратор 2017-09-04
      0
      Просто запустите снова.
  23. Геннадий
    #9 Геннадий Гость 2017-09-01
    0
    Большое спасибо за статью, помогла!)
  24. Александ
    #8 Александ Гость 2017-08-29
    0
    скачать прогу с оф сайта 3 версию, а плагин установил как тут пишут и нифига не работает
  25. Юрий Титов
    #7 Юрий Титов Гость 2017-08-27
    -1
    Огромное спасибо
  26. Farrukh
    #6 Farrukh Гость 2017-03-21
    0
    Thanks a lot
  27. Farrukh
    #5 Farrukh Гость 2017-03-21
    0
    Helpful page
  28. Мария
    #4 Мария Гость 2017-02-03
    +4
    Огромное спасибо!!!! Очень полезная статья. Все заработало
    1. Mr. Edyan
      #3 Mr. Edyan Администратор 2017-02-03
      -1
      Пожалуйста )))
  29. Юрий
    #2 Юрий Гость 2017-01-23
    +2
    Доброго дня. После ввода кода вылетает вот это: ImportError: No module named request
    Скачал последнюю версию бутстрапа... в чем дело:? Подскажите.
    Спасибо.
  30. Андрей
    #1 Андрей Гость 2016-11-20
    0
    div.class работает и без Emmet
  31. Станислав
    #0 Станислав Гость 2016-10-10
    +3
    установил по инструкции, перезапустил, по кнопке tab работает простое табулирование а не работа плагина
    1. Denis
      #-1 Denis Гость 2016-10-11
      0
      Такая же фигня!
      1. Миша
        #-2 Миша Гость 2016-10-19
        +3
        у меня тоже самое, но вместо tab работает сочетание Ctrl+e
        1. Миша
          #-3 Миша Гость 2016-10-19
          0
          Может кто-нибудь подсказать почему tab не работает?
          1. Mr. Edyan
            #-4 Mr. Edyan Администратор 2016-10-19
            +2
            Попробуйте код с официальной страницы https://packagecontrol.io/installation
            1. Миша
              #-5 Миша Гость 2016-10-19
              +13
              Спасибо! Понял в чём моя ошибка, сразу в окне программы tab не работает, нужно создать какой-нибудь файл html и уже в нём tab работает нормально.
            2. Lesya
              #-6 Lesya Гость 2018-06-14
              0
              Спасибо за ссылку! Еще бы долго мучилась без этой ссылки)))
  32. Владислав
    #-7 Владислав Гость 2016-10-02
    0
    Спасибо.
    Очень все доступно :)
  33. Ромка
    #-8 Ромка Гость 2016-09-13
    +1
    Автору сей спасительной статьи огромное спасибо!
  34. Дарья
    #-9 Дарья Гость 2016-08-03
    0
    На линуксе тоже будет работать?
    1. Mr. Edyan
      #-10 Mr. Edyan Администратор 2016-08-03
      0
      Думаю на операционной системе Linux, Emmet будет работать. https://packagecontrol.io/packages/Emmet
  35. Daria
    #-11 Daria Гость 2016-08-02
    0
    Работает, спасибо!!! Только почему то начальная страница не создается
    1. Mr. Edyan
      #-12 Mr. Edyan Администратор 2016-08-02
      0
      Рад что разобрались в моё отсутствие )))
  36. Daria
    #-13 Daria Гость 2016-08-02
    0
    Подскажите, где посмотреть установленные плагины? может не установился..
  37. Daria
    #-14 Daria Гость 2016-08-02
    0
    все вроде сделала, не работает(
    1. Юлия
      #-15 Юлия Гость 2018-06-28
      +1
      код на этой странице не тот, что вставлять в консоль
  38. Александр
    #-16 Александр Гость 2016-08-02
    +1
    Большое спасибо! Я ваще в верстке зелёный да и в программировании тоже, короче во всем! :)... всё доходчиво!
  39. Серж
    #-17 Серж Гость 2016-07-06
    +1
    Благодарочка. 3 первыйх сайта ничуть не помогли. На твоем все по полочкам разложено!
  40. TrickBear
    #-18 TrickBear Гость 2016-05-25
    +1
    Thanks bro помог, "красивых" кодов bro :)
  41. Кирилл
    #-19 Кирилл Гость 2016-02-14
    +1
    Здравствуйте, подскажите пожалуйста, перепробовал кучу редакторов, из последних помню Атом, и SM, не могу установить плагины ни на один из них. Выдает ошибку при соединении с серверов. Возможно timout, как решить проблему?
    Спасибо!
    1. Mr. Edyan
      #-20 Mr. Edyan Администратор 2016-02-14
      0
      Не сталкивался с подобным, не имею понятия как Вам помочь
Войти через: