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
Читайте больше про: Лайфхаки
Понравилось: 81
Комментарии (82)
Добавить комментарий
Прокомментировать
  1. Garik
    #54 Garik Гость 2019-01-16
    0
    спасибо помогли
  2. LightBeag2
    #53 LightBeag2 Гость 2019-01-13
    +3
    Все пакеты можно загрузить, но там тупо нет emmet.
  3. LightBeag2
    #52 LightBeag2 Гость 2019-01-12
    0
    Как я понимаю у многим такая ошибка:There are np packages available for installation. я все варианты уже перепробывал
  4. Марат
    #51 Марат Гость 2019-01-12
    0
    та же ошибка There are np packages available for installation попробывал в свойствах браузера галки поснимать и код другой ничего не помогает
  5. Artem
    #50 Artem Гость 2019-01-11
    +3
    После включения плагина Install Package появляется следующая ошибка: There are np packages available for installation. Подскажите как решить данную проблему.
    1. foxy
      #49 foxy Гость 2019-01-13
      0
      сайт пакета упал. 502 eror
  6. Dmitrii
    #48 Dmitrii Гость 2019-01-08
    0
    Спасибо, помлогли!
  7. Heisenberg
    #47 Heisenberg Гость 2019-01-06
    +5
    У кого выдает ошибку после добавление кода представленного на сайте, вбивайте этот:

    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. вы
      #46 вы Гость 2019-02-15
      0
      Большое спасибо мне ты помог
  8. Евгений
    #45 Евгений Гость 2019-01-01
    0
    Очень удачно я нашел. Подробная статья о плагинах для Sublime Text
    Рекомендую к прочтению: https://use-web.ru/news.php?id=27&tid=3
  9. Ivan1874
    #44 Ivan1874 Гость 2018-12-17
    0
    Для кого на оффициальном сайте Package Control написано???
    WARNING: Please do not redistribute the install code via another website. It will change with every release. Instead, please link to this page
    Пожалуйста, не распространяйте код установки через другие сайты, он будет меняться с каждым релизом. Вместо этого давайте ссылку наэту страницу
  10. Alex
    #43 Alex Гость 2018-11-11
    0
    Спасибо вам все заработало!
  11. Жора Петров
    #42 Жора Петров Гость 2018-10-02
    0
    спасибо, ребятаааа!
  12. denys
    #41 denys Гость 2018-09-25
    0
    просто лайк. хорошо удобно доступно, спасибо
  13. Максон
    #40 Максон Гость 2018-09-08
    +1
    Привет, на мака установил все как ты писал, но горячие клавиши все равно не срабатывают(
  14. Алексей
    #39 Алексей Гость 2018-08-11
    +15
    Мне помогло вот это "у меня тоже ни с того, ни с сего перестало работать развертывание. помог совет Прогера, ревключить синтаксис HTML На верхней панели инструментов ST ищем View, потом Syntax -> HTML, кликаем и проверяем. и переназначать ничего не надо было"
    1. Sv
      #38 Sv Гость 2018-08-20
      0
      Спасибо. Помогло)
    2. Vadim
      #37 Vadim Гость 2019-01-17
      0
      спасибо,не мог понять почему не работает)
    3. grim
      #36 grim Гость 2019-03-13
      0
      спасибо! тоже самое было))
  15. Гость Надежда
    #35 Гость Надежда Гость 2018-08-02
    0
    Все получилось! Большое спасибо автору! Узнала из этой статьи, что комбинация !+<Tab> создают скелет html-документа. До этого знала для этой же цели про html:5+<Tab>.
  16. Павел
    #34 Павел Гость 2018-07-10
    +2
    Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
    что делать?
    1. Анон
      #33 Анон Гость 2018-08-04
      +13
      Используй вот этот 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. Никита
        #32 Никита Гость 2018-08-19
        0
        Большое спасибо
      2. Благодарный человек
        #31 Благодарный человек Гость 2018-09-13
        0
        Спасибо, помогло
      3. danya
        #30 danya Гость 2018-10-30
        0
        Спасибо, в очередной раз увидел помог твой коммент)
  17. bague or blanc cartier copie
    #29 bague or blanc cartier copie Гость 2018-05-30
    -1
    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/
  18. евгений
    #28 евгений Гость 2018-04-26
    +5
    Обычно начинающие при сохранении документа пишут index и выбирают тип файла html. Для полноценной работы Emmet нужно при указании имени файла писать index.html а затем выбирать тип файла html Вот такая мелочь может мозг вынести.
  19. Саша
    #27 Саша Гость 2018-03-16
    +4
    я вставил кодовую страку что бы установить emmet но он не установился в консольной строке написало error
  20. Артур
    #26 Артур Гость 2018-01-29
    +2
    Вообщем,установил плагин, потом когда пишу Emmet. виндоус выдаёт такую ошибку:
    Произошла ошибка при распаковке пакета для Emmet
  21. almaz
    #25 almaz Гость 2017-12-18
    +2
    спасибо вашей статье я установил как и хотел благодарен вам сильно
  22. Owl
    #24 Owl Гость 2017-11-26
    +1
    Всё установил как надо. Ни хрена Tab не работает! Вводил даже кусок готового HTML-кода, продолжать не желает1 В чём дело?..
    1. Stepan
      #23 Stepan Гость 2018-11-09
      +4
      Зайди в View далее в Syntax и выбери там HTML всё.
  23. Alex
    #22 Alex Гость 2017-11-03
    +1
    Миша, у меня так и не работает с Тав, по Ctrl + e срабатывает( Хотя и новый файл открывал.
  24. Vadim Chumachenko
    #21 Vadim Chumachenko Участник 2017-10-29
    0
    Подскажите у меня не работает через кнопку ТАБ,только через ctrl+e Как задать чтоб была через ТАБ?
    1. Максим
      #20 Максим Гость 2017-11-01
      +9
      Попробуйте в настройках включить HTML-синтаксис, мне помогло.
    2. Максим
      #19 Максим Гость 2017-11-01
      +27
      view > syntax > html
      1. Антон
        #18 Антон Гость 2017-11-20
        +3
        Спасибо, сработало
  25. knock off bulgari snake bracelet
    #17 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
  26. Никита
    #16 Никита Гость 2017-10-25
    +2
    ответьте пожалуйста что делать. пишет Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
    1. Оганес
      #15 Оганес Гость 2017-10-27
      +30
      На официальном сайте (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
        #14 Grarnik Гость 2017-12-11
        +2
        Спасибо!) Мне помог данный код
  27. Fara
    #13 Fara Гость 2017-10-01
    +1
    Здравствуйте у меня в компьютер не подключен к интернету ,установить плагин можно как без связи Спасибо заранее
  28. Саша
    #12 Саша Гость 2017-09-27
    +8
    Что от меня хочет эта бездушная махина Error validating download (got 6f4c264a24d933ce70df5dedcf1dcaeeebe013ee18cced0ef93d5f746d80ef60 instead of df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76), please try manual install
  29. ,hbnsq
    #11 ,hbnsq Гость 2017-09-15
    +1
    Миша,
    спасибо тебе Потапыч))
  30. Егор
    #10 Егор Гость 2017-09-14
    +2
    где скачать
  31. Антон
    #9 Антон Гость 2017-09-14
    +1
    Так же не создает классы после точки!!!
    Но сама табуляция работает
    1. Максим
      #8 Максим Гость 2018-03-21
      0
      У меня та же проблема. Если вы уже разобрались, напишите как это исправить пожалуйста.
  32. Антон
    #7 Антон Гость 2017-09-14
    0
    Не работает ">" "+" не понимаю почему
  33. Андрей
    #6 Андрей Гость 2017-09-04
    +1
    Работа плагина немного отличается от той, которая на скринах. Например, ul, нажимаю таб, и становится <ul></ul>-не как показано на сайте. Помогите
  34. Виталий
    #5 Виталий Гость 2017-09-04
    0
    Спасибо.Очень хорошо пошагово расказали как установить.
  35. Андрей
    #4 Андрей Гость 2017-09-04
    0
    Написано"Закрыть и перезапустить программу", а как перезапускать-то?
    1. Mr. Edyan
      #3 Mr. Edyan Администратор 2017-09-04
      0
      Просто запустите снова.
  36. Геннадий
    #2 Геннадий Гость 2017-09-01
    0
    Большое спасибо за статью, помогла!)
  37. Александ
    #1 Александ Гость 2017-08-29
    0
    скачать прогу с оф сайта 3 версию, а плагин установил как тут пишут и нифига не работает
  38. Юрий Титов
    #0 Юрий Титов Гость 2017-08-27
    -1
    Огромное спасибо
  39. Farrukh
    #-1 Farrukh Гость 2017-03-21
    0
    Thanks a lot
  40. Farrukh
    #-2 Farrukh Гость 2017-03-21
    0
    Helpful page
  41. Мария
    #-3 Мария Гость 2017-02-03
    +4
    Огромное спасибо!!!! Очень полезная статья. Все заработало
    1. Mr. Edyan
      #-4 Mr. Edyan Администратор 2017-02-03
      -1
      Пожалуйста )))
  42. Юрий
    #-5 Юрий Гость 2017-01-23
    +2
    Доброго дня. После ввода кода вылетает вот это: ImportError: No module named request
    Скачал последнюю версию бутстрапа... в чем дело:? Подскажите.
    Спасибо.
  43. Андрей
    #-6 Андрей Гость 2016-11-20
    0
    div.class работает и без Emmet
  44. Станислав
    #-7 Станислав Гость 2016-10-10
    +3
    установил по инструкции, перезапустил, по кнопке tab работает простое табулирование а не работа плагина
    1. Denis
      #-8 Denis Гость 2016-10-11
      0
      Такая же фигня!
      1. Миша
        #-9 Миша Гость 2016-10-19
        +3
        у меня тоже самое, но вместо tab работает сочетание Ctrl+e
        1. Миша
          #-10 Миша Гость 2016-10-19
          0
          Может кто-нибудь подсказать почему tab не работает?
          1. Mr. Edyan
            #-11 Mr. Edyan Администратор 2016-10-19
            +2
            Попробуйте код с официальной страницы https://packagecontrol.io/installation
            1. Миша
              #-12 Миша Гость 2016-10-19
              +13
              Спасибо! Понял в чём моя ошибка, сразу в окне программы tab не работает, нужно создать какой-нибудь файл html и уже в нём tab работает нормально.
            2. Lesya
              #-13 Lesya Гость 2018-06-14
              0
              Спасибо за ссылку! Еще бы долго мучилась без этой ссылки)))
  45. Владислав
    #-14 Владислав Гость 2016-10-02
    0
    Спасибо.
    Очень все доступно :)
  46. Ромка
    #-15 Ромка Гость 2016-09-13
    +1
    Автору сей спасительной статьи огромное спасибо!
  47. Дарья
    #-16 Дарья Гость 2016-08-03
    0
    На линуксе тоже будет работать?
    1. Mr. Edyan
      #-17 Mr. Edyan Администратор 2016-08-03
      0
      Думаю на операционной системе Linux, Emmet будет работать. https://packagecontrol.io/packages/Emmet
  48. Daria
    #-18 Daria Гость 2016-08-02
    0
    Работает, спасибо!!! Только почему то начальная страница не создается
    1. Mr. Edyan
      #-19 Mr. Edyan Администратор 2016-08-02
      0
      Рад что разобрались в моё отсутствие )))
  49. Daria
    #-20 Daria Гость 2016-08-02
    0
    Подскажите, где посмотреть установленные плагины? может не установился..
  50. Daria
    #-21 Daria Гость 2016-08-02
    0
    все вроде сделала, не работает(
    1. Юлия
      #-22 Юлия Гость 2018-06-28
      +1
      код на этой странице не тот, что вставлять в консоль
  51. Александр
    #-23 Александр Гость 2016-08-02
    +1
    Большое спасибо! Я ваще в верстке зелёный да и в программировании тоже, короче во всем! :)... всё доходчиво!
  52. Серж
    #-24 Серж Гость 2016-07-06
    +1
    Благодарочка. 3 первыйх сайта ничуть не помогли. На твоем все по полочкам разложено!
  53. TrickBear
    #-25 TrickBear Гость 2016-05-25
    +1
    Thanks bro помог, "красивых" кодов bro :)
  54. Кирилл
    #-26 Кирилл Гость 2016-02-14
    +1
    Здравствуйте, подскажите пожалуйста, перепробовал кучу редакторов, из последних помню Атом, и SM, не могу установить плагины ни на один из них. Выдает ошибку при соединении с серверов. Возможно timout, как решить проблему?
    Спасибо!
    1. Mr. Edyan
      #-27 Mr. Edyan Администратор 2016-02-14
      0
      Не сталкивался с подобным, не имею понятия как Вам помочь
Войти через: