PhpStorm — Создание темплейта на примере bootstrap

phpStorm live templates emmet

PhpStorm позволяет создавать свои собственные темплейты (Live templates), которые нацелены на то , чтобы упростить работу разработчику. Я думаю что многие уже знакомы со встроенным emmet в phpStorm и многие уже опробовали всю его мощь.

Но что делать, если встроенных команд недостаточно?
Что если хочется создавать свои собственные команды и успешно применять их в работе?

Специально для этого урока за основу был взят css фреймворк bootstrap.

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

В качестве темплейта будет выступать основная bootstrap разметка в которой подключены по CDN bootstrap.min.css, botstrap.min.js, а также jquery.

Вы можете взять и скопировать данный код или перейти на официальный сайт bootstrap в раздел get started.

Итак приступим! Копируем код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Далее запускаем phpStorm и переходим по пути file -> settings -> live templates -> Zen html.

phpStorm live templates emmet

В разделе Zen HTML нам необходимо создать новый темплейт. Выделите основную категорию и нажмите на + -> live template.

Abbreviation: Здесь задаем ключевую команду на вызов темплейта. В нашем случае это bootstrap.
Description: Здесь пишем описание, чтобы в будущем мы смогли понять за что отвечает данная команда.
Template text: Здесь мы вставляем всю bootstrap разметку (Весь код)

Кликаем по ссылке Define и ставим галочку напротив html. Применяем настройки и пробуем что у нас получилось! Для этого в html документе пропишите ключевую команду bootstrap и нажмите клавишу tab.

phpStorm live templates emmet

Отлично! Теперь вы без проблем можете создавать свои темплейты, а также редактировать уже существующие!

Читайте также:

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

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