В статье хотел бы описать небольшую настройку, которую можно произвести в WebStorm для более удобного использования ее в совокупности с Jekyll. На самом деле тут может быть и другая IDE от JetBrains, принципы настройки достаточно общие, и их можно использовать как своего рода шаблон для кастомизации других операций.
Разбираться будем на примере того, как более удобно работать со статьями Jekyll в WebStorm.
При необходимости установить плагин Markdown
По-умолчанию плагина для работы с этим языком разметки в платформе нет. Если вы используете Markdown в качестве языка для своих статей, то этот плагин будет полезен.
Установка плагина не вызывает никаких трудностей.
- Заходим в настройки
- через поиск быстро находим строку
Plugins - далее в открывшейся вкладке выбираем
Browse repositories... - затем еще пользуемся поиском по ключевому слову “markdown” и выбираем плагины для установки. На данный момент я видел 2 плагина, один платный.
В качестве альтернативного варианта установки плагина можно поступить следующим образом.
- Создаем файл с разрешением .md
- Открываем его для редактирования
- IDE сама предложит нам установить плагин для удобства работы с markdown. Данное сообщение будет находится в правом верхнем углу окна редактора.
Создание шаблона новых статей
Подобный подход в настройке можно применить и к другим типам файлов. Результатом подобной настройки будет по сути шаблон нового файла, который потом будем неоднократно использовать при создании новых подобных файлов. Далее поясню, о чем именно идет речь.
Если вы находитесь в окне редактора и редактируете какой-то текст, то после нажатия сочетания клавиш Alt + Insert или Cmd + N появится диалоговое окно с созданием нового файла. (Новый файл будет добавлен в ту же директорию рядом с файлом, которые в данный момент вы редактируете). Также это окно можно вызвать кликнув ПКМ где-нибудь в дереве проекта.
В данном случае у меня уже есть пункт с созданием статьи в Jekyll, который получится чуть позднее.
Главной задачей, с которой помогает справляться данный шаблон - это автоматическое создание YAML шапки для нашей статьи. Напомню как она выглядит применительно к данному моему посту.
---
title: Использование WebStorm для работы с Jekyll
date: 2016-09-16 11:30+0300
description: первоначальная настройка webstorm для удобной работы и написания постов на jekyll
category: разработка
tags: [jekyll, webstorm]
---Чтобы эту шапку всегда держать в единообразном исполнении, а также автоматизировать заполнение поля даты, например, имеет смысл создать шаблон для наших статей. В диалоговом окне о создании нового элемента выбираем внизу строчку Edit File Temlates.... Также можно найти это меню через глобальные настройки IDE.
В появившемся окне с шаблонами новых файлов добавляем новый шаблон. Прописываем свое название и разрешение файла .md. В качестве основного содержимого помещаем туда код, как на рисунке.
Теперь при создании новой статьи будет появляться вот такое диалоговое окно.
Рабочую логику, думаю, понять не сложно. При этом поле с датой заполняется автоматически, так как в шаблоне используем глобальные переменные, предоставленные самой IDE.
Не забываем писать File name в правильном формате yyyy-mm-dd-some-post-title, здесь автоматизировать процесс пока не удается.
Таким образом, после заполнения всех полей нашего диалогового окна будет создана статья с YAML шапкой указанной выше.
Создание live templates
Писать создание живых шаблонов считаю неправильно, а как-то короче на русский язык и содержательно я это не переведу - поэтому создание live templates. Тем более сразу понятно, что надо искать в настройках. По своей сути это тоже шаблоны, возможно, им подойдет название “шаблоны аббревиатур”, но писать такое в заголовке - это страшно:)
Итак вот перед нами окно с настройками live templates.
В нем можно покопаться и быстро понять что к чему. Суть коротко: набираешь пару/несколько символов, жмешь кноку, чтобы развернуть эту набранную аббревиатуру. Кто пользуется emmet и прочим чудом, все уже понимает.
Задача в рамка статей на Jekyll - создать группу шаблонов Markdown и добавить несколько часто используемых шаблонов. Например, шаблон с ссылкой на внешний источник, шаблон для вставки блока кода, шаблон для вставки изображения и прочее.
На скриншоте выше как раз показан вариант добавления аббревиатуры hl для вставки блока кода. Через симфолы $ с обеих сторон обозначаются переменные. Переменная $END$ определяет последнее положение курсора после развертывания аббревиатуры. Другие кастомные переменные можно редактировать с помощью Edit variables.
Таким образом после набора аббревиатуры hl нажмаем Tab и получает в развернутом виде:
Перемещение по всем объявленным переменным осуществляется также с помощью Tab.
Подобным образом для себя можно создать массу удобных аббревиатур, которые потом позволяют экономить время при написании статей.