Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Emmet как пользоваться: Команды Emmet — шпаргалка для плагина html редактора Sublime Text

Содержание

Генерация html-кода с помощью плагина Emmet в Visual Studio Code « Марк и Марта.Ру. Записки отца-программиста

Про плагин Emmet узнал совершенно случайно, когда в редакторе Visual Studio Code нажал кнопку Tab после ошибочно введенного символа ‘p’ – текст заменился на <p></p>. Сначала подумал, что глюк, но попробовав то же самое с div, td и т.д. понял, что «это не баг, а фича».

Visual Studio Code очень быстро подсказывал синтаксис тэгов, потому необходимости в дополнительной автоматизации не было. Разве что неплохо бы научиться ему поддерживать Intellisense для подключенных таблиц стилей при html-верстке. Подсказка тэгов уже давно реализована в текстовых редакторах, например, Notepad++.

В случае с Emmet все немного иначе. Это не просто подсказчик синтаксиса, это по сути генератор сниппетов html и css кода. С помощью синтаксиса, по сути похожего на регулярные выражения, можно генерировать блоки кода, лишь введя несколько символов.

Emmet оптимизирован для html и css, но может быть также настроен на поддержку языков программирования.

Для использования плагина Emmet в Visual Studio Code нужно ввести паттерн для генерации кода и нажать кнопку Tab.

 

Использование плагина Emmet в Visual Studio Code

 

Таблица основных шаблонов для генерации HTML кода в плагине Emmet

Тип операцииШаблон для генерацииРезультат подстановки
Генерация дочерних тэговnav>ul>li<nav>

<ul>

<li></li>

</ul>

</nav>

div.row>div.form-group.has-success>label

 

    <div>

<div><label for=»»></label></div>

</div>

Множитель тэговul>li*5<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

ul>(li.item$*2>a)<ul>

<li><a href=»»></a></li>

<li><a href=»»></a></li>

</ul>

ul>(li.item$@-*3>a)<ul>

<li><a href=»»></a></li>

<li><a href=»»></a></li>

<li><a href=»»></a></li>

</ul>

 

Полное описание синтаксиса подстановки и замены доступно на странице http://docs.emmet.io/cheat-sheet/

 

[Перевод] Ненужные расширения для VS Code

Недавно я занялся тщательным исследованием VS Code и сделал несколько интересных находок. Как оказалось, в редакторе есть довольно много возможностей и настроек, позволяющих отлично решать те же задачи, которые решают многие популярные расширения.

Здесь речь пойдёт о шести сферах применения расширений, в которых эти расширения могут быть заменены стандартными механизмами VS Code.

1. Автоматическое переименование и закрытие тегов

Речь идёт о двух возможностях. Во-первых — это возможность одновременного переименования открывающих и закрывающих тегов. Во-вторых — возможность автоматического закрытия тегов.

Автоматическое переименование открывающего и закрывающего тегов

▍Расширения

  • Auto Rename Tag (3,3 миллиона загрузок): автоматически переименовывает парные HTML/XML-теги, так же, как это делается в Visual Studio IDE.
  • Auto Close Tag (3,1 миллиона загрузок): автоматически закрывает HTML/XML-теги, так же, как это делается в Visual Studio IDE или в Sublime Text.

▍Возможности VS Code

Соответствующая настройка в VS Code имеет несколько нечёткое и непонятное название. Наверное, именно поэтому многие люди не могут её найти.

  • Editor: Rename on Type: управляет автоматическим переименованием парных тегов при вводе кода. Значение по умолчанию — false.

Для того чтобы найти эту настройку можно открыть окно настроек редактора (File > Preferences > Settings) и ввести Editor: Rename on Type в строке поиска настроек.

Для включения этой возможности надо добавить следующее в settings.json:

"editor.renameOnType": true

Пока поддерживаются только HTML-файлы, но в трекере проекта есть открытая задача, касающаяся поддержки JSX-файлов.

Сам VS Code вряд ли будет поддерживать подобное для Vue-файлов. Похожий механизм, вероятнее всего, будет реализован в расширении Vetur. В трекере этого проекта уже давно открыта соответствующая задача.

2. Синхронизация настроек

Теперь VS Code поддерживает синхронизацию настроек между разными компьютерами. Эта возможность доступна, начиная с предварительной версии VS Code 1.48 (июльский релиз 2020 года).

Я сейчас испытываю эту возможность и до сих пор ни с какими проблемами не столкнулся.

▍Расширение

  • Settings Sync (1,8 миллиона загрузок): синхронизирует настройки, клавиатурные сокращения, сниппеты, расширения, файлы launch.json и многое другое c GitHub Gist.

▍Возможности VS Code

Об этих возможностях можно почитать в документации к VS Code. Ниже показаны страницы с соответствующими настройками.

Настройки синхронизации

Для синхронизации можно пользоваться учётными записями Microsoft или GitHub, можно указывать то, что необходимо синхронизировать.

Выбор объектов, которые нужно синхронизировать

3. Управление импортом модулей

Управление импортом JavaScript- и TypeScript-модулей может представлять собой непростую задачу, особенно в том случае, если нужно реорганизовать проект или отрефакторить код. Разработчики стремятся, по возможности, это автоматизировать.

▍Расширения

  • Auto Import (1,1 миллиона загрузок): автоматически находит и разбирает команды импорта модулей, предоставляет механизмы автозавершения кода и даёт возможность использовать действия (Code Actions). Поддерживает TypeScript и TSX.
  • Move TS (308 тысяч загрузок): наблюдает за перемещением TypeScript-файлов и поддерживает в актуальном состоянии связанные с ними команды импорта в пределах рабочего пространства.
  • Auto Import — ES6, TS, JSX, TSX (157 тысяч загрузок).

▍Возможности VS Code

  • JavaScript > Suggest: Auto Imports: позволяет включать и выключать предложения по автоматическому импорту. Требует использования в рабочем пространстве TypeScript начиная с версии 2.6.1. Значение по умолчанию — true.
  • TypeScript > Suggest: Auto Imports: позволяет включать и выключать предложения по автоматическому импорту. Требует использования в рабочем пространстве TypeScript начиная с версии 2.6.1. Значение по умолчанию — true.
  • JavaScript > Update Imports on File Move: Enabled: позволяет выбирать способ автоматического обновления путей импорта модулей при переименовании или перемещении файлов в VS Code. Требует использования в рабочем пространстве TypeScript начиная с версии 2.9. Значение по умолчанию — prompt.
  • TypeScript > Update Imports on File Move: Enabled: позволяет выбирать способ автоматического обновления путей импорта модулей при переименовании или перемещении файлов в VS Code. Требует использования в рабочем пространстве TypeScript начиная с версии 2.9. Значение по умолчанию — prompt.

Вот как выглядят эти настройки в файле settings.json:

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

Кроме того, если вы хотите упорядочивать команды импорта при сохранении файлов, вам понадобится следующая настройка:

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Её использование приводит к удалению неиспользуемых инструкций импорта и к размещению команд импорта таким образом, чтобы сначала шли бы команды, в которых используются абсолютные пути. Я — большой любитель таких механизмов, о которых можно попросту забыть, однажды настроив их.

4. HTML- и CSS-сниппеты

Возможно, вы решите, что вам пригодилось бы следующее:

  • Использование HTML-шаблонов, которые позволяют быстро создавать стандартные элементы описания страниц.
  • Создание хранилища часто используемых фрагментов кода, использование которого позволяет экономить время.
  • Сокращённые способы описания больших блоков кода.

Всё это — схожие, но немного отличающиеся друг от друга возможности, о реализации которых мы поговорим в этом разделе.

▍Расширения

  • HTML Snippets (3,8 миллиона загрузок): полные HTML-теги, включая HTML5-сниппеты.
  • HTML Boilerplate (684 тысячи загрузок): простой генератор шаблонного HTML5-кода.
  • CSS Snippets (22 тысячи загрузок): коллекция CSS-сниппетов.

▍Возможности VS Code

В VS Code встроен набор инструментов Emmet. Эти инструменты предлагают возможности по работе с сокращениями и сниппетами для HTML и CSS. Emmet включен по умолчанию для следующих файлов: html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less и stylus. Подробности об этом можно узнать в документации по VS Code.

Например, для того чтобы добавить в файл шаблонную HTML-разметку страницы, достаточно ввести восклицательный знак (!) и нажать клавишу Tab.

Добавление шаблонного HTML-кода в файл

Emmet поддерживает и сокращения, позволяющие вставлять в документы группы элементов. Их устройство напоминает CSS-селекторы.

Например, введём в HTML-файле такую конструкцию:

ul>li*5

Нажмём клавишу Tab. Эта конструкция будет преобразована в следующий код:

        
  •     
  •     
  •     
  •     

Если ввести в редакторе a и нажать на Tab, то в код будет вставлена конструкция , а курсор будет размещён внутри кавычек, позволяя тут же ввести значение атрибута href.

Это — лишь очень краткий рассказ о возможностях Emmet в сфере HTML. VS Code предлагает похожие возможности и для CSS. Среди этих возможностей мне больше всего нравится автоматическое добавление префиксов производителей браузеров. Подробности об Emmet вы можете найти в документации к этому набору инструментов. Кроме того, вам может пригодиться эта шпаргалка по Emmet.

Настраивать имеющиеся сниппеты и создавать собственные можно, редактируя файл snippets.json.

Emmet поддерживает не только обычные HTML и CSS. Например, чтобы пользоваться Emmet при создании Vue-приложений и при написании JavaScript-кода, в settings.json нужно добавить следующее:

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}

Если вы хотите включить поддержку Emmet для markdown, то вам следует знать об одной особенности (или, скорее, об ошибке). Она заключается в том, что для этого вам нужно, чтобы в emmet.excludeLanguages был бы записан пустой массив:

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}

Обсуждение этого можно найти здесь.

5. Шаблонный текст

Возможно, вам, в ходе работы над страницей, понадобится заполнить её шаблонным текстом. Делают это обычно для того чтобы оценить внешний вид страницы, на которой имеется какое-то содержимое. В роли такого текста часто используется знаменитый «Lorem ipsum». Существуют расширения, позволяющие генерировать подобный текст, но соответствующие возможности есть и в VS Code.

▍Расширение

▍Возможности VS Code

Выше мы уже говорили о том, что в VS Code встроен набор инструментов Emmet. В Emmet имеется сокращение, позволяющее генерировать шаблонный текст. Для того чтобы им воспользоваться, достаточно ввести lorem и нажать на клавишу Tab. Благодаря этому будет автоматически сгенерирован абзац, состоящий из 30 слов.

Ввод сокращения lorem

Это сокращение можно использовать не только при создании одного абзаца текста, но и, например, для генерирования нескольких блоков каких-то элементов. Скажем, конструкция p*2>lorem приведёт к созданию двух элементов , заполненных шаблонным текстом:

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus   molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias   officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!

  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore   recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at   neque quos facere sequi unde optio aliquam!

6. Автоматическое удаление хвостовых пробелов

Обычно соответствующие расширения убирают ненужные пробелы в конце строк либо в процессе редактирования кода, либо по команде. А те настройки VS Code, которыми я предлагаю воспользоваться вместо подобных расширений, рассчитаны на удаление пробелов при сохранении файлов.

▍Расширения

  • Trailing Spaces (447 тысяч загрузок): позволяет выделять и удалять хвостовые пробелы.
  • Autotrim (15 тысяч загрузок): в описании к этому расширению сказано следующее: «Хвостовые пробелы часто появляются после редактирования кода, после удаления конструкций, находящихся в концах строк, после выполнения других подобных действий. Это расширение наблюдает за процессом редактирования кода, оно запоминает номер строки, в которой находится активный курсор. После того, как в этой строке больше не будет активного курсора, оно удалит из неё хвостовые знаки табуляции и пробелы».

▍Возможности VS Code

  • Files : Trim Trailing Whitespace: когда эта возможность включена, она будет убирать хвостовые пробелы при сохранении файлов. Значение по умолчанию — false.

Для включения этой возможности в settings.json можно добавить следующее:

"files.trimTrailingWhitespace": true

Итоги

Прежде чем вы, столкнувшись с необходимостью решения какой-то задачи в VS Code, приступите к поиску подходящего расширения, выясните, есть ли средство для решения вашей задачи среди стандартных возможностей VS Code. Это кажется совершенно очевидным, но мы все, вероятно, иногда поступали с точностью до наоборот. Новые возможности появляются в VS Code регулярно, поэтому время от времени рекомендуется заглядывать в журнал изменений, внесённых в этот редактор.

Стремитесь ли вы всегда, когда это возможно, пользоваться стандартными возможностями VS Code, а не расширениями?

Habrahabr.ru

прочитано 12019 раз

Бесплатный онлайн урок: #7. Как пользоваться плагином Emmet в Sublime text 2

29.05.2017

И

Комментариев нет

70

#7. Как пользоваться плагином Emmet в Sublime text 2

.block
#block

Emmet великолепен для быстрого написания разметки. Просто напечатайте css-селекторы для нужной вам разметки, и нажмите tab. Используете Jade, Slim или Haml? Emmet работает с ними так же хорошо, как и с HTML.

Emmet

Посмотрите немного примеров использования Emmet. Также не забудьте посмотреть шпаргалку по синтаксису, в которой описаны все возможности для работы с разметкой.

element + tab создаёт элемент и позиционирует курсор внутри него.

elementchildElement + tab создаёт вложенные элементы.

element*5 + tab создаёт указанный элемент столько раз, сколько указано.

Также вы можете использовать символ $ в качестве счётчика. Используйте $$ для счётчика, начинающего отсчёт с нуля.

li.item$*3 + tab →

Квадратные скобки используются для указания атрибутов элемента, фигурные — для указания контента.

CSS

Изучение возможностей Emmet в CSS — это одна из лучших инвестиций для фронтэндера. Это не только повысит скорость разработки, но и поможет предотвратить часто совершаемые ошибки.

В CSS emmet работает при помощи сокращений, напоминающих пары свойство/значение. Нет чётко определённых сокращений, emmet работает на основе так называемого fuzzy matching — он делает выбор, какое свойство использовать, на основе того, что вы ввели.

Примеры:

posrel → position: relative;
posab → position: absolute;
fl → float:
fr → float: right;
db → display: block;
dib → display: inline-block;
tdn → text-decoration: none;
c → color: #
w → width:
w100 → width: 100px;
w100p → width: 100%;
p → padding:
p10 → padding: 10px;
p10p → padding: 10%;
bt1-s-red → border-top: 1px solid red;

Вы поняли идею — неплохо бы натренировать ваш мозг, чтобы вы могли на лету использовать эту технику вместо печатания полных пар свойство/значение.

JOIN VSP GROUP PARTNER PROGRAM: https://youpartnerwsp.com/ru/join?93412

Web Developer

Привет, с вами Developer blog. На этом канале вы сможете погрузится в мир web-разработки. Множество уроков по html, css ,bootstrap, foundation, различные cms системы такие как wordpress, joomla, научимся создавать интернет магазины и многое другое! Так же много уроков по верске сайтов! Подписывайтесь на наш канал, группу вконтакте, оставляйте свои вопросы и мы обязательно их рассмотрим в видео!

Последние сообщения

Вопрос: Как использовать Notepad? — Компьютеры и электроника

Содержание статьи:

 

Установка и настройка Notepad++ и подключение плагина Emmet.

Видео взято с канала: Виктор Шкода


 

Как Установить Текстовый Редактор NotePad++ | Блокнот Notepad++ Для Windows

Показать описание

Где скачать и как установить отличный по своим характеристикам блокнот Notepad++. Это отличная альтернатива стандартному блокноту Windows. Надеюсь, установив его, вы не пожалеете..
Ссылка на программу: https://clck.ru/Lhyy4.
=
На создание видео и работу с каналом требуется значительное время, а выкладывать бессмысленные ролики ради просмотров я не буду, сам люблю качественный контент и предпочитаю отдавать так же, качественно. Возможно вы заметили, как подробно я объясняю каждую деталь в своих видео. Потому что я сам начинал с нуля и прекрасно понимаю тех, кто только начал заниматься сайтами..
На канале только база, нужны уроки типа “помогите натянуть вёрстку на Вордпресс” или что то по программированию, ищите другие ролики, у меня этого нет. Не то что я против этого, просто у каждого свои интересы и другие пути развития. Уж если мне “приспичит”, я просто закажу эту вёрстку, но за 10 лет работы с сайтами такое не случалось, всегда находил решение сам..
А те, кто пишет в комментариях “что за фигня, ну и затянул видео, а можно было вот так…”… смотрите другие каналы. Или вы решили как то самоутвердится за счёт моих видео написав подобный комментарий? ) Типа “Я умею, а ты нет..” =) Да пожалуйста, умейте ) А я умею, так как я умею. Надеюсь на понимание. Всем удачи!
Автор канала и видеороликов Александр Соловьёв.
VK http://bit.ly/2CfTO0N.
Facebook http://bit.ly/2Us5zs1.
Эти Плейлисты Могут Быть Вам Полезны.
=
Создание сайта на WordPress: https://www.youtube.com/playlist?list=PLXVt-JHK3WKd2cCkzlPAulcYs1r7GDmyj.
Плагины WordPress: https://www.youtube.com/playlist?list=PLXVt-JHK3WKex4GWW227X8qacnFjIJMFr.
Работа с Базой Даных Сайта: https://www.youtube.com/playlist?list=PLXVt-JHK3WKe4AkLUQS4tgV9-ZZzJkVFi.
Полезные Программы и Сервисы: https://www.youtube.com/playlist?list=PLXVt-JHK3WKeb85Q2ExmJKCLYy9N02kN
=
Создание Сайтов На Joomla (уроки по старой версии Joomla 1.5): https://www.youtube.com/playlist?list=PL921803DFC97EADA5.
=

Видео взято с канала: Создаём сайты самостоятельно


 

Интересные фишки в Notepad++ часть #1

Видео взято с канала: GlebBrain


 

Как пользоваться программой notepad++

Видео взято с канала: Aviation Live


 

Урок 1. Редактор Notepad++. Установка

Видео взято с канала: WebForMySelf


 

Урок 2. Редактор Notepad++. Настройка

Видео взято с канала: WebForMySelf


 

Как пользоваться NotePad? Как работать с редактором Notepad++

Видео взято с канала: Александр Беляшов


Мои инструменты и технологии – Николай Громов

Каждый день я пишу относительно много разметки, стилей и JS, использующихся в коммерческих проектах. За время работы (с 2000 г.) попробовал довольно много техник, технологий и ПО, о которых коротко расскажу в этой статье.

Мои студентам на Эпике, в HTML Академии, учащимся Loftschool и просто интересующимся.

Общий подход

Красивый код

Всегда пишите красивый код!

  • Его быстрее (и приятнее) читать.
  • В нём видно ошибки.

Сам всегда сразу пишу красивый код, но если у вас с этим проблемы, можно смотреть в сторону автоматических средств форматирования в используемом редакторе, в сторону проверки форматирования перед коммитом (см. [Git(#git)]) или в сторону консольных утилит.

БЭМ как система именования

Это самое простое, надёжное и не зависящее от технологического стека решение, позволяющее избежать уймы проблем (большая часть проблем являются «врождёнными» для используемых в браузере технологий). Вкратце познакомиться с БЭМ как отношением к интерфейсу и системой именования селекторов можно в моём небольшом материале Как работать с CSS-препроцессорами и БЭМ, а более полно, вместе с объемным стеком БЭМ-технологий — на официальном сайте.

Если совсем коротко, то БЭМ (не полный стек, а только как система именования) даёт пространство имён селектора, что приводит к изоляции компонентов в стилях (с поправкой на наследование свойств) и к безопасной модификации стилей отдельных блоков, элементов, модификаторов.

Конечно, при использовании специфических стеков технологий (React, Vue…) можно организовать такую «изоляцию» и другими способами (CSS in JS, детка!), но они тянут за собой множество специфических инструментов.

Обучение

«Учусь, следовательно, существую», перефразируя Декарта. Если перестать учиться, можно быстро «выпасть» из профессиональной сферы.

Только учиться, впрочем, недостаточно, нужно постоянно практиковать. Не применяя полученные знания, вы не заметите проблем и ограничений, накладываемых технологиями и методологиями.

Не менее 1 часа в сутки стоит уделять обучению.

Англоязычные ресурсы, которые мне нравятся:

Сообщества во ВКонтакте, за которыми я слежу:

Эксперименты

Мне иногда пишут в соц. сетях (чаще — в ВК), интересуясь как сверстать тот или иной заковыристый компонент страницы (когда не пишут, выдумываю себе задачи сам, если испытываю в них недостаток по ходу работы). Решение подобных задач держит в тонусе.

По ходу самообучения постоянно экспериментирую в песочницах, что тоже «прокачивает». К примеру, по ходу чтения книги Лии Веру «Секреты CSS. Идеальные решения» я пробовал все приведённые решения сразу. И многие «решения» оказались идеальными лишь в том смысле, что почти неприменимы в реальной работе.

Редактор кода

После мозгов и рук, это главный ваш инструмент, нужно знать его досканально. Я использую для написания кода Sublime Text 3.

Установленные у меня плагины:

  • Package Control (менеджер пакетов (для установки всего остального)),
  • A File Icon (чистое украшательство),
  • AutoFileName (облегчает указание пути к файлам в проекте),
  • BracketHightlighter (подсветка открывающей/закрывающей скобки),
  • Color Highlighter (показывает цвет в стилевых файлах),
  • DocBlockr (делает более удобным многострочное комментирование, описание функций в JS),
  • eCSStractor (извлекает список селекторов из разметки (можно в БЭМ-представлении, с амперсандами в местах разделения элементов и модификаторов)),
  • EditorConfig (добавляет поддержку проектных файлов .editorconfig с универсальными настройками редактора),
  • Emmet (быстрое написание разметки и стилей),
  • GitGutter (подсвечивает изменения от предыдущего коммита),
  • Jade, Pug, JSX, LESS, Sass, Stylus, MarkdownLight, Syntax Highlighting for PostCSS (подсветка синтаксисов соответствующих языков),
  • PyV8 (нужен для работы Emmet, автоматически ставится вместе с ним),
  • List stylesheet variables (даёт список стилевых переменных проекта с нечётким поиском),
  • SideBarEnhancemets (расширяет функциональность контекстного меню сайдбара),
  • StringEncode (преобразует строки, в т.ч. экранирует HTML-символы),
  • Sync Settings (синхронизирует настройки, плагины, темы между несколькими компьютерами),
  • View In Browser (добавляет в контекстное меню файлов проекта пункты для открытия в браузерах).

Прочие дополнения брать здесь.

Горячие кнопки радикально ускоряют работу. Смотри шпаргалку по горячим кнопкам ST3.

Настройки самого ST3 менее важны, но некоторые из них стоит сделать:

  • включить автосохранение файла по потере фокуса на окне,
  • добавить в игнорирование некоторые файлы и папки, чтобы не видеть их в ФС проекта,
  • отключить автодопонение, если оно мешает пользоваться Emmet.

Мои настройки на момент написания этого материала (за исключением темы оформления и словаря проверки орфографии).

Я активно пользуюсь переключением между проектами (сохраняю проекты ST3 в директорию проекта) и нечётким поиском по файлам (Crtl + P на Windows, Cmd + P на OSX).

Я экспериментировал с Atom (использовал его 4 месяца, но вернулся к ST3 из-за скорости работы) и VS Code. Для обоих этих редакторов удавалось найти похожие дополнения и организовать весьма похожий рабочий процесс.

Второй по важности инструмент, даёт понимание того, как сработал ваш код. Поскольку изначально мы верстаем под самый распространенный в ЦА браузер (почти для всех проектов это Chrome), речь именно про DevTools Google Chrome.

Для верстальщика наиболее важны вкладки Elements (узлы DOM и применённые к ним стили в подвкладке Styles) и Network (активность браузера при открытии страницы), однако это лишь малая часть возможностей.

Для изучения:

Git

Работать над кодом (да и любым текстом) без системы контроля версий — немыслимо. С Git вы получаете:

  • Удобную работу в команде (даже если два разработчика правили один и тот же файл).
  • Удобство собственной работы на двух (и более) рабочих местах.
  • Полную историю изменений в проекте с возможностью возврата к любой временной точке.
  • Резервную копию на удалённом сервере (github, bitbucket, gitlab…).
  • Автоматическую проверку форматирования и некоторых типовых ошибок по хукам (перед коммитом, перед пушем…).
  • Возможность логического ветвления (разработка или проба какой-либо возможности проекта в отдельной ветви разработки).
  • В комбинации с github — интерфейс принятия изменений из ветки или форка (Pull Request) с возможностью построчного обсуждения предлагаемого кода.

Для освоения git рекомендую отличный скринкаст Ильи Кантора (на данный момент там отсутствует раздел про удалённые репозитории, но это единственный минус) и переведённый на русский язык скринкаст про Git от lynda.com.

См. так же мою шпаргалку по командам Git.

Терминал

Я использую командную строку по нескольким причинам:

  1. Существует множество консольных инструментов, которые удобнее (и развиваются быстрее) инструментов с графическим интерфейсом и при этом бесплатны. В отрыве от вёрстки/фронтенда, к примеру, инструмент для скачивания видео с youtube, в одну команду сохраняющий видео (с он-лайн сервисами это менее удобно).
  2. Можно писать собственные инструменты на Javascript. Например, генератор файловой структуры новых блоков в проекте.
  3. В моей работе много задач (часто — рутинных, типа сборки спрайтов), которые могут быть автоматизированы консольными утилитами. Вся автоматизация проекта у меня работает на Gulp, а у него лишь консольный интерфейс.
  4. Некоторые файловые операции быстрее делать из терминала.
  5. Git имеет консольный интерфейс (все GUI для Git — лишь надстройки над командами в терминале).
  6. Можно воображать себя хакером.

Для студентов с Windows на базовом и продвинутом курсах по вёрстке в EpicSkills я рекомендую использовать GitBash, чтобы у владельцев Windows, OSX и Linux были похожие команды в терминале, но сам недавно внедрил в свою практику терминал подсистемы Linux.

Использую алиасы (сокращения для длинных команд) для Git-команд и для быстрого перехода в папки конкретных проектов. Пример файла с алиасами.

Препроцессоры

Из стилевых препроцессоров я пробовал LESS, Sass и stylus (плюс, условно, PostCSS). На данный момент остановился на Sass (увы, stylus не разрабатывается более), хотя остались в поддержке и проекты на LESS. Возможности нативного CSS пока не устраивают и на призывы отказаться от препроцессоров я смотрю как на «ребячество в отрыве от реальной жизни».

В плане написания разметки мне по-прежнему очень нравится писать обычный html, однако для относительно простых проектов я всё чаще использую pug.

Процессинг стилей и разметки делает код несколько менее очевидным, но это полностью компенсируется удобством разработки и поддержки, простотой внедрения компонентного подхода, но главное — ускорением рабочего процесса.

Автоматизация

Если вы занимаетесь веб-разработкой как хобби (как некоторая часть русскоязычных веб-евангелистов) и самые сложные ваши задачи — сайты котов и прочие «проекты», где вы сами себе заказчик, то можно обойтись и без автоматизации, ибо вам не нужны:

  • процессинг и постпроцессинг стилей и разметки,
  • автоматическая оптимизация изображений,
  • автоматическая сборка и пересборка (растровых и/или векторных) спрайтов,
  • локальный сервер в пересборкой стилей/разметки/чего_угодно, обновлением страницы в браузере и возможностью смотреть страницу с любого компьютера или мобильного устройства в той же локальной сети.

Я автоматизирую рабочий процесс с помощью Gulp (про который есть отличный скринкаст), т.к. на собственных проектах (я фрилансер) не нуждаюсь в возможностях Webpack (сейчас работаю по одному стороннему проекту с React, там, конечно, Webpack).

Есть мой стартовый репозиторий с автоматизацией и более простой репозиторий для студентов.

Стартовая библиотека

Постоянно приходится верстать похожие элементы страницы. Разумно сделать библиотеку компонентов с универсальной разметкой и самой базовой стилизацией для коросспроектного использования. У меня такая библиотека внедрена в стартовый проект.

Разное

Раскладка Бирмана

Это типографская раскладка, позволяющая вводить стрелки, кавычки-ёлочки, разные типы тире и прочие типографические символы без запоминания их кодов и/или на клавиатурах без цифрового блока.

Переключение раскладки

Нередко ошибаюсь с раскладкой при наборе, так как (стыдно), по-прежнему, часто смотрю на клавиатуру. Немного помогает Punto Switcher, но с раскладкой Бирмана он несколько глючит: показывает два пункта «Русский язык» и два «Английский язык», а ТП перестала отвечать на обращения.

Обмен скриншотами

Отправлять студенту или клиенту скриншот с какими-либо пояснениями прямо на картинке — это удобно. Использую для этого Monosnap.

Измерения на экране

Для измерений, получения цвета с экрана и в качестве экранной лупы (всё — по горячим кнопкам) использую PicPick.

Хранение паролей

Удобно хранить пароли в базе данных, можно делать пароли примерно такого вида: Gji%86gjl00ljg67c;s0-, а помнить придется лишь пароль к самой базе данных (если его забыть, то — всё тлен). Использую кросспатформенную KeePass и имею несколько резервных копий файла с паролями (все компьютеры, телефон, планшет).

Заключение

Поделитесь своими способами оптимизации рабочего процесса.

Прокачиваем Notapad++, лучшие плагины для веб-разработки.

Notepad++ — простой и удобный редактор для создания сайтов. Хорошо настроенный веб-редактор может очень сильно облегчить жизнь веб-мастеру: подсветка синтаксиса, сжатие и форматирование, автоподстановки, и даже исправление ошибок в коде.

Начнем пожалуй с простого и удобного редактора Notepad++, он имеет русский интерфейс, поддержку синтаксиса различных языков, макросы и другие полезные опции. Свой первый сайт я делал именно в этом редакторе, а сейчас я его использую в основном для быстрых правок и txt-файлов. Для новичков он станет хорошим выбором. Скачав последнюю версию Notepad++, я с удивлением обнаружил, что менеджера плагинов не оказалось на привычном месте. Берем отсюда, распаковываем в папку с установленным Notepad++, перезапускаем. Если все верно, должен появиться в меню плагины — Plugin Manadger. Теперь мы сможем расширить и без того не малый функционал редактора.

Прокачиваем Notepad++ плагинами

Плагин Emmet — крутой инструмент разработчика, позволит web-мастеру писать код HTML и CSS во много раз быстрее и допускать меньше ошибок и опечаток.
Чтобы проверить работу плагина, создаем HTML, пишем например a*5, выделяем, жмем ctrl+alt+enter, если не сработало идем в опции — горячие клавиши, нужный пункт выделен красным, удаляем конфликтные комбинации, пробуем еще раз, должно сработать. Далее переходим по ссылке и читаем документацию, оно того, как видите стоит.

Плагин TextFX включает в себя множество функций для преобразования выделенного текста: минификация, работа с регистром, преобразование текста, экранирование, автозакрытие и очистка HTML тегов, подсчет символов, слов, пробелов в один клик (будет полезно для копирайтеров) и многое другое. Я сам часто пользуюсь этим плагином и аналогов некоторым функциям в других редакторах пока не нашел.

Для проверки орфографии используем плагин DSpellChek. Чтобы установить словарь нужного языка, запускаем Notepad++ от имени администратора, жмем в меню плагины — DSpellChek — Download More Language, загружаем нужный словарь. Чтобы выбрать, какой словарь использовать в данный момент — жмем ALT+D.

WebEdit — этот плагин добавляет значки популярных HTML-тегов, пользоваться довольно просто и удобно, выделяем текст, жмем на иконку тега и WebEdit обернет тегом выделенное. Можно настроить под себя, убрав лишние иконки через редактирование файла WebEdit.ini.

Compare — плагин для визуального сравнения файлов. Может пригодиться. Хотя я предпочитаю пользоваться удобной программой Meld, портированной из Linux и умеющей сравнивать не только файлы, но и каталоги.

Customize Toolbar — поможет настроить редактор Notepad++ под себя, добавить свои или удалить ненужные кнопки с панели.

Плагин Explorer — мини проводник для Notepad++, создает слева удобную панель, на которой расположены все папки и файлы проекта.

MultiClipboard – расширенный менеджер буфера обмена. Отслеживает буфер ОС, корректно работает с кириллицей. Копируем по очереди несколько элементов, вставляем с выборкой через ctrl+alt+v.

Установка Emmet в Vim по простому и с пояснениями

Категория: линукс

Так как я окончательно перебрался в Linux, и занимаюсь разработкой именно в этой операционной системе, то вопрос Vim обойти просто не сумел.

Конечно же пользоваться Vim сегодня необязательно, когда все популярные программы для разработчика уже кроссплатформенные и работают во всех операционных системах.

Но культура Linux всё же настаивает, чтобы опытные пользователи владели бы основами работы в этом замечательном редакторе кода.

Лично я решил установить себе Emmet и столкнулся с далеко не дружелюбными руководствами, а со старыми токсичными мануалами и отношением которое уже давно забыто в обществе Linux, но которое имело место в конце девяностых годов.

Токсичность тогда просто зашкаливала, и поэтому кроме серверов особо Linux нигде не работал.

Но время это давно прошло, а вот мануалы переписывать как то не стали, поэтому я рискнул просто по простому рассказать, как устанавливать Emmet в Vim.

Самый простой способ это сделать для меня, это воспользоваться pathogen.vim.

Заходим на страницу emmet для Vim.

И там мы найдём — install using pathogen.vim

Но не спешите, ведь вам ещё нужно установить pathogen, вот так всё не просто.

Инструкция как это сделать находится на странице pathogen.

Но можно сразу его установить вбив следующую строку в терминал:

mkdir -p ~/.vim/autoload ~/.vim/bundle && \
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

Дальше нам нужно создать файл настроек vim.

Делается это просто, в вашей директории полюзвателя создаём ручками файл .vimrc

Сам vim этот файл при установке не создаёт, но как только вы его создадите, vim сразу его подхватит.

В этот файл вбиваем следующее содержание:

execute pathogen#infect()
syntax on
filetype plugin indent on

После этого можно смело устанавливать, наш плагин при помощи pathogen.vim

А именно:

git clone https://github.com/mattn/emmet-vim.git ~/.vim/bundle/emmet-vim

Теперь нужно проверить то, что у нас получилось.

Откроем файл index.html в vim, или создадим его, главное чтобы HTML.

И далее вводим html:5 и нажимаем клавишу активации плагина Emmet — Ctrl +y а потом жмём на клавишу запятая (,). Только после этих хитрых манипуляций, плагин начнёт работать.

Лично я заменил эту гарячую комбинацию на Ctrl+z а затем запятая.

Как по мне так проще, для этого в файл .vimrc я дописал строчку:

let g:user_emmet_leader_key='<C-Z>’

Ну вот и можно довольно таки комфортно верстать веб сайты в Vim, по такому пути можно устанавливать столько плагинов для работы с Vim, сколько вам будет нужно.

snippets.json

Создайте файл snippets.json в папке расширений, чтобы добавить или переопределить фрагменты. Структура этого файла такая же, как и у исходного: на верхнем уровне вы определяете имя синтаксиса , которому принадлежат ваши фрагменты, а на втором уровне есть следующий раздел:

  • сокращений или фрагменты содержат определения фрагментов различных типов.
  • фильтры содержит разделенный запятыми список фильтров, применяемых по умолчанию для текущего синтаксиса.Если это свойство не определено, используется фильтр html .
  • extends : имя синтаксиса, от которого текущий синтаксис должен наследовать определения фрагментов. Например, синтаксис sass унаследован от css , но вы можете создать свой собственный или переопределить некоторые специфичные для SASS фрагменты для этого определения синтаксиса.

При загрузке пользовательские файлы snippets.json в рекурсивно объединяли с исходным, добавляя или обновляя сокращения и фрагменты.

Текстовые фрагменты

В разделе определения синтаксиса сниппетов вы создаете простые текстовые фрагменты, почти такие же, как и в вашем редакторе. Вы также можете использовать табуляторов внутри сниппетов, чтобы перемещаться между ними с помощью клавиши Tab, когда аббревиатура раскрывается (если ваш редактор поддерживает их). Эммет заимствовал формат табуляции из редактора TextMate:

  • $ 1 или $ {1}
  • $ {1: hello world} — табуляция с заполнителем

Обратите внимание, что $ {0} или $ 0 табуляция имеет особое значение в некоторых редакторах, таких как TextMate или Eclipse, и используется в качестве последней позиции курсора после выхода из «режима табуляции», поэтому вам лучше использовать табуляторы, начинающиеся с 1 .

Переменные

Вы можете использовать переменных во фрагментах для вывода предопределенных данных. Например, фрагмент синтаксиса HTML html: 5 имеет следующее определение:

   \ n  ...  \ n 
  

В приведенном выше примере $ {lang} используется для ссылки на переменную lang , определенную в разделе переменных файла snippets.json . Если ваш основной язык, например, русский, вы можете просто заменить переменную lang значением ru и сохранить исходные фрагменты.

Кроме того, вы можете переопределить значения переменных с помощью встроенных атрибутов сокращения: html: 5 [lang = ru] . Вместе с сокращениями атрибутов ID и CLASS — # и . — переменные можно легко переопределить прямо в сокращении:

  "for": "for (var $ {class} = 0; i <$ {id} .length; $ {class} ++) {\ n \ t |}"
  

Пример использования: для # array.i .

Предопределенные переменные

В фрагментах

есть несколько предопределенных имен переменных, которые имеют особое значение для Эммета:

  • $ {cursor} или | являются синонимами $ 0 и используются в качестве позиции курсора в сгенерированном выводе.
  • $ {child} относится к позиции, в которой должны выводиться дочерние сокращения и фрагменты. Если не определено, дочерние элементы будут выводиться в конце содержимого фрагмента.

Побег

| и $ 9000 4 символа

Символ $ используется для табуляции и переменных, | символа, который используется для обозначения позиции курсора при раскрытии фрагмента. Если вы хотите вывести эти символы как есть, вы должны использовать двойную обратную косую черту, чтобы избежать их: \\ $ или \\ |

Обмен фрагментами

Если вы хотите поделиться своими сниппетами с другими пользователями, вы должны поместить их в файл, имя которого начинается с сниппетов , например: snippets-foo.json , snippets_bar.json , snippetsBaz.json . Эммет загрузит их при запуске и объединит в один набор фрагментов.

Обратите внимание, что фрагменты, определенные в файле snippets.json , имеют более высокий приоритет, чем фрагменты, определенные в фрагментах * .json .

Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.
комментарии предоставлены

Ускоренный рабочий процесс: освоение Эммета, часть 1

Emmet - это бесплатный плагин для текстовых редакторов, позволяющий быстрее писать код HTML и CSS.В этой серии, состоящей из нескольких частей, я покажу вам, как писать код HTML и CSS быстрее, чем когда-либо с Emmet, профилируя все функции Emmet и как использовать синтаксис, сокращения и сочетания клавиш, чтобы сэкономить ваше время.

Emmet - обязательный набор инструментов веб-разработчика. С Emmet вы можете быстро создать свою разметку. Вы пишете простые сокращения и просто нажимаете Tab или Ctrl + E или любое другое поддерживаемое сочетание клавиш, и Эммет разворачивает простые сокращения в сложные фрагменты кода HTML и CSS.Эммет значительно ускорит ваш рабочий процесс HTML и CSS.

Если вы делаете много HTML-шаблонов с навигационными панелями, таблицами и / или многоколоночными макетами, вы найдете Эммета чрезвычайно полезным. Как только вы привыкнете к синтаксису Emmet, он изменит ваш способ создания веб-страниц. Уверяю вас, вы полюбите Эммета, когда будете использовать его в своем рабочем процессе. Эммет вполне может изменить ваш способ написания кода HTML и CSS.

Вы можете установить Emmet как плагин, доступный для многих популярных текстовых редакторов.Ниже я перечислил некоторые редакторы кода, поддерживающие Emmet. Документация по установке и использованию Emmet в каждом из этих текстовых редакторов доступна в Интернете.

Вы можете просмотреть полный список поддерживаемых текстовых редакторов на http://emmet.io/download/

Многие популярные онлайн-сервисы поддерживают Эммета. Это означает, что вы можете писать код быстрее, где бы вы ни находились. Вот несколько сервисов, которые поддерживают Эммет.

Зачем нужен Эммет?

Ответ прост: ускорить рабочий процесс кодирования.Emmet позволяет писать молниеносный код. Простые сокращения, подобные CSS, превращаются в сложный код. Вы можете легко сгенерировать текст lorem ipsum, использовать множество сочетаний клавиш и многое другое.

Как работает Эммет?

Emmet использует синтаксис селектора, подобный CSS. Вы пишете сокращения, подобные CSS, помещаете курсор в конец аббревиатуры и затем нажимаете Tab , Ctrl + E или любую другую клавишу клавиатуры, настроенную для преобразования аббревиатур в фактический код HTML.Эммет заменяет на на . Вы также можете указать значения, но если вы не укажете значения, создаст с позициями табуляции внутри каждого пустого атрибута. Вы можете вставить целевой URL и нажать Tab, чтобы перейти к следующей точке редактирования, где вы можете вставить следующее желаемое значение.

Посмотрим еще на один пример. Если вы напишете

  div # header> h2.logo> a {site Name}  

У вас будет следующий код:

    

Развернуть функцию сокращения

Вот список некоторых поддерживаемых операторов.


Элемент: ( Div , p , span )
Введите имя элемента и нажмите Tab, чтобы развернуть.
div будет расширен до

.


Элемент с идентификатором ( div # header , E # id )
# используется для применения идентификаторов к любому элементу.

Элемент с классом (раздел. Контейнер, боковая панель)
. используется для применения классов к любому элементу.

Дочерний элемент div.header> div.main> .post
> используется для создания дочерних элементов.

Близкие элементы E + N (h2 + h3)
Знак + используется для создания родственных элементов.

Множество элементов li * 5
* символ создаст определенные множественные числа любого элемента., вы можете подняться на один уровень вверх по дереву и изменить контекст, в котором должны появиться следующие элементы:
Группировка: ()
{} Круглые скобки могут использоваться для группировки поддеревьев в сложные сокращения.
Добавление текста {}: E {text}
{} используется для добавления текста к элементу.

Эммет также предлагает еще несколько замечательных функций, о которых я подробно расскажу позже.

Сокращения CSS

Хотя сокращения Emmet хороши для создания HTML, XML или любой другой структурированной разметки, они также очень полезны для CSS.Эммет предоставляет вам сокращение для свойств CSS. Для синтаксиса CSS у Emmet есть много предопределенных фрагментов для свойств. вы можете расширить аббревиатуру bd , чтобы получить границу :; сниппет и br для border-right:; . Вы также можете указать значение для этого свойства. Просто введите bl: 10 для border-left: 10px; .

Если вы хотите указать несколько значений, используйте дефис для их разделения: m10-20 расширяется до margin: 10px 20px; .Чтобы указать отрицательные значения, поставьте перед первым значением дефис, а всем остальным - двойной дефис: m-10-20 расширяется до margin: -10px -20px;

Действия и сочетания клавиш

Emmet предлагает множество полезных и экономящих время действий и сочетаний клавиш. Emmet предлагает уникальные инструменты, которые могут значительно улучшить ваш опыт редактирования, и очень полезны, когда вам нужно отредактировать код HTML и CSS, чтобы исправить ошибки и добавить новые функции.Некоторые действия Эммета полезны для редактирования существующего HTML-кода, например, функция Перенос с аббревиатурой . С помощью этой функции вы можете заключить элементы навигации в меню навигации.

Некоторые другие доступные действия включают:

  • Раскрыть сокращенное обозначение
  • Сопоставление пары тегов
  • Перейти к соответствующей паре
  • Перейти к точке редактирования
  • Обновить размер изображения

Мы узнаем обо всех этих и многом другом в следующих частях 2, 3 и 4 этой серии.

8 советов Эммета, о которых вы могли не знать - Scotch.io

Emmet (кто помнит, когда он назывался Zen Coding?) - очень полезный инструмент для редактирования кода, который содержит фрагменты и расширенные ярлыки для создания HTML / разметки и даже CSS.

Сэкономьте массу времени в повседневном рабочем процессе, изучив синтаксис Emmet. Также помните, что все эти примеры будут в простых файлах HTML, но вы также можете настроить Emmet для использования с React / JSX, шаблонами Angular, шаблонами Vue и т. Д.

Чтобы дать вам быстрый пример основного использования Эммета, расширение аббревиатуры до полного HTML.

Мы будем вводить следующее и нажимать вкладку , чтобы развернуть ее:

  section.hero.is-info> .hero-body> .container> h2.title {Привет!}  

Следующее будет расширено до:

  <раздел>
  

Здравствуйте!

Emmet можно найти уже установленным по умолчанию в большинстве редакторов, включая Sublime Text, VS Code и WebStorm.Чтобы узнать больше об Эммете, посетите:

Давайте углубимся в некоторые менее известные особенности Эммета. О, и прежде чем мы перейдем к этому, вот некоторая информация о моей настройке:

Используя () , мы можем сгруппировать код вместе. Это хорошо работает с родственным оператором + .

Допустим, мы хотим, чтобы две div располагались рядом друг с другом, и у каждой были свои дочерние элементы. Обратите внимание, что мы будем использовать классы Bulma CSS.

Начать с JavaScript
бесплатно!

Дополнительная литература : Узнайте, почему Bulma - мой любимый фреймворк CSS на данный момент

 ..column> .box> h4 {Box}  
  

Коробка

Коробка

Я предпочитаю группировку.

Когда я создаю образец HTML, часто бывает полезно использовать нумерацию для различения разделов. (Раздел 1, Раздел 2 и т. Д.).

Эммет также может помочь нам с нумерацией, используя $ .На днях я написал об этом в Твиттере, и это побудило меня написать этот пост!

  p> strong {Я на уровне $ strong !!!!} * 10  
  

У меня сильный 1 уровень !!!! Я сильный 2 уровня !!!! У меня уровень 3 !!!! Я сильный 4 уровня !!!! У меня 5 уровень !!!! У меня 6 уровень !!!! У меня 7 уровень !!!! У меня 8 уровень !!!! У меня 9 уровень !!!! У меня 10 уровень !!!!

Это то, что мне действительно нужно больше использовать в моем рабочем процессе.Набирать некоторые HTML-теги становится утомительно.

Я внесу это в список, так как есть так много имен. Обязательно ознакомьтесь со шпаргалкой Эммета в разделе HTML, чтобы увидеть все это.

  • ! : Полная HTML-страница
  • a :
  • base :
  • ссылка: css :
  • скрипт: src :
  • ввод: текст :
  • ввод: t :

Используя [] , мы можем добавлять атрибуты в наш HTML.Например,

  input [type = email] .my-input  

станет:

    

Вот классная с использованием атрибутов данных и нумерации:

  div [data-item = $] * 10  
  

Это тот, о котором я недавно узнал, и я super рад добавить его в свой ежедневный набор инструментов.

Выберите любой код и заключите его в нужные теги. Для этого потребуется немного больше работы, и вам нужно будет открыть палитру команд ( cmd + shift + p ).

Инструкции для VS Code следующие:

  1. Вам нужно будет навести курсор на тег, который нужно обернуть.
  2. Откройте палитру команд с помощью ctrl / cmd + shift + p
  3. Найти Эммет: Обернуть с аббревиатурой
  4. Введите аббревиатуру Emmet, которая будет заключать ваш текущий тег

Может быть очень полезно!

Это тоже блестящая вещь, которую я недавно нашел.Вы когда-нибудь смотрели на открывающий тег HTML и задавались вопросом, где он закрывающий тег? Вы когда-нибудь хотели выделить все внутри открывающих / закрывающих тегов? Балансировка тегов спешит на помощь!

  1. Поместите курсор внутри тегов, которые хотите найти
  2. Откройте палитру команд, нажав ctrl / cmd + shift + p
  3. Выбрать Эммет: Баланс (исходящий)
  4. Сделайте это несколько раз, чтобы продолжать расширяться наружу

Помимо файлов разметки, Emmet можно использовать в CSS.Очень полезно для расширения некоторых вещей, требующих большого набора текста. Я покажу некоторые из моих часто используемых:

  • pos : позиция: относительная;
  • d : дисплей: блок;
  • м : маржа:;
  • mt : margin-top:;
  • mb : margin-bottom:;
  • pw : padding-top:;
  • пб : обивка-дно:;
  • bg : фон: # 000;
  • ! : ! Важно
  • @m : @ экран мультимедиа {}
  • c : цвет: # 000;
  • op : непрозрачность:;

Надеюсь, вы приобрели еще несколько навыков Эммета, чтобы добавить их в свой набор инструментов.Я искренне верю, что нужно потратить время на изучение имеющихся у нас инструментов, чтобы мы могли стать более эффективными разработчиками .

Сообщите мне, понравился ли вам этот пост, и мы дадим больше советов и рекомендаций, как улучшить ваш рабочий процесс.

Понравилась эта статья?

Подпишитесь на @chris__sev в Twitter

Что такое Эммет? Как пользоваться Эмметом? Объяснил Эммет гифками. | bytefish

Мы знаем, что у каждого файла HTML5 должна быть фиксированная структура, например:

  




Document


После использования Emmet вам не нужно вручную вводить эти символы, вам нужно только необходимо ввести ! в файл HTML, и VSCode напомнит вам, следует ли использовать правила Emmet для автоматического завершения.

Правило:

GIF:

В HTML теги будут выглядеть так:

 

В этом типе тегов, кроме div и span , являются основным содержимым, другие символы (например, <, > ) являются дополнительные персонажи стереотипа.

С Emmet нам не нужно вводить эти избыточные символы:

Кроме того, вы можете использовать сокращения для более длинных тегов, таких как заголовок или цитата:

 hdr ==> заголовок 
bq ==> blockquote

Мы знаем, что HTML-тег обычно имеет стили CSS. При использовании Emmet нам нужно только добавить имя класса после имени тега, чтобы автоматически добавить его:

Rules:

 div.container ==> 
span.red ==> < / span> div.row.blue ==>

GIF:

Правило:

 div # id1 ==> 
span # bytefish.blue ==>

GIF:

Если мы хотим добавить контент в тег, мы можем использовать синтаксис {} .

Правило:

GIF:

Emmet поддерживает дополнительные операции. Если мы используем + , мы можем ввести несколько тегов одновременно.

Правило:

GIF:

В CSS символ дочернего комбинатора > , и вы также можете использовать этот символ в Emmet для ввода вложенных тегов.

Правило:

nav> ul> li =>

  

GIF:

При входе вложенные теги, мы также можем вводить вместе с классом и содержимым.

Правило:

Результат:

GIF:

Предположим, мы хотим использовать Эммет для ввода такого текста сразу, тогда что нам делать?

 




Самая большая проблема в приведенном выше тексте заключается в том, что тег p имеет как вложенные теги, так и теги, расположенные рядом. дважды, что означает подняться по тегу на два уровня.

Правило:

GIF:

Многие теги необходимо повторять несколько раз, например li . Чтобы упростить ввод этих тегов партиями, Emmet позволяет нам использовать умножение.

Правило:

* означает умножение, а * 3 означает, что предыдущий тег появляется три раза.

Результат:

GIF:

GIF2:

При использовании умножения для создания тегов в пакетах нам может потребоваться использовать числа.Например:

 

  • элемент 1

  • элемент 2

  • элемент 3

  • элемент 4

  • < li> item 5
  • item 6

Итак, как нам ввести вышеуказанное?

В Emmet есть специальный символ: $. Этот символ представляет собой специальную переменную, ее начальное значение по умолчанию - 1, и оно автоматически увеличивается после каждого вхождения.

Правило:

Результат:

GIF:

GIF2:

Цифры

Если вы хотите использовать трехзначные числа, вам нужно использовать знак $ только три раза.

Правило:

Результат:

GIF:

Начальное значение

Если вы хотите установить начальное значение $ на другое значение, вы можете использовать знак @ .

Правило:

Результат:

GIF:

Когда мы пишем код, нам часто нужно заполнить некоторые бессмысленные строки, чтобы проверить эффект отображения наших HTML-страниц. Вы раньше использовали клавиатуру для случайного ввода символов?

Эммет предоставляет нам специальную команду, которая может быстро сгенерировать кучу бессмысленных строк.

Правило:

Результат:

GIF:

GIF2:

Использование Emmet для более быстрого кодирования

Использование Emmet

Чтобы получить доступ к командам Emmet, щелкните правой кнопкой мыши в редакторе, выберите Emmet, а затем выберите команду Emmet. Или используйте сочетание клавиш, назначенное команде Emmet. Если вы предпочитаете другие сочетания клавиш, у вас есть возможность редактировать привязки клавиш в Window> Preferences> General> Keys .

Доступ к командам Emmet

Сокращения

Одна из самых мощных команд Emmet - Expand Abbreviation .С Emmet вы можете использовать сокращения, которые анализируются во время выполнения, для создания структурированных блоков кода. Эти сокращения основаны на селекторах CSS, позволяющих мгновенно приступить к работе с Emmet. Сгенерированный код включает табуляторы, которые позволяют быстро перемещаться по коду с помощью клавиши Tab. Эммет работает с (X) файлами HTML, CSS, XML, XSL и JSP. Он даже предоставит вам специальные расширения CSS в разделах CSS в файлах HTML и поддержку HTML в соответствующих местах в файлах JSP.

Совет: Чтобы просмотреть шпаргалку с синтаксисом и примерами Emmet, щелкните правой кнопкой мыши в редакторе и выберите Emmet> Emmet Cheat Sheet .

Посмотрите следующую демонстрацию, чтобы увидеть сокращения Эммета в действии, а затем вы даже можете попробовать это сами.

Примеры сокращений

В файле HTML введите nav> ul> li и нажмите Ctrl + Alt + Enter. Генерируется следующий код:

Для более сложного примера введите ul> li.item $ * 5 и нажмите Ctrl + Alt + Enter. Генерируется следующий код:

  • < / li>

Вот пара примеров CSS:

  • bd: n расширяется до border: none;
  • ff: v расширяется до семейства шрифтов : Verdana, Geneva, sans-serif;

Дополнительные команды Emmet

В дополнение к команде «Развернуть аббревиатуры» есть ряд других действий, доступных в меню Emmet, которые ускоряют кодирование.

    • Числа> Увеличить число на 1 (Ctrl + Alt + Right) / Уменьшить число на 1 (Ctrl + Alt + Left)
      Увеличивает или уменьшает число на 1. Существуют дополнительные параметры для изменения числа на 10 или 0,1.
    • Баланс (внутренний) (Ctrl + 9 / Баланс (внешний) (Ctrl + 0)
      Выбирает содержимое тега и / или открывающие и закрывающие теги. Расширяется наружу / внутрь при повторении действия.
    • HTML> Перейти к Соответствующая пара (Ctrl + Alt + T)
      Переход к соответствующему открывающему или закрывающему тегу HTML.
    • HTML> Удалить тег (Ctrl + Shift + I)
      Удаляет тег в текущей позиции.
    • HTML> Тег разделения / объединения (Alt + J)
      Разделение ( ) или объединение ( ) тегов в текущем позиция.
    • Объединить линии (Ctrl + Alt + M)
      Объединяет выбранные линии в одну. Без выбора автоматически соответствует ближайшему тегу HTML.
    • Выбрать следующий элемент (Ctrl + Alt +.) / Выбрать предыдущий элемент (Ctrl + Alt +,)
      Выбирает следующие или предыдущие важные части кода HTML / CSS.
    • Переключить комментарий (Ctrl + Alt + /)
      Переключает текущую строку в / из комментария. Соответствует тегу HTML, свойству CSS или правилу при отсутствии выделения.
    • Перенести аббревиатуру (Ctrl + Alt + W)
      То же, что и действие “Развернуть аббревиатуру”, но переносит выделенное содержимое.

Интегрированная Emmet Поддержка была представлена ​​в Webclipse 2015 CI 8 (теперь CodeMix) и в MyEclipse 2015 CI 12.

Эммет | JetBrains Rider

Набор инструментов Emmet улучшает кодирование с помощью HTML, CSS и JSX. Вы можете использовать шаблоны кода Emmet, не выходя из JetBrains Rider. Чтобы развернуть шаблон в правильную разметку, введите его аббревиатуру и нажмите , вкладка . Для получения информации об изменении ярлыка см. Настройка ключа расширения аббревиатуры.

Например, в файле HTML введите table> tr * 3> td * 2 и нажмите Tab , чтобы получить заглушку таблицы 3x2:

<таблица>

JetBrains Rider поддерживает такие функции, как новый синтаксис для записи цветов RGBA, подразумеваемые атрибуты, атрибуты по умолчанию и логические атрибуты, действие «Обновить тег» и многое другое.

Включение и настройка Emmet

В JetBrains Rider вы можете использовать собственные шаблоны Emmet, а также более 200 дополнительных живых шаблонов HTML, CSS и XSL, которые перечислены в узлах Zen CSS, Zen HTML и Zen XSL в Редакторе | Страница Live Templates настроек IDE Ctrl + Alt + S .

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Эммет.

  2. На открывшейся странице Emmet выберите клавишу, с помощью которой будут разворачиваться сокращения Emmet, по умолчанию выбрана вкладка Tab .

  3. Чтобы включить или отключить Emmet на определенном языке (HTML, CSS или JSX), перейдите и установите флажок Включить Emmet. Используйте элементы управления на странице Emmet для настройки Emmet в различных языковых контекстах.

JetBrains Rider позволяет использовать и настраивать живые шаблоны Emmet или добавлять собственные шаблоны. Предположим, у вас есть запись шаблона со следующим текстом шаблона:

$ END $

Чтобы создать список записей, вам просто нужно ввести «список-записей <запись [число = $] * 5 ″ и нажать , вкладка .По умолчанию атрибут номер будет сгенерирован до типа . Чтобы настроить позицию, в которой он создается, вам необходимо добавить в шаблон переменную ATTRS , например:

$ END $

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

Используйте живые шаблоны с Emmet

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Живые шаблоны.

  2. На странице Emmet установите флажки рядом с шаблонами, которые вы хотите использовать.

  3. Когда вы выбираете шаблон в списке, фокус перемещается в область текста шаблона, где в полях отображаются настройки выбранного шаблона.

  4. В поле Текст шаблона добавьте требуемый текст и переменные в тело шаблона.

  5. Нажмите кнопку «Изменить переменные». В открывшемся диалоговом окне «Редактировать переменные шаблона» укажите значения переменных по умолчанию в поле «Значение по умолчанию» и установите флажок «Пропустить, если определено», если необходимо.

Настройте клавишу расширения аббревиатуры

По умолчанию собственные сокращения Emmet и дополнительные живые шаблоны расширяются при нажатии вкладки . Для дополнительных живых шаблонов JetBrains Rider позволяет повторно определить ключ раскрытия по умолчанию. Обратите внимание, что этот пользовательский параметр не отменяет настройку по умолчанию для встроенной поддержки Emmet; вы просто получите возможность развернуть шаблон с помощью любого из этих ключей.

Настройте клавишу расширения для собственных сокращений Emmet

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выберите Editor | Эммет.

  2. На открывшейся странице Emmet выберите новый ключ расширения вместо Tab по умолчанию из списка Расширить аббревиатуру с помощью.

Настройте ключи расширения для шаблонов Emmet live

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Живые шаблоны.

  2. На открывшейся странице «Другие языки» разверните группу шаблонов Zen HTML, Zen CSS или Zen XSL и выберите нужный шаблон.Фокус переместится в область текста шаблона.

  3. В списке «Развернуть с помощью» выберите ключ для развертывания шаблона.

Окружите блок кода шаблоном Emmet

  1. В редакторе выберите блок кода, который нужно окружить, и нажмите Ctrl + Alt + J или выберите в главном меню.

  2. Из списка выберите Emmet:

  3. Введите используемое сокращение Emmet и нажмите . Введите .

    Обратите внимание на список справа. Щелкните стрелку вниз, чтобы просмотреть историю недавно примененных живых шаблонов Emmet:

    Также обратите внимание на цветовую индикацию. Если вы введете допустимое сокращение Emmet, фон станет зеленым. Однако при вводе несуществующего сокращения фон становится красным:

В HTML и XML вы можете перемещаться между точками редактирования, то есть между теми точками кода, где применимы шаблоны Emmet.

  • Чтобы переместить курсор в предыдущую точку редактирования, выберите или нажмите Alt + Shift + [.

  • Чтобы переместить курсор в следующую точку редактирования, выберите или нажмите Alt + Shift +] .

Последнее изменение: 23 сентября 2021 г.

Эммет | PyCharm

Набор инструментов Emmet улучшает кодирование с помощью HTML, CSS и JSX. Вы можете использовать шаблоны кода Emmet, не выходя из PyCharm. Чтобы развернуть шаблон в правильную разметку, введите его аббревиатуру и нажмите , вкладка . Для получения информации об изменении ярлыка см. Настройка ключа расширения аббревиатуры.

Например, в файле HTML введите table> tr * 3> td * 2 и нажмите Tab , чтобы получить заглушку таблицы 3x2:

<таблица>

PyCharm поддерживает такие функции, как новый синтаксис для записи цветов RGBA, подразумеваемые атрибуты, атрибуты по умолчанию и логические атрибуты, действие «Обновить тег» и многое другое.

Включение и настройка Emmet

С PyCharm вы можете использовать собственные шаблоны Emmet, а также более 200 дополнительных живых шаблонов HTML, CSS и XSL, которые перечислены в узлах Zen CSS, Zen HTML и Zen XSL в Редакторе | Страница Live Templates настроек IDE Ctrl + Alt + S .

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Эммет.
  2. На открывшейся странице Emmet выберите клавишу, с помощью которой будут разворачиваться аббревиатуры Emmet, по умолчанию выбрана вкладка .

  3. Чтобы включить или отключить Emmet на определенном языке (HTML, CSS или JSX), перейдите и установите флажок Включить Emmet. Используйте элементы управления на странице Emmet для настройки Emmet в различных языковых контекстах.

PyCharm позволяет использовать и настраивать живые шаблоны Emmet или добавлять собственные шаблоны. Предположим, у вас есть запись шаблона со следующим текстом шаблона:

$ END $

Чтобы создать список записей, вам просто нужно ввести «список-записей <запись [число = $] * 5 ″ и нажать , вкладка .По умолчанию атрибут номер будет сгенерирован до типа . Чтобы настроить позицию, в которой он создается, вам необходимо добавить в шаблон переменную ATTRS , например:

$ END $

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

Используйте живые шаблоны с Emmet

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Живые шаблоны.
  2. На странице Emmet установите флажки рядом с шаблонами, которые вы хотите использовать.

  3. Когда вы выбираете шаблон в списке, фокус перемещается в область текста шаблона, где в полях отображаются настройки выбранного шаблона.

  4. В поле Текст шаблона добавьте требуемый текст и переменные в тело шаблона.

  5. Нажмите кнопку «Изменить переменные». В открывшемся диалоговом окне «Редактировать переменные шаблона» укажите значения переменных по умолчанию в поле «Значение по умолчанию» и установите флажок «Пропустить, если определено», если необходимо.

Настройте клавишу расширения аббревиатуры

По умолчанию собственные сокращения Emmet и дополнительные живые шаблоны расширяются при нажатии Вкладка . Для дополнительных живых шаблонов PyCharm позволяет повторно определить ключ раскрытия по умолчанию. Обратите внимание, что этот пользовательский параметр не отменяет настройку по умолчанию для встроенной поддержки Emmet; вы просто получите возможность развернуть шаблон с помощью любого из этих ключей.

Настройте клавишу расширения для собственных сокращений Emmet

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выберите Editor | Эммет.
  2. На открывшейся странице Emmet выберите новую клавишу раскрытия вместо стандартной Вкладка из списка Расширить аббревиатуру с помощью.

Настроить ключи расширения для живых шаблонов Emmet

  1. Нажмите Ctrl + Alt + S , чтобы открыть настройки IDE и выбрать Editor | Живые шаблоны.
  2. На открывшейся странице «Живые шаблоны» разверните группу шаблонов Zen HTML, Zen CSS или Zen XSL и выберите нужный шаблон. Фокус переместится в область текста шаблона.

  3. В списке «Развернуть с помощью» выберите ключ для развертывания шаблона.

Окружите блок кода шаблоном Emmet

  1. В редакторе выберите блок кода, который нужно окружить, и нажмите Ctrl + Alt + J или выберите в главном меню.

  2. Из списка выберите Emmet:

  3. Введите используемое сокращение Emmet и нажмите Введите .

    Обратите внимание на список справа.Щелкните стрелку вниз, чтобы просмотреть историю недавно примененных живых шаблонов Emmet:

    Также обратите внимание на цветовую индикацию. Если вы введете допустимое сокращение Emmet, фон станет зеленым. Однако при вводе несуществующего сокращения фон становится красным:

В HTML и XML вы можете перемещаться между точками редактирования, то есть между теми точками кода, где применимы шаблоны Emmet.

  • Чтобы переместить курсор в предыдущую точку редактирования, выберите или нажмите Alt + Shift + [.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *