Установка emmet для sublime text 3: Установка Sublime Text 3 и плагина Emmet.

sublime text 3 настройка

Рассмотрим настройку sublime text 3 для frontend разработки.

Для начала скачаем программу с официального сайта.

Далее запускаем установщик.

После запускаем программу и приступаем к настройке.

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

Первым делам добавляем пакеты.

Нажимаем ctrl+shift+p откроется табличка пишем слово install и выбираем пункт Install Package.

Установка emmet

Вторым делом устанавливаем emmet.

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

Зажимаем ctrl+shift+p заходим в install packege и прописываем emmet, плагин появится ниже устанавливаем.

Продолжаем настройку sublime text 3.

Создаем на рабочем столе файл index.html и открываем его с помощью sublime text.

Пишем восклицательный знак, нажимаем клавишу tab.

Мы увидим, что отработает плагин emmet и появится структура нового документа.

Увеличим шрифт, путем зажатия shift+колесеко мышки.

Создадим div. Пишем .div и tab.

Внутри дива пишем ul>li*5, нажимаем клавишу tab получается структура.

Если у нас собьются в строках li или div, то чтобы их выравнять нажмем горячую клавишу функции reindent.

Клавишу зададим в пункте меню preferebces — key bind

{ «keys»: [«ctrl+shift+f»], «command»: «reindent» },

Пробуем выравнять.

Следующий пакет это AutoFileName.

Этот пакет в sublime text позволит быстро прописать путь до файлов.

При вводе путя быдет высвечиваться подсказка с выбором папки или файла.

Установим sass.

Без плагина sass не будет работать emmet в файлах sass.

Основная работа будет с препроцессором sass.

Установим внешнее оформление для sublime text.

1. Установим OneDarkMaterial-Theme это тема.
2. Установим цветовую схему OneDarkColor-Schema.

Настройка sublime text

Для рабочего места используем заранее созданную конфигурацию.

Открываем Preferences – Settings.

Откроется окно настроек программы.

Копируем код внизу и вставляем в правую часть экрана, сохраняем.

{
«auto_complete»: true,
«bold_folder_labels»: true,
«color_scheme»: «Packages/One Dark Material — Theme/schemes/OneDark.tmTheme»,
«fold_buttons»: false,
«font_size»: 12,
«highlight_line»: true,
«indent_guide_options»:
[
«draw_normal»,
«draw_active»
],
«line_padding_bottom»: 2,
«line_padding_top»: 2,
«margin»: 2,
«material_theme_compact_panel»: true,
«material_theme_compact_sidebar»: true,
«material_theme_small_statusbar»: true,
«material_theme_small_tab»: true,
«show_definitions»: false,
«tab_size»: 2,
«theme»: «OneDarkMaterial.sublime-theme»,
«word_wrap»: «false»
}

• auto_complete: true, лучше использовать поначалу включенным, это свойство помогает дополнять код в процессе верстки.
• bold_folder_labels: true эта настройка делаем папки побольше когда они помещены сбоку программы.
• fold_buttons: false отключаем кнопки раскрытия и закрытия кода.
• Чтобы подсветить всю строку используем highlight_line: true.
• За расстояния между строками отвечает свойство line_padding_bottom: 2.
• tab_size: 2 размер табов в коде.
• Чтобы строки, которые уходят за границы не переносились на новые выставим word_wrap: false.

Отключаем миникрату сбоку view – hideminimap.

Чтобы убрать или вытащить верхнее меню в sublime text нажимаем клавишу Alt.

Удобная среда для HTML верски [sublime, emmet, livereload]

Сегодня хочу покзать вам, как можно настроить пожалуй лучшее решение для верстальщиков, в Ubuntu. Точнее не решение — а в какой то степени комплекс ПО состоящий из редактора Sublime, дополнения к нему — emmet, позволяющее многократно ускорить ввод html тегов, расширения для браузера и программы которые будут обновлять страницу автоматически при каждом сохранении файла css или html — LiveReload.

Для начала установим редактор sublime:

wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
sudo apt-get install apt-transport-https
echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
sudo apt update
sudo apt install sublime-text

Запускаем sublime:

subl

Идем в tools — install package control

После чего — tools — command pallette…

Тут набираем или находим package control: install package

в новом открышемся окне находим emmet и жмем по нему.

Ждем пока скачается дополнение и перезапускаем sublime.

Для проверки работоспособности emmet создаем файл с рашриение html  набираем ! И жмем клавишу tab. Должен будет подставится шаблон.

Теперь займемся установкой LiveReload, что бы сохраненные изменения в наших файлах отображались автоматически, без каких либо действий в браузере. Покажу на примере браузера Chrome.

Устанавливаем расширение ]]>LiveReload]]> и идем в ]]>менеджер расширений. ]]>Находим установленное расширение и ставим галочку Разрешить открывать локальные файлы.

Перезапускаем браузер.

После чего нам нужно установить guard-livereload:

sudo apt install ruby-dev
sudo gem install rdoc -V
sudo gem install guard -V
sudo gem install guard-livereload -V

Идем в папку, где распологается наш проект и выполняем команду:

guard init

В текущей папке будет создан файл с именемм Guardfile, отредактируем в нем строчку:

watch(%r{public/.+\.(#{compiled_exts * ‘|’})})

Уберем из нее public/

В итоге сточка должна быть такая:

watch(%r{.+\.(#{compiled_exts * ‘|’})})

Весь файл Guardfile:

guard ‘livereload’ do
  extensions = {
    css: :css,
    scss: :css,
    sass: :css,
    js: :js,
    coffee: :js,
    html: :html,
    png: :png,
    gif: :gif,
    jpg: :jpg,
    jpeg: :jpeg,
    # less: :less, # uncomment if you want LESS stylesheets done in browser
  }

  rails_view_exts = %w(erb haml slim)

  # file types LiveReload may optimize refresh for
  compiled_exts = extensions..]+) # path+base without extension
           (?<ext>\.#{ext})) # matching extension (must be first encountered)
          (?:\.\w+|$) # other extensions
          }x) do |m|
      path = m[1]
      «/assets/#{path}.#{type}»
    end
  end

  # file needing a full reload of the page anyway
  watch(%r{app/views/.+\.(#{rails_view_exts * ‘|’})$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{config/locales/.+\.yml})
end

Теперь запускаем «мониторинг»:

guard

Осталось только нажать на кнопку LiveReload в браузере на открытой вкладке с редактируемой страницей.

В консоли будет выведена инофрмация, что браузер подключен.

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

И последняя в этой заметке возможность, о которой хочу рассказать, которая так же заметно упрощает жизнь — возможность автосохрания в sublime.

Для включения этой возможности идем в tools-command pallete, вводим install, выбираем package control: install package.

В новом окне набираем Auto Save и устанавливаем одноименное расширенние.

После его установки идем в prefferences — key bindings, и в окне user добавляем строчку:

{ «keys»: [«ctrl+shift+s»], «command»: «auto_save» }

Соответсвенно ctrl+shift+s можно заменить на любую другую комбинацию клавиш. Она используется для включения автосохранения, которое по умолчанию выключено.

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

Для ОС Windows — все вышесказанное будет отличаться незначительно, только установкой sublime и клиенсткой программы LiveReload. Соответсвенно sublime можно ]]>скачать тут]]>, а LiveReload — ]]>тут]]>, в секции Downloads.

Sublime Text 2/3 — плагины

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

Проще всего устанавливать плагины в Sublime Text 2 при помощи менеджера пакетов под названием Package Control. Как установить Package Control в Sublime и как его использовать — я подробно расписал в одной из прошлых статей.

Update-2017

Тот же набор плагинов актуален и для Sublime Text 3.

В этой же статье я сделаю небольшой обзор некоторых полезных плагинов для Sublime Text 2, которые я сам использую в своей работе и советую использовать вам. Естественно, рассматриваемые здесь плагины — это только капля в море, есть множество полезных плагинов, не упомянутых в этой статье. К тому же, я не считаю себя программистом и не рассматриваю плагины, предназначенные для суровых кодеров, а подхожу к вопросу с точки зрения верстальщика. Впрочем, многие из рассматриваемых плагинов могут быть одинаково полезны как программистам, так и верстальщикам.

Исходя из всего вышеизложенного, я призываю вас: если вдруг вы не нашли в Sublime какого-то полезного для себя функционала — обязательно поищите среди доступных плагинов, велика вероятность, что необходимый вам функционал реализован с их помощью.

Ну а теперь перехожу непосредственно к обзорам.

Плагины Zen Coding и Emmet для Sublime Text 2

И начнем мы с одного из самых популярных плагинов — Zen Coding (устаревший) и Emmet (сегодняшнее название для Zen Coding). Zen Coding / Emmet — это набор инструментов для текстовых редакторов (не только для Sublime), который позволяет очень значительно ускорить написание html и css кода. В первую очередь речь идет о подобии сниппетов, но не только о них. В отличие от стандартных сниппетов, при помощи Zen Coding (либо Emmet) вы можете создавать довольно сложные конструкции кода. Например, сокращение типа ul>li*8 будет развернуто в ненумерованный список (стандартный тег ul) с 8 пунктами. И это самый простой пример, конструкции могут быть гораздо более сложными.

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

Установить плагин Zen Coding можно буквально за несколько секунд при помощи Package Control. Нажмите комбинацию Ctrl+Shift+P и в появившейся панели наберите слово install, после чего выберите появившийся пункт Package Control: Install Package. В появившейся после этого панельке наберите zencoding и нажмите Enter. Вуаля — плагин установлен.

Но Zen Coding на сегодняшний день не развивается, новые версии носят название Emmet. Не так давно этот тулкит имел нестабильный статус, но на сегодняшний день его вполне можно использовать (я использую именно Emmet). Соответствующий плагин в Sublime ставится тем же способом (см. предыдущий абзац), только при поиске естественно нужно набирать emmet.

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

Для создания вложенных тегов используется символ >, для тегов на текущем уровне — символ +, а для многократного повторения какого-то тега используется символ *. После названия тега можно указывать название класса (отделив его точкой) или id (отделив его символом #). Например, конструкция вида:

div#page>div.logo+ul#navigation>li*5>a

… будет развернута до вида:

<div>
    <div></div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Последовательность символов в сокращении обязательно не должна содержать пробелов, а курсор должен находиться в ее конце в момент разворачивания. Кстати говоря, разворачивание в Sublime производится нажатием клавиши Tab, либо же комбинацией Ctrl+E.

При желании можно задавать тегу a значение атрибута href, также любому «двойному» тегу можно задать его содержимое в фигурных скобках. В сложных конструкциях можно использовать скобки (например, для выхода на более высокие уровни в иерархии тегов). Вот пример подобного использования:

(ul>li*4>a[href=#]{Текст ссылки})+div

Подобная конструкция будет развернута до вида:

<ul>
    <li><a href="#">Текст ссылки</a></li>
    <li><a href="#">Текст ссылки</a></li>
    <li><a href="#">Текст ссылки</a></li>
    <li><a href="#">Текст ссылки</a></li>
</ul>
<div></div>

Маленькая хитрость

В Sublime Text 2 можно легко оборачивать выделенный текст в скобки или кавычки, просто нажав клавишу для создания открывающей скобки или кавычки. Закрывающая при этом будет создана автоматически.

Для быстрого переключения между редактируемыми точками используются клавиши курсора ← и → с одновременно зажатыми клавишами Ctrl+Alt. Можете поэкспериментировать и попереключаться между редактируемыми точками в примере выше, чтобы точнее понимать, о чем идет речь.

Zen Coding позволяет не указывать название для тега div, а указывать только класс или id. В этом случае автоматически подразумевается, что имеется ввиду div. Например, конструкция такого вида:

.container<#header+#main

… аналогична такой конструкции:

div.container<div#header+div#main

… и будет автоматически развернута до такого вида:

<div>
    <div></div>
    <div></div>
</div>

Подобным же образом можно работать не только с HTML, но и с CSS-кодом, используя соответствующие сокращения для разворачивания их в полноценный CSS (тоже по нажатию на Tab).

Доступные комбинации клавиш можно посмотреть в соответствующем конфигурационном файле. В моем случае (в Ubuntu) этот файл находится по адресу ~/.config/sublime-text-2/Packages/Emmet/Default (Linux).sublime-keymap. Либо же можно заглянуть в файлик README.md в той же директории, там можно помимо основных клавиатурных комбинаций получить и много других полезных сведений.

В Emmet появились некоторые полезные фишки, которые отсутствовали в Zen Coding.

Многие сокращения в Emmet стали еще короче. Например, при работе с CSS сокращение p20 будет развернуто до padding: 20px;. Точно также сокращение m40 превратится в margin: 40px;, а w100 — в width: 50px;. Подобным образом можно задавать значения не только в пикселях. Так, сокращение w80p будет развернуто до width: 80%;. Подобным же образом можно задавать множественные значения, например m10-20 превратится в margin: 10px 20px;, а m0-auto превратится в margin: 0 auto;., который позволяет переходить на уровень (или несколько уровней) выше без использования скобок.

Функционал Emmet (как впрочем и Zen Coding) не ограничивается только разворачиванием сокращений. Есть также множество других полезных действий. Например, если поставить курсор в любое место тега img и нажать комбинацию Ctrl+U, то для заданного изображения будут автоматически подсчитаны и проставлены параметры width и height. Также вы можете приятно удивиться, если в css файле поставите курсор на адрес изображения и нажмете комбинацию Ctrl+'. Подобных фишек довольно много, все их я перечислить в рамках одной статьи не смогу, поэтому очень рекомендую заглянуть на официальный сайт проекта Emmet за более детальной документацией.

Плагин AdvancedNewFile для Sublime Text 2

Стандартный способ создания нового файла состоит (внезапно) из собственно создания (Ctrl+N) и последующего его сохранения (Ctrl+S). При этом на втором этапе открывается стандартное системное диалоговое окошко, в котором нужно выбрать папку и задать имя для нового файла.

Однако всю вышеописанную процедуру можно значительно упростить, используя плагин AdvancedNewFile. Установить плагин можно как обычно через Package Control: Ctrl+Shift+P → install → AdvancedNewFile → Enter.

Плагин установлен и готов к использованию. Теперь достаточно нажать комбинацию Super+Alt+N, после чего в нижней части окошка Sublime появится небольшая панелька. В этой панели достаточно ввести путь к новому файлу (обычно относительно корневой папки текущего проекта) и нажать Enter — и новый файл сохранен.

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

Если вы кликните правой кнопкой мыши по какому-то элементу на боковой панели (в дереве файлов), то обнаружите, что появляющееся при этом контекстное меню довольно скромное. Функционал этого меню можно значительно расширить, установив (опять же через Package Control) плагин SideBarEnhancements, после чего контекстное меню станет значительно богаче:

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

Плагин PlainTasks для Sublime Text 2

PlainTasks — это необычный плагин для Sublime, который позволяет использовать редактор еще и в качестве простенького менеджера задач (todo-листа).

И несмотря на то, что для формирования списка задач я использую замечательную программу GTG, я все же нашел для себя полезной возможность делать простые списки задач прямо в Sublime.

После установки плагина PlainTasks в командной панели (вызываемой по Ctrl+Shift+P) при вводе слова tasks появляется новый пункт, позволяющий создать новый список задач:

При выборе этого пункта в Sublime открывается новая вкладка с характерным желтым фоном. Теперь мы можем начать формировать свой список задач. При этом у нас имеется свой синтаксис и возможность использовать горячие клавиши, а при сохранении файла ему автоматически дается расширение *.TODO.

Если в конце строки стоит двоеточие, то такая строка автоматически считается заголовком последующего списка и подсвечивается красным цветом. Если теперь с новой строки набрать название новой задачи и нажать Ctrl+Enter, то пункт будет автоматически отформатирован (слева появится пустой квадратик). В качестве альтернативного способа создания новой задачи в списке можно использовать комбинацию Ctrl+I, при этом курсор должен находиться на предшествующем новой задаче пункте или в начале новой строки.

В рамках одного файла может быть сразу несколько списков задач. Причем при желании эти списки можно разделять сепаратором, для этого достаточно два раза ввести символ - и нажать клавишу Tab. Есть возможность назначать задачам теги (они должны начинаться символом @).

Задачи можно помечать как выполненные, установив на нужную задачу курсор и нажав комбинацию Ctrl+D. При этом задача помечается зеленой галочкой, подкрашивается серым цветом, автоматически помечается тегом @done, а в скобках указывается дата и время ее исполнения. Если повторно нажать комбинацию Ctrl+D, то задача возвращается к исходному виду (как другие невыполненные задачи).

Все выполненные задачи одним махом можно перенести в архив, используя комбинацию клавиш Ctrl+Shift+A.

Используя курсорные клавиши ↑ и ↓ с зажатыми Ctrl+Shift, можно перемещать вверх/вниз строку с текущей задачей (в том числе и в другой список).

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

Плагин LiveReload для Sublime Text 2

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

Правда, для использования этого плагина придется установить дополнение в браузер (имеются дополнения для Firefox, Chrome и Safari). Ну а сам плагин LiveReload для Sublime Text 2 устанавливается как обычно через Package Control (Ctrl+Shift+P → install → LiveReload).

После установки расширения на панели браузера появляется кнопка, с помощью которой можно активировать или отключать расширение LiveReload.

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

Плагин ColorHighlighter для Sublime Text 2

Плагин ColorHighlighter позволит вам видеть реальный цвет, соответствующий цветовому коду в CSS-файлах. Устанавливается плагин как обычно — через Package Control. Теперь при установке курсора на цветовой код он будет подсвечиваться соответствующим цветом.

Плагин ColorPicker для Sublime Text 2

Плагин ColorPicker позволит вам использовать системное диалоговое окно подбора цвета при правке CSS-стилей. После установки плагина (через Package Control) для появления диалогового окна достаточно нажать комбинацию Ctrl+Shift+P. После подбора цвета и нажатия на кнопку OK выбранный цвет автоматически подставится в то место, в котором был установлен курсор. Если же при этом курсор уже был установлен на каком-то цветовом коде, то при появлении диалогового окна этот цвет будет в него подставлен.

Плагин SFTP для Sublime Text 2

Плагин SFTP позволит вам прямо из Sublime передавать файлы по протоколам FTP и SFTP. После настройки соответствующих параметров при клике правой кнопкой мыши на любом файле в боковой панели в появившемся контекстном меню появится дополнительная группа пунктов, позволяющая передавать файлы на удаленный сервер.

Плагин SFTP распространяется по такой же условно-бесплатной модели, как и сам Sublime Text 2. Вы можете заплатить за его использование, а можете не платить (при этом иногда при отправке файлов на удаленный сервер плагин будет напоминать о возможной покупке).

На этом пожалуй и закончу обзор полезных плагинов для Sublime Text 2. Не забывайте, что для Sublime существует и множество других полезных плагинов, которые вы с легкостью можете установить через Package Control.

Напоследок рекомендую также взглянуть на другие мои статьи про Sublime Text 2, если вы этого еще не сделали:

Sublime Text 3 — удобный редактор кода для веб-разработчиков



Почему Sublime Text 3

В своей работе я использовал много редакторов кода, как простых, начиная от консольного редактора nano в Linux, заканчивая тяжеловесной, но очень хорошей IDE — IntelliJ IDEA от компании JetBrains, но именно Sublime Text заставил обратить на себя внимание и теперь в разработке веб-проектов в основном использую его и вот почему

1. Скорость работы

Sublime Text 3 действительно работает очень быстро даже на старом железе

2. Кроссплатформенность

Редактор Sublime Text работает в операционных системах Linix, Windows, Mac OS

3. Большое количество плагинов для различных задач

Плагины разрабатываются для Sublime Text каждый день, начиная от красивейших тем, заканчивая плагинами для Bootstrup

Установка Sublime Text 3 в Windows

Для того, чтобы установить Sublime Text 3, скачайте exe файл с официального сайта редактора.

Доступны версии для Linux, MacOS и Windows 32 и 64 битной версии. После скачивания, запустите exe файл Sublime Text 3 и следуйте инструкциям установки.

Настройка Sublime Text 3

Одна из особенностей Sublime Text 3 — это большое количество плагинов. Сегодня мы настроим несколько полезных плагинов для веб-разработчиков с помощью удобного менеджера пакетов: Package Control.

Установка плагина

Package Control

Плагин Package Сontrol позволяет устанавливать дополнения к Sublime Text 3 легким способом, а также включать и выключать дополнения и обновлять их.

Для того, чтобы установить Package Control, пройдите по ссылке: https://packagecontrol.io/installation и скопируйте python код с сайта и в Sublime Text 3 нажмите сочетании клавиш ctrl+` или View > Show Console, затем вставьте скопированный код и нажмите Enter. Немного подождите и вам выдет окно-предупреждение, что нужно перезапустить редактор Sublime Text 3 для применения изменений.

Нажмите OK и закройте редактор, а затем опять откройте. Если вы все сделали правильно, тогда Package Control вы успешно установили.

Давайте попробуем установить красивую тему к Sublime Text через Package Control.

Установка новой темы из

Package Control

Установка дополнений к редактору Sublime Text 3 через Package Control очень простая. Для того, чтобы открыть Package Control и установить новое дополнение для Sublime Text 3, нажмите Preferences — Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите название дополнения, в нашем случае это будет красивая тема под названием: spacegray.

После того, как вы установили новую тему, она станет доступна через меню: Preferences — Color Scheme — Theme Spacegray.

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

{
    «theme»: «Spacegray.sublime-theme»,
    «color_scheme»: «Packages/Theme — Spacegray/base16-ocean.dark.tmTheme»
}

После этого перезапустите редактор Sublime Text 3, если тема применится некорректно.

Установка плагина

Emmet

Плагин Emmet очень полезное дополнение, которое позволяет значительно ускорить процесс разработки сайта, в частности процесс верстки страниц.

Устанавливается легким способом, через Package Contorl:  Preferences — Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите Emmet, далее нажмите Enter.

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

Например, с помощью Emmet, мы создать шаблон div элемента с классом нажатием всего двух клавиш: точка(.) и tab:

Аналогично, для того чтобы создать шаблон элемента div, но не с классом, а id, введите # и tab и вы увидите:

В данной статье мы не будем рассматривать все возможности плагина Emmet, так как для него мы посвятим отдельную статью, а пока оставим вам ссылку на официальную документацию к плагину Emmet — http://docs.emmet.io/

Полезные плагины Sublime Text 3

В Sublime Text много полезных плагинов для работы с кодом, для работы с GIT,  с терминалом, плагин для синхронизации настроек между редакторами и прочие.

Sublimall

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

DocBlockr

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

ColorPicker

Плагин ColorPicker выполняет функцию color picker(выбор цвета). Это очень удобно, когда вы хотите подобрать цвет или посмотреть цвет в css свойствах элемента

Sublime SFTP

Sublime SFTP позволят подключаться к SSH серверу прямо из Sublime Text. Если вы ранее использовали для подключения к сайту FTP клиент, например FileZilla, теперь вы можете подключиться напрямую.

Плагинов для Sublime Text написано огромное количество и они покрывают те задачи по удобству написания кода, с которыми сталкивается разработчик. 

Выводы о Sublime Text 3

Редактор кода Sublime Text 3 имеет большие возможности и постоянно развивается. К нему пишут большое количество дополнений и цветовых тем. За счет своей кросплатформленности, вы можете смело использовать его в популярхных операционных системах.

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

В слудующих статьях мы сделаем детальный обзор новых полезных плагинов и цветовых схем к Sublime Text. Вступайте в нашу группу VK и не пропустите новые статьи.

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

Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.

Как писать сверхбыстрый HTML с помощью Sublime

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

Если вы один из тех, кто пишет много HTML и CSS, то этот пост для вас.

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

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

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

Emmet разработан и оптимизирован для веб-разработчиков, чей рабочий процесс зависит от HTML / XML и CSS, но может также использоваться с языками программирования.

В этой статье мы узнаем несколько интересных советов по быстрому написанию HTML с помощью Emmet.

В этом руководстве я использую Sublime в качестве текстового редактора, но Emmet также доступен для многих других выпусков, таких как Adobe DreamWeaver, TextMate, Eclipse и Notepad ++.

Установка Emmet

Вы можете скачать Эммет отсюда. Если вы используете Sublime text, как я, вы можете установить его прямо из установщика пакета Sublime.

Чтобы установить любой пакет Sublime, вам необходимо установить установщик пакетов. Для установки перейдите в Инструменты -> Установить управление пакетами и щелкните по нему, и он будет установлен автоматически.Когда вы снова закончите установку управления пакетами, перейдите к T ools-> command palette и найдите Install Package.
Когда вы нажмете «Установить пакет», вы увидите некоторую обработку в нижней части окна Sublime, и откроется всплывающее окно поиска.
Здесь вы можете найти любой плагин Sublime. Найдите «Эммет» и щелкните по нему, чтобы установить.

ПРИМЕЧАНИЕ. В примерах ниже для раскрытия тегов используется клавиша Tab. Большинство текстовых редакторов имеют такие же встроенные функции.

1. Базовый документ HTML

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

Вы можете сгенерировать, просто набрав! (Восклицательный знак) + Tab или doc + Tab или HTML: 4t + Tab и HTML doc будет перед вами

2. Написание простого тега HTML

Чтобы написать простой HTML, например, для тега div, мы просто набираем div и нажимаем клавишу Tab.Его можно использовать для создания любого тега.

3. Назначьте атрибут элементу

Мы можем назначить любой атрибут, такой как class, id, src и т. Д., Используя Emmet-

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

Как видите, если вы просто наберете #firstdiv, по умолчанию будет создан элемент div. Если вы хотите указать элемент, вы можете ввести section # firstelement

Но если вы хотите назначить любой другой атрибут, вы можете легко указать его в скобках [].Предположим, мы хотим назначить атрибут src тегу img, мы можем написать

4. Создание одноуровневого элемента

Родственный элемент относится к элементу на том же уровне вложенности. Если вы хотите создать родственников или параллельный элемент, вы можете просто добавить + между элементами.

5. Создание дочернего элемента / вложение

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

6.Группировка

Если вы хотите, чтобы внутри элемента было несколько элементов, этого можно добиться, сгруппировав их с помощью ().

7. Умножение

Если вы хотите повторить один и тот же элемент несколько раз, это вам поможет. Мы можем создать несколько элементов со знаком звездочки *.

Предположим, мы хотим создать 6 div с class = ”main”, мы просто набираем — .main * 6

8. Автоматическая нумерация

Автоматическая нумерация поможет вам легко написать другое имя с автоматическим приращением номера.Правильный синтаксис этой функции — знак доллара $.

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

Плагины Essential Sublime Text для веб-разработчиков

9. Фиктивный текст

Если вы используете фиктивный текст, копируя его из lorem или lipsum, или откуда-то еще, вам не нужно этого делать, если у вас есть Emmet. Эммет может сгенерировать для вас фиктивный текст lorem ipsum. мы просто пишем lorem. Он будет генерировать от 5 до 7 строк текста Ipsum.

В Emmet мы можем указать, сколько слов нужно сгенерировать.Скажите, 7, затем введите lorem7

10. Ярлык ссылки

Если у вас есть значок, rss или внешний файл CSS, который вы хотите добавить в свой документ, вы можете использовать уловки со ссылками для их более быстрого написания.

• Чтобы вставить css-ссылку: css
• Чтобы вставить favicon- ссылку: favicon

Заключение

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

Подробные инструкции по установке плагина Sublime Text3 и Emmet

Установить Sublime Text3

Войдите на официальный сайт Адрес загрузки Sublime Text3 ： http: //www.sublimetext.com/3

Щелкните соответствующую версию, чтобы загрузить и установить, мой компьютер — 64-разрядная версия Windows, поэтому выберите версию в красном поле.

Install Package Control (управление надстройками)

Официальный сайт enterPackage Control ： https: // packagecontrol.io /

Нажмите установить сейчас

Официальный сайт предоставляет два способа загрузки:

Выбираем первый способ: автоматическая установка, выбираем код соответствующий версии Sublime Text и копируем,

Откройте программу Sublime Text3,

Откройте консоль Sublime Text3: View-> Show Console

Введите установочный код Package Control в консоль и нажмите Enter,

Убедитесь, что установка прошла успешно, нажмите «Настройки», если отображаются «Параметры пакета» и «Управление пакетами», это означает, что установка прошла успешно,

Перезапустить Sublime Text 3.

Установите Emmet с помощью управления пакетами

Щелкните Package Control на картинке выше, введите ключевое слово install во всплывающем окне, найдите пакет установки и щелкните,

Через несколько секунд появится окно установки плагина, введите emmet и щелкните первый для установки,

Обратите внимание, что здесь подождите примерно 10 секунд.

Убедитесь, что установка прошла успешно:

Откройте Preferences-> Package Control, войдите в список, в нем будут перечислены плагины, установленные Sublime Text3.Если в нем есть emmet, значит, плагин emmet успешно установлен.

Часть решения ошибки

Ошибка один

Выполнение ошибки управления пакетом:

Решение Откройте связку ключей и удалите Cert 0 в сообщении об ошибке: соответствующий сертификат слева; про тест доступен

Проблема решается из: http://stackoverflow.com/questions/33224830/error-executing-security-dump-trust-settings-in-sublime-text-3

Ошибка два

отсутствующих зависимостей было только что установлено.Sublime Text следует перезапустить, иначе ….

Решение: перезапустить sublime.

Sublime Text 3 Руководство по освоению PHP для разработчиков

Как разработчики программного обеспечения, мы проводим большую часть времени, глядя на код, пока ошибка не станет неудобной и не обнаружится, чтобы мы могли ее исправить; или мы пишем потрясающий код, за который нам будет стыдно через некоторое время. Независимо от дня и продуктивности, мы проводим большую часть времени в наших IDE или текстовых редакторах.Я решил потратить его на Sublime Text.

В своей жизни я использовал разные IDE, от NetBeans до Eclipse, Visual Studio и других, и всегда хорошо иметь что-то, указывающее на ваши ошибки, прежде чем даже опробовать решение, но для меня IDE казались слишком медленными. и несколько тормозит.

Когда дело доходит до кодирования с помощью текстового редактора, выбор широк, но его можно сузить до самых популярных: Vim, Notepad ++, Atom и Sublime Text.

Некоторое время назад я дал Notepad ++ шанс, но мне это не удалось; с Vim мое самое большое достижение — это «умение бросить курить!»; Атом я до сих пор не пробовал, но моему коллеге он очень доволен.

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

TL; DR;

Начнем с быстрой настройки.

Установить Sublime Text

1. Загрузите Sublime Text с их официальной страницы.
2. Установите его.
3. Прибыль.

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

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

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

Пакетный контроль

Чтобы иметь возможность легко устанавливать пакеты, вам понадобится так называемый Package Control.Чтобы установить его, следуйте инструкциям здесь.

После установки вы сможете вызвать панель, нажав ctrl + shift + p в Linux и Windows и cmd + shift + p в OS X.

Мы будем использовать эту панель для установки всех остальных пакетов.

Следующий раздел посвящен ускорению написания кода с использованием плагинов, таких как Emmet.

Эммет

Чтобы установить Emmet, запросите панель, как указано выше, нажав ctrl + shift + p и введите Install Package .Первым элементом в списке является элемент управления пакетами : установить пакет . Нажмите на нее, подождите секунду или около того, и появится новая панель. Введите Emmet и выберите первый.

Поздравляем! Но что вы только что установили?

Emmet — это сборник ярлыков и фрагментов, который позволяет быстро писать код HTML и CSS.

Например:

В документе HTML введите ! и нажмите вкладку.Это сгенерирует весь шаблон HTML5. Или попробуйте ul> li * 5> a.nav и нажмите вкладку. Он генерирует список из 5 элементов, каждый из которых содержит ссылку с классом nav .

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

PHP Companion (только для разработчиков PHP)

Опять же, начните с знакомой комбинации ctrl + shift + p и Install Package, затем найдите PHP Companion .Большой. Теперь, когда он установлен, перейдите в Настройки -> Привязки клавиш . Это покажет вам два файла, один слева должен быть заполнен настройками по умолчанию, это Sublime Default Key Bindings . Справа вы увидите Пользовательские привязки клавиш .

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

 [
    {"ключи": ["f6"], "команда": "expand_fqcn"},
    {"keys": ["shift + f6"], "command": "expand_fqcn", "args": {"leading_separator": true}},
    {"ключи": ["f5"], "команда": "find_use"},
    {"ключи": ["f4"], "команда": "import_namespace"},
    {"ключи": ["f3"], "команда": "реализовать"},
    {"keys": ["shift + f12"], "command": "goto_definition_scope"},
    {"ключи": ["f7"], "команда": "insert_php_constructor_property"}
]
 

Вставьте этот код в свой Пользовательский файл (файл справа).Сохраните изменения, затем перезапустите редактор Sublime Text.

То, что делает PHP Companion, использует ярлыки, такие как f5 и f6, чтобы найти пространство имен класса и автоматически встроить его (f5) или импортировать его в начало файла (f6).

Для объектно-ориентированного программирования и разработки с использованием фреймворков, которые полагаются на классы и пространства имен, PHP Companion является огромным приростом производительности.

Красота кода

«Любой дурак может написать код, понятный компьютеру.Хорошие программисты пишут код, понятный людям »- Мартин Фаулер, 2008.

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

Тем не менее, давайте перейдем к пакетам, которые сделают это проще.

DocBlockr

Это простой плагин.После установки вы можете перейти к любому файлу, набрать / ** , а затем быстро нажать Tab.

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

 / **
 * [описание вашего метода]
 * @param [тип] $ параметр [описание]
 * @return [тип] [описание]
 * /
 

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

Документация — номер один для написания хорошего кода, и этот плагин значительно упрощает работу с ней.

Центровка

Предположим, у вас есть следующий код:

 $ яблоко = «яблоко»;
$ pear = «груша»;
$ banana = «банан»;
 

Вы можете выделить их все сразу, нажмите ctrl + alt + a , и вы получите:

 $ apple = "яблоко";
$ pear = "груша";
$ banana = "банан";
 

Это особенно полезно, когда у вас есть огромные массивы, содержащие множество одиночных пар ключ => значение , и вы хотите упростить чтение / редактирование.

Код коррекции

Имея в виду, что Sublime text не является IDE, полезные подсказки, такие как синтаксические ошибки для пользовательских классов или переменных, получить нелегко. Тем не менее, у нас все еще могут быть помощники, которые сообщают нам, если точка с запятой отсутствует или скобка не закрыта, или о подобных проблемах, прежде чем мы откроем браузер, чтобы протестировать его самостоятельно.

Возвышенный ЛИНТЕР

Sublime Linter — это базовый пакет, который обеспечивает немедленную проверку синтаксических ошибок для Python, JS, CSS и Ruby.

После установки он должен работать сразу. Попробуйте сами: откройте файл .js, сделайте синтаксическую ошибку, и вы увидите красную точку слева рядом с номером строки.

Для языков, которые не доступны автоматически с Sublime Linter, все, что нам нужно сделать, это установить дополнительные пакеты, еще раз запросив панель. Выполните ctrl + shift + p , введите Install Package и, наконец, Sublime Linter , затем выберите язык по выбору, например, PHP .

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

Sublime Text для фронтенд-разработчиков

Это гостевой пост Веса Боса. Уэс уже давно писал о Sublime Text и обо всех замечательных вещах, которые он привносит в редактирование кода. У него есть новая книга и видео пакет: Sublime Text Power User. Я недавно встретился с ним на конференции и видел его доклад о Sublime Text.Конференция об этом гудела. У новичка отвисла челюсть, и старый профессионал научился новым трюкам. Здесь Уэс поделится некоторыми из лучших вещей, касающихся таких фронтендеров, как мы.

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

Подсветка синтаксиса

Это почти 2015 год, и тонны изменились за последние несколько лет — CSS взорвался новыми функциями, JavaScript представил новые функции и синтаксис, и у нас есть несколько новых языков, которые компилируются в HTML, CSS или JavaScript. Подсветка синтаксиса, поставляемая с Sublime, устарела и даже недоступна для некоторых языков.

Следующие пакеты позволят максимально выделить синтаксис. Даже если у вас уже есть подсветка синтаксиса для всех ваших языков — прочтите это, так как вы можете изменить некоторые из них.

Подсветка синтаксиса JavaScript Next обеспечивает лучшую подсветку кода, чем стандартная подсветка JavaScript, а также поддерживает такие функции ECMAScript 6, как модули, сжатые методы, стрелочные функции, классы, генераторы и средства доступа (ES5).

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

Пользователи Sass должны установить пакет SCSS.Внимание — это распространенная ошибка — искать и устанавливать Sass, когда вы на самом деле пишете не синтаксис Sass, а синтаксис Scss — убедитесь, что у вас включен правильный, чтобы все другие пакеты, такие как Emmet, продолжали работать должным образом. .

Конечно, есть также пакеты Stylus и LESS, если они являются вашим любимым оружием CSS.

Написать Coffeescript? Убедитесь, что у вас установлен пакет Better-Coffeescript. Важно приобрести пакет better-coffeescript , поскольку обычный пакет CoffeeScript больше не поддерживается.В этом лагере есть также Typescript Package.

Пакет Haml расширяет стандартный пакет Haml, включая вложенные языки, такие как JS, CSS, Sass и т. Д., Так что вы можете поддерживать как выделение, так и фрагменты. Пакеты Slim и Jade обеспечивают столь необходимую подсветку для этих новых языков разметки.

Пакеты и плагины

Sublime во многом обязан своей популярностью бесконечному количеству интересных и полезных пакетов, созданных сообществом.Если вы новичок в Sublime, вы можете добавлять пакеты и управлять ими с помощью Package Control.

Хотя мы могли бы просидеть весь день и поговорить о лучших Sublime Packages, и я надеюсь, что вы это сделаете в комментариях, это несколько обязательных пакетов для фронтенд-разработчика, работающего с HTML, CSS и JavaScript.

Цветной маркер

При работе с цветами в таблице стилей полезно иметь какое-то наглядное пособие, показывающее реальный цвет. Color Highlighter просканирует вашу таблицу стилей и раскрасит ваше имя цвета, шестнадцатеричный код или RGBA, заполнив фон этим цветом.Есть варианты, которые можно подчеркнуть цветом или отобразить в виде круга в желобе.

Недавно была добавлена ​​поддержка переменных Sass, LESS и Stylus, что делает этот инструмент готовым практически для любого рабочего процесса!

Эммет

Почти все уже знают об Эммете, и многие используют его еще со времен Zen Coding. Однако я обнаружил, что многие разработчики упускают из виду некоторые мощные функции Emmet.

HTML

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

Это может быть так просто или сложно, как вы хотите. Вот несколько примеров — обязательно ознакомьтесь со шпаргалкой по всем возможным способам использования Emmet с HTML.

• `element` +` tab` создает этот элемент и помещает курсор внутрь:
  • `span` +` tab` →
  • `p` +` tab` →

• `элемент.className или element # ID + tab создает этот элемент со связанным классом (ами) или идентификатором
  • `span.hello` +` tab` →
  • `p.odd.warning` +` tab` →

  • `div # contact` +` tab` →

• `element> childElement` +` tab` создает вложенные элементы
  • `ul> li` +` tab` →

  • `p> span` +` tab` →

• `[element * 5]` + `tab` создает этот элемент, умноженный на число
  • `стр.привет * 2` + `tab` →

Можно также использовать $ в качестве заполнителя для приращения. Используйте $$ для начального нуля.

`li.item $ * 3` +` tab` →

Квадратные скобки для атрибутов и фигурные скобки для текста элементов.

`figure * 2> img [src =” dog $ .jpg ”] + figcaption {This is dog $}` →

  <рисунок>
  
  

<рисунок>
  
  
  

CSS

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

Emmet для CSS работает, вводя приблизительное свойство / значение CSS, которое вы хотите.Здесь нет фрагментов, Эммет работает над чем-то, что называется нечетким соответствием, которое дает наилучшее предположение на основе того, что вы ввели.

• посрел → положение: относительное;
• posab → положение: абсолютное;
• fl → поплавок:
• фр → поплавок: правый;
• db → дисплей: блок;
• dib → дисплей: встроенный блок;
• tdn → оформление текста: нет;
• c → цвет: #
• ширина → ширина:
• w100 → ширина: 100 пикселей;
• w100p → ширина: 100%;
• p → набивка:
• p10 → отступ: 10 пикселей;
• p10p → заполнение: 10%;
• bt1-s-red → border-top: сплошной красный 1px;

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

Возвышенный ЛИНТЕР

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

С помощью Sublime Linter вы можете легко получать обратную связь по линтингу в реальном времени практически для любого языка. Как разработчики интерфейса, мы должны линтировать наш JavaScript и, возможно, наш CSS. Если вы допустили ошибку, Sublime Linter прикрепит флажок, предупреждающий вас об ошибке.

Темы и цветовые схемы

Все еще используете тему Sublime и цветовую схему по умолчанию? Возможно, пришло время проверить несколько других. Изменение цвета Sublime состоит из двух частей: цветовая схема , изменяет цвет подсветки синтаксиса вашего кода, а тема изменяет цвет хрома редактора, такого как вкладки, боковая панель и палитра команд.

Начиная с последней сборки Sublime Text 3, теперь у нас есть возможность размещать определенные значки на боковой панели.

Любите ли вы свет или темноту, обязательно найдется тема, которая вам понравится. Вот несколько популярных:

Солнечная тьма

Solarized — фантастическая тема, которая также предлагает легкий аналог. Он доступен почти в каждом редакторе и стал любимым стандартом среди многих ведущих разработчиков.

Кобальт2

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

Сети UI

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

Перейти ко всему

Если вы используете другой редактор, например Coda, Textmate или Dreamweaver, вы, вероятно, полагаетесь на боковую панель для навигации по файлам. Sublime представила концепцию GoTo something . В простейшем случае вы можете использовать его для открытия любого файла в вашей открытой папке или проекте. Просто нажмите ⌘ ( Ctrl в Windows) + p , и откроется список, в котором вы можете начать вводить имя вашего файла.Это раскрывающееся меню поддерживает нечеткое соответствие , поэтому вам не нужно беспокоиться о правильном написании этого слова или даже об указании папки, в которой он находится.

Как только это будет удобно, GoTo something поддерживает номера строк файлов jquery.js: 205 , номера столбцов jquery.js: 205: 15 , а также что-то, называемое символами [защита электронной почты] , которые позволяют быстро переходите к функциям, методам или селекторам.

Что вам больше всего нравится?

Sublime Text просто упакован множеством удобных функций и пакетов.Достаточно, чтобы заполнить книгу!

Какие ваши любимые советы, уловки или пакеты?

Sublime Text

Раздел D.1 Возвышенный текст

Дэйв Рософф

Sublime Text — это быстрый кросс-платформенный редактор с тысячами пользовательских пакетов, реализованных в Python API . Это не бесплатно или с открытым исходным кодом, хотя большинство пакетов, добавленных пользователями, являются и тем, и другим. Разработка активна с июня 2016 года.

Здесь мы описываем несколько наиболее важных функций Sublime Text, которые помогут вам минимизировать накладные расходы на набор текста и более эффективно работать с вашим проектом MathBook XML .Мы также представляем пакет MBXTools, призванный помочь авторам MathBook XML работать более эффективно.

Sublime Text 2 и 3 доступны в течение неограниченного периода оценки, но для дальнейшего использования необходимо приобрести лицензию. Я обнаружил, что дополнительные функции Sublime Text 3 оправдывают стоимость лицензии.

Подраздел D.1.1 Настройки

Параметры Sublime Text хранятся и управляются в коллекции из файлов JSON в виде пар ключ-значение в файлах с расширением .sublime-settings extension. Вы можете изменить настройки, посетив эти файлы и изменив значения, отличные от их значений по умолчанию.

Для редактирования настроек Sublime Text, вы можете использовать Preferences / Settings — User menu (Sublime Text / Preferences… в OS X ). Убедитесь, что когда вы переходите к редактированию настроек, вы всегда выбираете опцию «Пользователь». Изменения файлов настроек по умолчанию будут перезаписаны при обновлении Sublime Text. Рекомендуется использовать файлы по умолчанию, чтобы узнать, какие настройки можно изменить.Их много, и не все задокументированы.

Все пользователи Sublime Text должны знать, что конкретное представление (буфер) может получать настройки несколькими разными способами, например, из глобальных настроек по умолчанию, из глобальных настроек OS , из настроек, предоставленных пакетом, из настроек, заданных пользователем. , и так далее.

Привязки клавиш также хранятся в файлах с аналогичным форматом. Доступно лишь ограниченное количество сочетаний клавиш, хотя Sublime Text действительно поддерживает многоступенчатые сочетания клавиш, такие как Emacs.Если вы обнаружите, что хотите переназначить ярлыки, это, безусловно, возможно через «Настройки» / «Привязки клавиш» — меню «Пользователь» (Sublime Text / Preferences… в OS X ).

Подраздел D.1.2 Управление пакетами

Sublime Text Python API предоставляет множество внутренних компонентов Sublime Text авторам плагинов и пакетов. Пакеты расширяют функциональность Sublime Text, как и основные режимы Emacs. Пакет обычно состоит из некоторых скриптов Python, которые определяют события и действия Sublime Text, некоторых текстовых файлов конфигурации (файлы XML / JSON / YAML , определяющие синтаксис языка, распознавание символов, пользовательские триггеры и контексты вставки фрагментов, привязки клавиш для новых и старых команд и т. д.) и, возможно, еще кое-что. Обычно они объединяются в архив .zip , замаскированный необычным расширением .sublime-package . Эти архивы находятся в каталоге Packages, доступном через меню Preferences (меню Sublime Text / Preferences в OS X ). Sublime Text отслеживает изменения в каталоге Packages и на лету перезагружает все затронутые плагины.

Первое, что вы должны сделать после установки Sublime Text, — это установить пакет Package Control.Этот менеджер пакетов работает в Sublime Text и автоматически получает обновления для установленных вами пакетов (если вы не отключите эту функцию). Вы также можете перечислить установленные в настоящее время пакеты, найти новые пакеты для исследования, удалить пакеты и т. Д.

Тысячи пакетов, добавленных пользователями, доступны для простой установки с помощью Package Control. Пакеты можно поддерживать вручную, поскольку большинство авторов пакетов публикуют их через GitHub, но управление пакетами — это универсально рекомендуемый метод получения, управления и удаления пакетов для вашей установки.

1. Посетите сайт загрузки Package Control.

2. Найдите консольную команду Sublime Text (убедитесь, что выбрана правильная версия Sublime Text) и скопируйте ее в буфер обмена.

3. Откройте консоль Sublime Text ( Ctrl-`) и вставьте команду в появившееся окно, затем нажмите Введите .

Установив Package Control, вы можете использовать палитру команд для развертывания его команд, таких как Install Package, List Packages и Remove Package.См. Документацию для получения дополнительной информации. В этом разделе рекомендуются несколько особенно полезных пакетов, которые кратко описаны в подразделе D.1.9.

Подраздел D.1.3 (*) Сочетания клавиш

Будет написано.

Подраздел D.1.4 Управление проектом

Как и многие современные редакторы, Sublime Text имеет хорошие функции управления проектами. Это позволяет файлам, которые являются частью более крупного проекта, работать вместе. Например, команда Sublime Goto Anything обеспечивает быстрый доступ к любому файлу в проекте.Команда «Найти в проекте» позволяет пользователям выполнять поиск и замену (с регулярными выражениями или без них) по всему проекту. Совпадения отображаются в текстовом буфере, и двойной щелчок открывает соответствующий файл в соответствующей позиции.

Боковая панель обеспечивает удобный просмотр всех файлов и каталогов в проекте или, если хотите, отфильтрованный вид, в котором файлы по вашему выбору исключены. Пакет MBXTools (подраздел D.1.7) также в некоторой степени использует настройки для конкретного проекта, чтобы обеспечить некоторые из его функциональных возможностей.

Подраздел D.1.4.1 Команда открытия папки

Самый простой способ использовать функции управления проектами — хранить связанные файлы в одном каталоге и его подкаталогах. Если вы затем воспользуетесь командой «Файл / Открыть папку…», то откроется весь каталог, и все его подкаталоги и файлы будут показаны на боковой панели. Вы можете переключать боковую панель с помощью палитры команд или напрямую с помощью Ctrl + K, Ctrl + B ( Cmd + K, Cmd + B в OS X ).

Используя эту команду, вы уже используете управление проектами, даже если вы никогда не сохраняли свой проект. В Sublime Text всегда открыт неявный проект, если вы не открываете явный. Этого достаточно для многих пользователей, поскольку он предоставляет наиболее полезную функцию (Найти / Найти в Project). Команда Goto / Go To Symbol в проекте также полезна, но не полностью реализована в MBXTools (подраздел D.1.7). Некоторые из преимуществ явного управления проектами описаны ниже.

Подраздел D.1.4.2 Явные проекты

Чтобы сохранить проект в явном виде, используйте меню «Проект», чтобы выбрать «Сохранить как проект…», и выберите подходящее имя и местоположение. Для проекта MathBook XML это, вероятно, будет то же имя и расположение, что и корневой файл документа. Используйте команды меню «Проект», чтобы открывать и закрывать проект.

Использование явного проекта для группировки файлов дает несколько преимуществ.

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

• У вас могут быть настройки для конкретного проекта, которые отличаются от значений по умолчанию в Sublime Text и отличаются от ваших пользовательских предпочтений ( [предварительная перекрестная ссылка: подраздел-настройки] ).

• Рабочие области проекта Sublime будут помнить, какие файлы вы открывали при последнем закрытии проекта и на каких позициях.

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

• Можно включать файлов .sublime-project в репозитории Git, но файлов .sublime-workspace не должны включать (согласно документации Sublime Text).

Подраздел D.1.5 Множественный выбор

Множественный выбор — самая полезная и незаменимая функция Sublime Text, которая заставит вас возвращаться. Из документации:

Любые похвалы по поводу множественного выбора — это преуменьшение.

Базовая функциональность множественного выбора проста. Удерживая нажатой клавишу Ctrl ( Cmd в OS X ), щелкните где-нибудь в открытом представлении, чтобы получить второй курсор. Продолжайте добавлять курсоры. Все они будут вести себя вместе при вводе: текст будет вставлен, большинство фрагментов или других текстовых команд будут работать как обычно и т. Д. Даже команды мыши работают интуитивно понятным образом с множественным выбором.

Трудно точно объяснить, что делает множественный выбор таким мощным.Вам просто нужно попробовать это на себе. Вот типичный пример. В структурированном документе довольно часто встречаются многие фрагменты текста — например, имена элементов и атрибутов. Вы можете обновить несколько экземпляров фрагмента одновременно, сделав несколько идентичных изменений. Команда Sublime Quick Add Next ( Ctrl + D / Cmd + D ) делает это несложно.

1. Поместите курсор где-нибудь в слове, которое нужно изменить.

2. Используйте «Быстрое добавление далее», чтобы расширить ваш (пустой) выбор до текущего слова.

3. Снова используйте «Быстрое добавление следующего», чтобы добавить следующий экземпляр к выбранному, который обычно отключается.

4. Продолжайте «Быстрое добавление далее» сколько угодно раз. Используйте Quick Skip Next ( Ctrl + K, Ctrl + D / Cmd + K, Cmd + D ), чтобы перепрыгивать через экземпляры, которые вы хотите оставить в покое. Если вы зашли слишком далеко и выбрали ошибочный, нажмите Ctrl + U / Cmd + U , чтобы отменить.

5. Внесите свою модификацию, только один раз.

Другой пример, который часто встречается при создании XML , — это использование фрагмента «Перенос с тегом» ( Alt + Shift + W / Ctrl + Shift + W ).Этот фрагмент оборачивает выбранные элементы в тег

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

Выбор столбца позволяет выбрать прямоугольную область файла. Это невероятно полезно при редактировании структурированного документа.Есть много способов сделать это (см. Документацию Sublime Text для почти исчерпывающего списка), но наиболее часто используемым является удерживание Shift при щелчке и перетаскивании правой кнопкой мыши (в OS X удерживайте вниз Опция при перетаскивании правой кнопкой мыши). См. Документацию по сочетаниям клавиш.

Выбор столбца становится еще более полезным при использовании в сочетании с сочетаниями клавиш для перемещения и выделения, такими как Ctrl + Shift + Right (выбрать до конца слова) и Shift + End (выбрать до конца строки).

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

1. Используйте выбор столбца, как описано выше, для выбора каждой строки отдельно.

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

3. одновременно.

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

   . Сначала нажмите Shift + End , чтобы выбрать конец строки.

5. Если ваши строки обернуты, вам может потребоваться снова нажать Shift + End , чтобы добраться до конца обернутых строк.

6. Теперь вы выбрали слишком далеко:

тоже выбраны. Удерживая Ctrl + Shift , дважды нажмите стрелку влево (отмените выделение по слову).(После небольшой практики такие шаги кажутся автоматическими.)

7. Используйте «Перенос с тегом», чтобы обернуть каждую из выбранных строк совпадающими тегами начала / конца

   одновременно.

Это требует небольшой работы с мышью, но экономия нажатия клавиш может быть значительной. (Пакет Emmet, описанный в Подразделе D.1.6, предоставляет еще более быстрый способ решения этой задачи и гораздо более сложные способы.)

Существует так много невероятно удобных способов использовать множественный выбор, что мы откажемся от дальнейших примеров, чтобы дать читателю удовольствие открыть для себя свои собственные фавориты.Один особенно полезный пакет — Text Pastry, который предоставляет некоторые команды автонумерации и вставки текста, которые хорошо работают с множественным выбором. Есть также несколько пакетов, которые расширяют функциональность множественного выбора, например PowerCursors и MultiEditUtils. PowerCursors позволяет добавлять курсоры и управлять ими без использования мыши. MultiEditUtils предоставляет дополнительные команды обработки текста, предназначенные для работы с множественным выделением.

Подраздел D.1.6 Эммет

Emmet — самый загружаемый плагин для Sublime Text (1.82 миллиона установок через Package Control). Он в основном используется авторами HTML и CSS и предоставляет им множество функций. Это также полезно для записи XML , как мы видим ниже. Основными преимуществами работы с Emmet являются простота создания, изменения и удаления тегов.

Emmet по умолчанию переопределяет привязку Sublime для клавиши Tab , наделяя ее новым поведением (команда Expand Abbreviation). Это новое поведение заключается в создании соответствующей пары тегов XML для любого слова слева от символа вставки или для любых выбранных слов.Например, если вы наберете «ol» и нажмете клавишу Tab , результат будет

.

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

Emmet превратит любое слово, которое он не распознает, в пару совпадающих тегов, когда будет запущена команда Expand Abbreviation. Однако некоторые элементы XML пусты. В совпавшей паре тегов команда Разделить / Объединить тег ( Ctrl + Shift + `/ Cmd + Shift +` ) сократит его в пустой тег, удалив любой текст между существующими начальным и конечным тегами.(Если каретка — внутри тега для пустого элемента, эта команда заменяет пустой элемент соответствующей парой начального / конечного тегов.)

Поведение по умолчанию (создание пар тегов всякий раз, когда нажимается Tab ) мешает обычному завершению Tab в Sublime Text, что может быть нежелательно. Его можно отключить, установив

 "disabled_keymap_actions": "expand_abbreviation_by_tab" 

в Preferences / Package Settings / Emmet / Settings — User file. Функциональность Expand Abbreviation будет по-прежнему доступна через Ctrl + E .

В качестве более сложного примера сокращений предположим, что вы вставили элементы упорядоченного списка. Теперь вам нужно структурировать его с помощью ol , li и так далее.

 Списки часто бывают хорошими.
Вы можете предоставить элементы списка с помощью  @xml: id .
Однако вы, вероятно, не захотите их нумеровать.
 

Желаемый результат:

 

    
 Списки часто бывают хорошими. 
    
 Вы можете предоставить элементы списка с помощью  @xml: id .
    
 Но вы, вероятно, не захотите их нумеровать. 

 

Используя Emmet, его можно получить, выполнив команду Wrap as you Type ( Ctrl + Shift + G / Ctrl + W ) и введя следующее выражение в минибуфер.

 ol> li [xml: id = item $] *> p
 

Символ > обозначает дочерний элемент, квадратные скобки (с назначением или без него) обозначают список атрибутов, $ обеспечивает нумерацию на основе строк, а * указывает перенос каждой выбранной строки указанным поддеревом. (поэтому каждая строка заключена в

 <раздел xml: id = "">
    <введение>
        
 
    
    <подраздел xml: id = "">
        
 
        
 
        
 
        
 
        

            
 
            
 
            
 
        
    
    <заключение>