Содержание
Генерация 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.
Терминал
Я использую командную строку по нескольким причинам:
- Существует множество консольных инструментов, которые удобнее (и развиваются быстрее) инструментов с графическим интерфейсом и при этом бесплатны. В отрыве от вёрстки/фронтенда, к примеру, инструмент для скачивания видео с youtube, в одну команду сохраняющий видео (с он-лайн сервисами это менее удобно).
- Можно писать собственные инструменты на Javascript. Например, генератор файловой структуры новых блоков в проекте.
- В моей работе много задач (часто — рутинных, типа сборки спрайтов), которые могут быть автоматизированы консольными утилитами. Вся автоматизация проекта у меня работает на Gulp, а у него лишь консольный интерфейс.
- Некоторые файловые операции быстрее делать из терминала.
- Git имеет консольный интерфейс (все GUI для Git — лишь надстройки над командами в терминале).
Можно воображать себя хакером.
Для студентов с 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