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
Читайте больше про: Лайфхаки
Понравилось: 72
Комментарии (66)
Добавить комментарий
Прокомментировать
  1. Жора Петров
    #44 Жора Петров Гость 2018-10-02
    0
    спасибо, ребятаааа!
  2. denys
    #43 denys Гость 2018-09-25
    0
    просто лайк. хорошо удобно доступно, спасибо
  3. Максон
    #42 Максон Гость 2018-09-08
    +1
    Привет, на мака установил все как ты писал, но горячие клавиши все равно не срабатывают(
    Телеграм-Бот, который сам зарабатывает вам деньги – просто за то, что вы на него подпишетесь.
  4. Алексей
    #41 Алексей Гость 2018-08-11
    +3
    Мне помогло вот это "у меня тоже ни с того, ни с сего перестало работать развертывание. помог совет Прогера, ревключить синтаксис HTML На верхней панели инструментов ST ищем View, потом Syntax -> HTML, кликаем и проверяем. и переназначать ничего не надо было"
    1. Sv
      #40 Sv Гость 2018-08-20
      0
      Спасибо. Помогло)
  5. Гость Надежда
    #39 Гость Надежда Гость 2018-08-02
    0
    Все получилось! Большое спасибо автору! Узнала из этой статьи, что комбинация !+<Tab> создают скелет html-документа. До этого знала для этой же цели про html:5+<Tab>.
  6. Павел
    #38 Павел Гость 2018-07-10
    +2
    Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
    что делать?
    1. Анон
      #37 Анон Гость 2018-08-04
      +7
      Используй вот этот 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
        Большое спасибо
      2. Благодарный человек
        #35 Благодарный человек Гость 2018-09-13
        0
        Спасибо, помогло
  7. bague or blanc cartier copie
    #34 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/
  8. евгений
    #33 евгений Гость 2018-04-26
    +4
    Обычно начинающие при сохранении документа пишут index и выбирают тип файла html. Для полноценной работы Emmet нужно при указании имени файла писать index.html а затем выбирать тип файла html Вот такая мелочь может мозг вынести.
  9. Саша
    #32 Саша Гость 2018-03-16
    +4
    я вставил кодовую страку что бы установить emmet но он не установился в консольной строке написало error
  10. Артур
    #31 Артур Гость 2018-01-29
    +2
    Вообщем,установил плагин, потом когда пишу Emmet. виндоус выдаёт такую ошибку:
    Произошла ошибка при распаковке пакета для Emmet
  11. almaz
    #30 almaz Гость 2017-12-18
    +2
    спасибо вашей статье я установил как и хотел благодарен вам сильно
  12. Owl
    #29 Owl Гость 2017-11-26
    0
    Всё установил как надо. Ни хрена Tab не работает! Вводил даже кусок готового HTML-кода, продолжать не желает1 В чём дело?..
  13. Alex
    #28 Alex Гость 2017-11-03
    +1
    Миша, у меня так и не работает с Тав, по Ctrl + e срабатывает( Хотя и новый файл открывал.
  14. Vadim Chumachenko
    #27 Vadim Chumachenko Участник 2017-10-29
    0
    Подскажите у меня не работает через кнопку ТАБ,только через ctrl+e Как задать чтоб была через ТАБ?
    1. Максим
      #26 Максим Гость 2017-11-01
      +9
      Попробуйте в настройках включить HTML-синтаксис, мне помогло.
    2. Максим
      #25 Максим Гость 2017-11-01
      +26
      view > syntax > html
      1. Антон
        #24 Антон Гость 2017-11-20
        +2
        Спасибо, сработало
  15. knock off bulgari snake bracelet
    #23 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
  16. Никита
    #22 Никита Гость 2017-10-25
    +2
    ответьте пожалуйста что делать. пишет Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
    1. Оганес
      #21 Оганес Гость 2017-10-27
      +29
      На официальном сайте (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
        #20 Grarnik Гость 2017-12-11
        +2
        Спасибо!) Мне помог данный код
  17. Fara
    #19 Fara Гость 2017-10-01
    +1
    Здравствуйте у меня в компьютер не подключен к интернету ,установить плагин можно как без связи Спасибо заранее
  18. Саша
    #18 Саша Гость 2017-09-27
    +8
    Что от меня хочет эта бездушная махина Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
  19. ,hbnsq
    #17 ,hbnsq Гость 2017-09-15
    +1
    Миша,
    спасибо тебе Потапыч))
  20. Егор
    #16 Егор Гость 2017-09-14
    +2
    где скачать
  21. Антон
    #15 Антон Гость 2017-09-14
    +1
    Так же не создает классы после точки!!!
    Но сама табуляция работает
    1. Максим
      #14 Максим Гость 2018-03-21
      0
      У меня та же проблема. Если вы уже разобрались, напишите как это исправить пожалуйста.
  22. Антон
    #13 Антон Гость 2017-09-14
    0
    Не работает ">" "+" не понимаю почему
  23. Андрей
    #12 Андрей Гость 2017-09-04
    +1
    Работа плагина немного отличается от той, которая на скринах. Например, ul, нажимаю таб, и становится <ul></ul>-не как показано на сайте. Помогите
  24. Виталий
    #11 Виталий Гость 2017-09-04
    0
    Спасибо.Очень хорошо пошагово расказали как установить.
  25. Андрей
    #10 Андрей Гость 2017-09-04
    0
    Написано"Закрыть и перезапустить программу", а как перезапускать-то?
    1. Mr. Edyan
      #9 Mr. Edyan Администратор 2017-09-04
      0
      Просто запустите снова.
  26. Геннадий
    #8 Геннадий Гость 2017-09-01
    0
    Большое спасибо за статью, помогла!)
  27. Александ
    #7 Александ Гость 2017-08-29
    0
    скачать прогу с оф сайта 3 версию, а плагин установил как тут пишут и нифига не работает
  28. Юрий Титов
    #6 Юрий Титов Гость 2017-08-27
    -1
    Огромное спасибо
  29. Farrukh
    #5 Farrukh Гость 2017-03-21
    0
    Thanks a lot
  30. Farrukh
    #4 Farrukh Гость 2017-03-21
    0
    Helpful page
  31. Мария
    #3 Мария Гость 2017-02-03
    +4
    Огромное спасибо!!!! Очень полезная статья. Все заработало
    1. Mr. Edyan
      #2 Mr. Edyan Администратор 2017-02-03
      -1
      Пожалуйста )))
  32. Юрий
    #1 Юрий Гость 2017-01-23
    +2
    Доброго дня. После ввода кода вылетает вот это: ImportError: No module named request
    Скачал последнюю версию бутстрапа... в чем дело:? Подскажите.
    Спасибо.
  33. Андрей
    #0 Андрей Гость 2016-11-20
    0
    div.class работает и без Emmet
  34. Станислав
    #-1 Станислав Гость 2016-10-10
    +3
    установил по инструкции, перезапустил, по кнопке tab работает простое табулирование а не работа плагина
    1. Denis
      #-2 Denis Гость 2016-10-11
      0
      Такая же фигня!
      1. Миша
        #-3 Миша Гость 2016-10-19
        +3
        у меня тоже самое, но вместо tab работает сочетание Ctrl+e
        1. Миша
          #-4 Миша Гость 2016-10-19
          0
          Может кто-нибудь подсказать почему tab не работает?
          1. Mr. Edyan
            #-5 Mr. Edyan Администратор 2016-10-19
            +2
            Попробуйте код с официальной страницы https://packagecontrol.io/installation
            1. Миша
              #-6 Миша Гость 2016-10-19
              +13
              Спасибо! Понял в чём моя ошибка, сразу в окне программы tab не работает, нужно создать какой-нибудь файл html и уже в нём tab работает нормально.
            2. Lesya
              #-7 Lesya Гость 2018-06-14
              0
              Спасибо за ссылку! Еще бы долго мучилась без этой ссылки)))
  35. Владислав
    #-8 Владислав Гость 2016-10-02
    0
    Спасибо.
    Очень все доступно :)
  36. Ромка
    #-9 Ромка Гость 2016-09-13
    +1
    Автору сей спасительной статьи огромное спасибо!
  37. Дарья
    #-10 Дарья Гость 2016-08-03
    0
    На линуксе тоже будет работать?
    1. Mr. Edyan
      #-11 Mr. Edyan Администратор 2016-08-03
      0
      Думаю на операционной системе Linux, Emmet будет работать. https://packagecontrol.io/packages/Emmet
  38. Daria
    #-12 Daria Гость 2016-08-02
    0
    Работает, спасибо!!! Только почему то начальная страница не создается
    1. Mr. Edyan
      #-13 Mr. Edyan Администратор 2016-08-02
      0
      Рад что разобрались в моё отсутствие )))
  39. Daria
    #-14 Daria Гость 2016-08-02
    0
    Подскажите, где посмотреть установленные плагины? может не установился..
  40. Daria
    #-15 Daria Гость 2016-08-02
    0
    все вроде сделала, не работает(
    1. Юлия
      #-16 Юлия Гость 2018-06-28
      +1
      код на этой странице не тот, что вставлять в консоль
  41. Александр
    #-17 Александр Гость 2016-08-02
    +1
    Большое спасибо! Я ваще в верстке зелёный да и в программировании тоже, короче во всем! :)... всё доходчиво!
  42. Серж
    #-18 Серж Гость 2016-07-06
    +1
    Благодарочка. 3 первыйх сайта ничуть не помогли. На твоем все по полочкам разложено!
  43. TrickBear
    #-19 TrickBear Гость 2016-05-25
    +1
    Thanks bro помог, "красивых" кодов bro :)
  44. Кирилл
    #-20 Кирилл Гость 2016-02-14
    +1
    Здравствуйте, подскажите пожалуйста, перепробовал кучу редакторов, из последних помню Атом, и SM, не могу установить плагины ни на один из них. Выдает ошибку при соединении с серверов. Возможно timout, как решить проблему?
    Спасибо!
    1. Mr. Edyan
      #-21 Mr. Edyan Администратор 2016-02-14
      0
      Не сталкивался с подобным, не имею понятия как Вам помочь
Войти через: