Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как настроить sublime text 3 для html


Быстрая верстка в sublime text с плагином emmet

Плагин emmet для редактора sublime text позволяет быстро писать код для html иcss.

Для первоначальной разметки достаточно написать восклицательный знак и нажать кнопку tab.

Распакуется первоначальная структура документа.

Верстка дивов с emmet

С emmet удобно верстать дивы, для этого достаточно через точку написать название класса .icon и нажать tab.

Дочерние элементы

Рассмотрим дочерние элементы.

Например, есть див с классом items, в нем вложены перечисления, пишем .items>ul>li*2 нажимаем tab.

расспакуется див, внутри будет вложение двух li.

.items>ul>li*2

Соединение элементов

Перечилсяем разные классы, а между ними ставим знак плюс.

Пример nav+.item>ul^span.

Значок ^ добавит span не в ul, а выше в дереве.

nav+.item>ul^span

Группировка

Если мы сделаем .item1>(.item2+.item3), то увидим, что два item будут идти друг за другом.

.items1>(.item2+.item3)

.items1>(.item2+.item3)

Умножение и нумерация

Если мы у li сделаем класс .class добавим знак нумерации $ и умножим * на 4. ul>li.class$*4.

Будет четыре класса у каждого li.

ul>li.class$*4

Использование фигурных и квадратных скобок

Допустим пишем ссылка на другой сайт.

Для emmet будет выглядеть так a[href=’ya.ru’] и tab распакуется как ссылка.

Свободный текст можно записывать в фигурных скобках.

Пишем див с классом .text{текст}, распакуем.

a[href='ya.ru'] .text{текст}

a[href='ya.ru']

.text{текст}

Основные сокращения emmet в html

a link script:src img form input btn sect ol+ table+ c

a

link

script:src

img

form

input

btn

sect

ol+

table+

c

Вставляем в sublime text и напротив каждого сокращения нажимаем tab.

Основные сокращения emmet в css

Все сокращения emmet очень легко интуитивно догадаться, заучивать их не нужно.

pos posa t r b l z fl d di dtc v ow cup mt mb p w h mh f fz ta tt lh bg bcg c bd lst ! @f @i cm trf

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

pos

posa

t

r

b

l

z

fl

d

di

dtc

v

ow

cup

mt

mb

p

w

h

mh

f

fz

ta

tt

lh

bg

bcg

c

bd

lst

!

@f

@i

cm

trf

sdelatlending.ru

Sublime Text 3 жив. (Настройка и работа)

Sublime Text 3 — кроссплатформенный текстовый редактор. Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)

Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.

1. Установка программы и контроль за дополнениями (Package Control)

  1. Устанавливаем Sublime Text 3. Тут всё просто — качаем и запускаем.
Теперь нажимаем ctrl/⌘+shift+p или в меню (Tool > Command Palette). Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.

2. Настройки программы:

  1. Используем пробелы, вместо табов. «translate_tabs_to_spaces»: true
  2. Размер таба равен 4 пробела. «tab_size»: 4

    Вы спросите зачем? Что бы случайно не нажать пробел и таб вместе, и не сломать сборку pug.

    А так же для единообразия работы в команде.

  3. Строки не должны заканчиваться пустыми символами. Для этого используем плагин TrailingSpaces.

— Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:

  1. Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.
  2. Запрет переноса строки. Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель) «word_wrap»: «false»
  3. Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
  4. Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
  5. View → Side Bar → Hide Open Files — Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху

3. Полезные клавиши 'hotkey' :

  1. В первом пункте скажем, что пропустим все стандартные сочетания, такие как ctrl(⌘) + Z (⌘ — далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
  2. Пожалуй следующее самое популярное сочетание это: crtl + P — Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей.
  3. Следующее по важности: ctrl + D — Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь.
  4. ctrl + L — Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
  5. Поиск… Ну наверное первое это ctrl+F — поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать 'Find in folder…') Советую не включать в поиск папку «Известного толстячка»
  6. ctrl + shift + up/down — Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
  7. Теперь небольшой туториал по комбинациям комбинаций клавиш. Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу) Вот полезные из них:
  8. ctrl + K, ctrl + 4 — Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J — разворачивает всё что есть)
  9. ctrl + K, ctrl + B — Скрывает/показывает SideBar. (хорошо работает с F12)
Теги:
  • html
  • css
  • less
  • pug
  • sublime text 3

habr.com

html - Как настроить формат HTML Auto Indent на Sublime Text 3? - Qaru

У меня вопрос, когда я пишу HTML-код в Sublime Text 3. Я просто хочу установить формат форматирования в формате HTML. Например, когда я пишу p-тэг вроде кода, отступ работает так.

Hello world!

Но я хочу писать как под кодом, а не выше.

Hello world!

И не только p tag также ul, ol и т.д.

Как я могу задать формат форматирования HTML в Sublime Text 3?

задан Originerd 17 янв. '14 в 18:59

источник поделиться

qaru.site


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!