Установка emmet в sublime text 3: Sublime Text 3 — установка, русификация + установка emmet

Разное
9 Июн, 2019
0

Содержание

Emmet плагин для sublime text 3

Как ускорить верстку страницы в разы? А на помощь нам придет плагин под названием Emmet. Начнем с того, что данный плагин доступен под различные текстовые редакторы, сейчас мы рассмотрим пример как установить плагин в текстовый редактор Sublime text 3 который рассматривали в прошлом посте. Вся установка займет не более 5 минут.

Установка Emmet.

И так начнем, запускаем Sublime text 3 в верхней части панели инструментов выбираем Preferences (Предпочтения) -> Package Control или сочетанием горячих клавиш Ctrl + Shift + pи выбираем данный пункт.

В появившееся поле пишем install Package и вписывает название самого пакета т.е. Emmet

И ждем окончания установки (перед нами появится текстовое руководство Emmet). Установка окончена, разберемся с принципом использования.

Как работает Emmet.

Создаем html документ т.е. внизу справа в Sublime Text должно быть написано HTML, если там какое то другое значение плагин не сработает!

Развернем самую простую разметку html документа для это вводим ! знак и нажимаем Tab

и сразу получаем вот такую разметку

Как написать быстро тег?

Пишем название тега без всяких скобок просто div или ul и нажимаем Tab, emmet сам понимает как развернуть тег.

Как задать содержимое внутри тега?

Для этого используется {} скобки т.е. div+p{Привет мир} после нажатия Tab получим <div></div><p>Привет мир</p>, а () скобки используются для группировки элементов

Как добавить тегу атрибут id?

Для задания id в emmet используем #, div#firs_id.first_class получаем <div id=»firs_id» class=»first_class»></div>. Для задания любых других атрибутов используются квадратные скобки — [] внутри них указываются необходимые атрибуты.

Есть функция инкремента, например нам необходимо заполнить id тега a от 1 до 5 для этого используем следующую конструкцию div>a#$*5 в результате чего все id тега a заполнятся значениями от 1 до 5

Хочу еще добавить что Emmet умеет работать и с CSS таким же образом, только в Sublime Text должен быть выбран синтаксис CSS, Emmet знает все CSS свойства и достаточно написать первую букву свойства и нажать Tab или еще можно указать первую букву и необходимое значение например m20 + Tab выведет следующий результат margin: 20px;

У кого если вдруг появились какие-то вопросы задаем их в комментариях с радостью отвечу на них.

Как установить и настроить Sublime Text 3 для html верстки — Bookamba блог

Приветствую вас на сайте Bookamba. Тема сегодняшней статьи – установка и настройка редактора Sublime text 3, уверен по аналогии и для Sublime text 2 данная инструкция тоже подойдет.

В ходе сегодняшнего урока мы установим необходимые пакеты для Sublime text, которые помогут нам в нашей работе с версткой сайтов, ускорят процесс верстки и сделают верстку более удобной. Установим визуальную тему, которая на мой взгляд очень напоминает дизайн редактора Brackets, является навороченной и имеет множество настроек.

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

Я подготовил список плагинов, пакетов и тем, которые мы сегодня установим.
Первым делом мы конечно же установи сам Sublime text 3, для этого перейдем по ссылке https://www.

sublimetext.com/3 и скачаем версию для вашей ОС. Далее после установки, первым делом установим панель управления пакетами – Package Control, для этого перейдем на официальный сайт Package Control и выполним инструкцию по его установке https://packagecontrol.io/installation

Как видим, для того, чтобы установить Package Control, нам необходимо нажать на клавиатуре следующее сочетание клавиш Ctrl + (или для макентошников command + ) для того, чтобы вызвать консоль редактора Sublime, после чего в консоль копируем и вставляем код, показанный на сайте из вкладки для нашей версии Sublime text 3

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

Итак, вот список пакетов, которыми я пользуюсь

Emmet
JavaScript & NodeJS Snippets
FakeImg Placeholder Snippet
Color Highlighter
HTML5
Terminal
Sass
Material Theme

Где брать пакеты для Sublime Text 3

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

На официальном сайте самого менеджера пакетов Package Control https://packagecontrol.io/, прямо на главной странице, можно увидеть список самых популярных пакетов, пакетов набирающих популярность и тд. Конечно есть поиск по всему этому добру. Если к примеру ввести в поиск Emmet, можно увидеть список пакетов, содержащих в себе слово Emmet. Мы же перейдем по самому популярному из них, установленному уже почти 3 миллиона раз. На странице пакета Emmet можно почитать ридми по настройке и установке. Например в ридми по установке написано, что для установки Emmet, необходимо запустить менеджер пакетов и написать Emmet, после чего нажать Enter и установить пакет. Далее, опять-таки, на этой же странице мы можем увидеть официальный сайт разработчиков этого пакета https://emmet.io/. Если перейти на него, здесь мы сможем почитать для чего этот пакет нужен и всю информацию связанную с ним. Например, можно запустить демо видео и увидеть, как устроен Emmet и какую мощь он несет в своем функционале.

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

Как устанавливать пакеты Sublime Text 3

А теперь давайте приступим к установке пакетов. В окне редактора нажимаем сочетание клавиш Ctrl + Shift + p, для того, что-бы открыть окно списка функций. Далее вводим package control: install package, ждем, что-бы под грузился менеджер пакетов, а теперь вводим название первого плагина – emmet и жмем enter. Внизу редактора при установке пакетов видно плавающее равно, это обозначение того, что пакет устанавливается. Как только равно пропадает, пакет можно считать установленным. Иногда после установки того или иного пакета открывается текстовый файл со справкой или с настройками пакета. В таком случае, как правило, просто достаточно закрыть этот файл.

Далее проделываем то же самое со следующими пакетами…

Как настроить Sublime Text 3

Поле того, как мы установили все необходимое, давайте настроим окружение – пользовательские настройки редактора. Для начала давайте перейдем в меню Preferences -> Settings. Здесь в левом окне мы можем наблюдать все доступные настройки редактора выставленные по умолчанию.

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

Мои настройки выглядят следующим образом:

{ «fold_buttons»: false, «font_size»: 12, «highlight_line»: true, «remember_full_screen»: true, «show_encoding»: true, «tab_size»: 4, «word_wrap»: false, «margin»: 5, «always_show_minimap_viewport»: true, «bold_folder_labels»: true, «font_options»: [«gray_antialias», «subpixel_antialias»], // On retina Mac & Windows «indent_guide_options»: [«draw_normal», «draw_active»], // Highlight active indent «line_padding_bottom»: 2.5, «line_padding_top»: 2.5, «overlay_scroll_bars»: «enabled», «color_scheme»: «Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme», «theme»: «Material-Theme.sublime-theme», «material_theme_accent_cyan»: true, «material_theme_bullet_tree_indicator»: true, «material_theme_compact_sidebar»: true, «material_theme_small_tab»: true, «material_theme_tabs_autowidth»: true, }

{

«fold_buttons»: false,

«font_size»: 12,

«highlight_line»: true,

«remember_full_screen»: true,

«show_encoding»: true,

«tab_size»: 4,

«word_wrap»: false,

«margin»: 5,

«always_show_minimap_viewport»: true,

«bold_folder_labels»: true,

«font_options»: [«gray_antialias», «subpixel_antialias»], // On retina Mac & Windows

«indent_guide_options»: [«draw_normal», «draw_active»], // Highlight active indent

«line_padding_bottom»: 2. 5,

«line_padding_top»: 2.5,

«overlay_scroll_bars»: «enabled»,

«color_scheme»: «Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme»,

«theme»: «Material-Theme.sublime-theme»,

«material_theme_accent_cyan»: true,

«material_theme_bullet_tree_indicator»: true,

«material_theme_compact_sidebar»: true,

«material_theme_small_tab»: true,

«material_theme_tabs_autowidth»: true,

}

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

“fold_buttons”: false
По умолчанию в Sublime, слева возле номеров строк, есть такие треугольники – если выделить участок кода, можно нажать на этот треугольник и свернуть тот или иной участок кода. Мне кажется эта настройка при верстке – неудобной и ненужной, поэтому я отключаю ее.

“font_size”: 12
Тут думаю все понятно, это размер шрифта в редакторе.

“highlight_line”: true
Подсветка строки по горизонтали, на которой находится каретка.

“remember_full_screen”: true
Если в момент, когда вы закрыли редактор, он был развернут на весь экран, то при следующем открытии Sublime text, он откроется в полноэкранном режиме.

“show_encoding”: true
Если установить эту опцию в true, внизу справа в панели, появится строка, в которой можно прочитать текущую кодировку файла. Это очень удобно, особенно если вы используете сторонние плагины, разработчики которых могли по ошибке или по невнимательности сохранить файл в какой-то кривой кодировке. Такое конечно очень редко встречается. Но лично мне просто спокойней видеть, что все файлы с которыми я работаю у меня utf-8 и что все хорошо (:

“tab_size”: 4
При нажатии на tab появляется отступ. Я предпочитаю, чтобы по умолчанию этот отступ был равен четырем пробелам, мне так удобней оценивать блоки кода и они не сливаются.

“word_wrap”: false
Если установить эту опцию в false, то длинные строки не будут переноситься на следующую строку. То есть у вас будет появляться горизонтальный скролл. В верстке мне кажется это удобным.

“margin”: 5
Отступ кода слева от края редактора.

Далее идет список настроек, которые нам рекомендуют установить разработчики темы Material Theme, это можно прочитать у них на сайте проекта, на гитхабе https://github.com/equinusocio/material-theme, к эти настройкам относятся следующие свойства описанные ниже.

“always_show_minimap_viewport”: true
Показывать в вертикальном скролле подсветку уменьшенной копии кода. Кому как удобно, я привык к этой функции и юзаю ее. Если же вам не нравится такое, можете ее отключить

“bold_folder_labels”: true
В сайдбаре, там где отображается список папок и файлов проекта, делает текст более жирным и ярким.

“font_options”: [“gray_antialias”, “subpixel_antialias”]
Рекомендуемые настройки шрифтов

“indent_guide_options”: [“draw_normal”, “draw_active”]
Эта настройка нужна для того, что-бы редактор отображал белую пунктирную вертикальную черту слева от блока кода, внутри которого находится каретка. Опять же, кому как удобно. Мне лично помогает эта настройка, чтобы визуально видеть, в каком участке кода я нахожусь, особенно если блоки большие.

“line padding bottom”: 2.5
“line_padding_top”: 2.5
Эти две настройки отвечают за отступ между строками кода сверху и внизу.

“overlay scrollbars”: “enabled”
Эта настройка по моему отвечает за скрытие/отображение скроллбаров по умолчанию.

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

Отвлеклись, идем далее
“color_scheme”: “Packages/Material Theme/schemes/Material-Theme-Darker. tmTheme”
“theme”: “Material-Theme.sublime-theme”
Эти две строки нужны для того, чтобы активировать тему и ее цветовую палитру
Так как мы установили тему Material Theme, ее мы и активируем

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

“material_theme_accent_cyan”: true
Установит основной свет папок и вкладок. Мне симпатизирует этот цвет, потому-что, как раз-таки, он максимально похож на Brackets ))) Не скажу, что я фанат Brackets, но его оформление мне нравится, компания Adobe не будет придумывать всякие хухры-мухры дизайны

“material_theme_bullet_tree_indicator”: true
Эта настройка отвечает за то, чтобы отображать точку в сайдбаре слева от того файла, который в данный момент открыт на редактирование в редакторе

“material_theme_compact_sidebar”: true
“material_theme_small_tab”: true
Эти две настройки делают сайдбар и иконки немного меньше стандартных, смотрится компактно и красиво.

“material_theme_tabs_autowidth”: true
Автоматически выравнивать по ширине табы с открытыми файлами. Опять таки, можете по изменять настройки и пощупать их, как вам удобнее.

Напомню, что список всех настроек темы Material Theme, можно почитать на их официальном сайте на гитхабе https://github.com/equinusocio/material-theme

Думаете, что все? А вот и не угадали, теперь давайте настроим Emmet, переопределим некоторые шаблоны эммета, для этого идем в меню
Preferences -> Package Settings -> Emmet -> Settings User и добавляем следующий код:

{ «snippets»: { «html»: { «abbreviations»: { «script»: «<script type=\»text/javascript\»>», «script:src»: «<script type=\»text/javascript\» src=\»\»>», «form»: «<form action=\»${1:#}\» method=\»${2:post}\»>», «form:get»: «<form action=\»${1:#}\» method=\»get\»>», «form:post»: «<form action=\»${1:#}\» method=\»post\»>», «a»: «<a href=\»${1:#}\»>», } } } }

{

«snippets»: {

«html»: {

«abbreviations»: {

«script»: «<script type=\»text/javascript\»>»,

«script:src»: «<script type=\»text/javascript\» src=\»\»>»,

«form»: «<form action=\»${1:#}\» method=\»${2:post}\»>»,

«form:get»: «<form action=\»${1:#}\» method=\»get\»>»,

«form:post»: «<form action=\»${1:#}\» method=\»post\»>»,

«a»: «<a href=\»${1:#}\»>»,

}

Лично меня раздражает, что в Emmet нельзя по умолчанию развернуть форму с методом post или get, а самое главное при разворачивании формы или ссылки, что Emmet не ставит заглушки в action и href в виде решетки, что являлось бы валидным html. Все, сохраняем и закрываем

Как настроить автоформатирование кода в sublime

Идем в меню
Preferences -> Key Bindings

Здесь по аналогии с настройками окружения можно видеть слева список всех горячих клавиш установленных по умолчанию. Мы же переопределим некоторые из них.

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

[

{ «keys»: [«ctrl+e»], «command»: «toggle_side_bar» },

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

]

Лично у меня сочетание клавиш Ctrl + e ассоциируется со словом explorer ))) и мне привычней сворачивать и разворачивать левый сайдбар со списком папок и файлов проекта именно по нажатию этих горячих клавиш. Опять таки я не претендую, что это единственно верный вариант, просто делайте так, как лично вам удобно. По умолчанию в Sublime есть комбинации отвечающие за сворачивание и разворачивание сайдбара, но мне удобней именно такая комбинация.

Вторая же настройка лично у меня ассоциируется с IDE NetBeans, в которой для того, чтобы выровнять код нужно нажать комбинацию клавиш Alt + Shift + f именно по этой причине я предпочитаю и в sublime использовать такую же комбинацию. Разница лишь в том, что для того чтобы она сработала предварительно нам необходимо выделить участок кода, который мы хотим отформатировать.

И последнее, что мы сделаем – это скроем меню, для этого перейдем в меню View -> Hide Menu, после чего меню скроется и для доступа к нему мы теперь должны будем нажимать левый Alt

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

Как сохранить и перенести на другой компьютер все настройки Sublime Text 3

Ну и напоследок, кто дочитал до конца. Естественно у вас возник вопрос, что настраивать это все долго и неудобно всякий раз при переустановке операционной системы, или при переезде на другой ноутбук или ПК. Не отчаивайтесь, эти настройки достаточно сделать один раз, после чего просто копировать от компьютера к компьютеру. Для этого достаточно перейти в меню Preferences -> Browse Packages, откроется папка со всеми установками, перейдите в корневую директорию и скопируйте все папки сохранив их где-то у себя в архиве на облаке.

При новой же установке, после того, как вы установите Sublime, и перейдете в меню Preferences -> Browse Packages, путь будет другой, для того чтобы появился путь с локальными настройками, вам будет необходимо предварительно изменить настройки. Для этого просто перейдем в меню Preferences -> Settings и добавим справа пустой комментарий, сохраним, после этого sublime создаст папку с пользовательскими настройками. Вот после этих манипуляций, можно копировать туда папки с нашими сохраненными ранее настройками.
Примерные пути к папке с пользовательскими настройками для sublime text 3 для разных ОС для наглядности
MacOS: ~/Library/Application Support/Sublime Text 3/
Win: %AppData%\Sublime Text 3\
nix: ~/.config/sublime-text-3/

На этом все, спасибо за прочтение и, да – велкам на подробное видео по этой статье (:

Sublime Text 3 для верстки сайтов. Настройка внешнего вида и установка плагинов. Руководство для начинающих

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

Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!

Внешний вид программы

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

Боковая панель.

Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.

Цветовая схема

Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.

Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.

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

Перехожу в меню Tools – Command Palette, либо нажимаю Ctrl+Shift+P. Открывается вот такое окно с поиском, в поле поиска ввожу install пока не увижу пункт Install Package Control, и нажимаю на него. Спустя несколько секунд получаю сообщение о том, что Package Control успешно установлен. Теперь я могу приступить к установке нужной цветовой схемы.

Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.

В поле поиска ввожу название того дополнения, которое хочу установить, в данный момент — это цветовая схема под названием Base16 Color Schemes, точнее это целый пакет с множеством цветовых схем. Нажимаю на найденный пункт и ожидаю установки. Индикатор процесса устоновки можено увидеть на нижней панеле программы. Получив там же короткое сообщение о том, что все установлено перехожу к смене схемы. Для этого открываю уже знакомый пункт меню Preferences – Color Scheme и вижу в открывшемся окне уже большое множество разных вариантов. Меня интересует схема Ocean, ввожу название в поиске, их тут есть две: одна более контрестней другой.

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

Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme

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

Дополнительные настройки

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

"margin": 0, // Убирает отступы
"font_size": 10, // Размер шрифта по умолчанию
"draw_indent_guides": true, // Включает/выключает направляющие линии
"draw_white_space": "all", // Отображает непечатаемые символы
"tab_size": 3, //Размер табуляции
"remeber_open_files": true, // Помнит открытые ранее файлы

Поясню каждую настройку.

"margin": 0, // Убирает отступы

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

"font_size": 10, // Размер шрифта по умолчанию

Выставляет размер шрифта по умолчанию.Также быстро изменить размер шрифта, работая с кодом, можно зажав контрол и покрутив колесо мыши.
Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset

"draw_indent_guides": true, // Включает/выключает направляющие линии

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

"draw_white_space": "all", //Отображает непечатаемые символы

Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.

"tab_size": 3, //Размер табуляции

Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер 🙂

"remember_open_files": true, //Помнит открытые файлы

Например мы работали работали, а потом неожиданно закрыли программу 🙂 Бывает такое? У меня постоянно, так вот эта настрока включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.

Разделение рабочего окна

Еще более улучшить восприятие кода и ускорить процесс верстки нам поможет разделение рабочего окна.
Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.

Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.

Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.

Так что у тебя есть широкий выбор по вкусу. Я чаще всего использую одно разделение по вертикали.

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

Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.

Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.

Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.

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

Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.
Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?

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

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

Плагины

AutoFileName

Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.

BracketHighliter

BracketHighliter можно перевести как подсветка кавычек. Установим его. Нажимаем Ctrl+Shift+P, Install Package Control ищем BracketHighliter. Устанавливем. Тут даже открывается отдельный файл с сообщением об успешной установке. Теперь в нашем коде будет подсвечиваться начальный и конечный элемент, например открывающий и закрывающий тег, начальная и конечная ковычка, открывающая и закрывающая скобка. Это очень помогает с ориентацией в коде.

ColorHighliter

Обрати внимание на этот код — это код цвета, но какого именно непонятно.

Давай установим плагин. Ctrl+Shift+P, Install Package Control ищем ColorHighliter. Опять открывается отдельный файл с сообщением об успешной установке. И сообщения о некой ошибке, игнорируем их. Смотрим на наш код с цветом, и теперь видим что за цвет скрывается за буквенноцифровым кодом. Сам плагин можно дополнительно настроить в меню Tools — ColorHighliter но сейчас не будем останавливаться на этом. Все и так стало намного лучше.

Великий и могучий Emmet

Устанавливаем по наработанной схеме. Ctrl+Shift+P, Install Package Control ищем Emmet. Открывается отдельный файл с сообщением с просьбой перезагрузить программу для окончания установки. Закрываем и открываем Sublime. Получаем сообщение, что все установлено.

Итак, что же умеет Emmet?

Перейдем в HTML файл и попробуем записать тег div с классом . block, для этого нам теперь достаточно поставить точку, написать «block» и нажать клавишу Tab. Мы получим:

<div></div>

Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:

.block>span

Жмем клавишу Tab и получаем:

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

Крутяк, правда!?
Но и это еще не все, мы можем создавать свои снипеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следуещее:

{
	"snippets":{
		"html":{
			"snippets":{
				"bl":"<div></div>"
			}
		}
	}
}

Теперь для того чтобы вызвать запись:

<div></div>

нам достаточно написать bl и нажать клавишу Tab

Из этого следует, что возможности Emmet безграничны, и мы можем настроить свои снипеты как угодно и работать очень быстро. Подробную информацию о возможностях плагина можно найти на сайте https://emmet.io

GotoCSSDeclaration

Плагин поможет нам с навигацией в коде. Устанавливаем ровно так же как и предыдущие плагины. Далее назначим горячие клавиши для работы с плагином для этого переходим Preferences – Key Bindings, и пишем следующий код

{
"keys": ["ctrl+1"], "command": "goto_css_declaration",
"args": {"goto": "next"}
},

Где [«ctrl+1«] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.

Tag

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

Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:Users[Подставь свое имя пользователя]AppDataRoamingSublime Text 3Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:

{ "keys": ["ctrl+`"], "command": "tag_classes" }

Где ctrl+` это и есть наше сочетание клавиш.

Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`

и потом вставить результат копирования в наш CSS ctrl+v.

По мотивам выпуска «Sublime Text 3. Настройка, установка, плагины», из серии «Программы и инструменты для верстки сайтов», на YouTube канале «Фрилансер по жизни».

Видео версия статьи:

Автор: FreelancerLifeStyle

Источник

Sublime Text Editor

Введение

Sumblime Text имеет следующие особенности:

Быстрая навигация (Goto Anything)
Командная палитра (Command Palette)
API плагинов на Python
Одновременное редактирование (Split Editing)
Высокая степень настраиваемости (Customize Anything)

Sublime Text поддерживает большое количество языков программирования и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML.

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

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

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

Установка Sublime Text Editor

sublimetext.com

Видеоуроки

Установка Sublime Text Editor

Создание файлов в Sublime Text Editor

Элементы окна Sublime Text Editor

Подключение сайдбара Sublime Text Editor

Выбор цветовой схемы в Sublime Text Editor

Package Controll

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

CTRL + ~

Затем

CTRL + SHIFT + P

И вводим

Package Controll

Видеоурок

Sublime Text 3 — плагин Package Controll

SideBarEnhancements

Shift + CTRL + P

Package Control: Install Package

SideBarEnhancements

Emmet CSS Snippets

Установка

Shift + CTRL + P

Package Control: Install Package

Emmet CSS Snippets

Вводим следующую команду

h2{Текст заголовка}+p*2(lorem27)

И нажимаем TAB

Результат:

<h2>Текст заголовка</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente porro voluptatem rerum modi quibusdam accusantium nihil facere cupiditate quam! Ipsa unde repellendus officiis quo, cum obcaecati saepe!</p>
<p>Pariatur laudantium consequatur ratione quaerat reiciendis modi magnam voluptas ipsa, deleniti explicabo sequi aspernatur vitae, ut cumque nemo, tempore doloremque atque quia assumenda ipsam fugiat perspiciatis autem.</p>

Как видим было создано два абзаца, которые автоматически заполнились текстом по двадцать семь слов в каждом.

Второй пример. Вводим следующую команду

p{Простой список}+ul.class1*>li.class1*7>a[href=»#»](lorem2)

И нажимаем TAB

Результат:

<p>Простой список</p>
<ul>
<li><a href=»#»>Lorem ipsum.</a></li>
<li><a href=»#»>Nulla, vero.</a></li>
<li><a href=»#»>Nam, quasi!</a></li>
<li><a href=»#»>Aut, alias!</a></li>
<li><a href=»#»>Minima, laboriosam. </a></li>
<li><a href=»#»>Laudantium, saepe.</a></li>
<li><a href=»#»>Dolorum, at.</a></li>
</ul>

Как видим внутри ul было создано семь li a, которые автоматически заполнились текстом по два слова в каждом.

Документация по плагину

docs.emmet.io

Видеоурок

Sublime Text 3 — Emmet CSS Snippets

AdvancedNewFile

Чтобы открыть командную строку введите

CTRL + ALT + N

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

Например:

heihei.ru\index.html

Результат:

Видеоурок

Sublime Text 3 — плагин AdvancedNewFile

ColorPicker

Я не смог найти

Видеоурок

Sublime Text 3 — плагин ColorPicker

Колонки

Чтобы разделить окно на несколько колонок переходим в View → Layouts

Или нажимаем

ALT + SHIFT + 2

ALT + SHIFT + 3

И так далее, в зависимости от того, сколько Вы хотите колонок.

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

Чтобы закомментировать строку зажмите

CTRL + /

Обратите внимание на строки 8 и 10

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

CTRL + SHIFT + /

Обратите внимание на строки с 13 по 21 — это закомментированный тэг ul

Множественное выделение

Чтобы курсор стал активным сразу на нескольких строках зажмите CTRL ALT и стрелку вверх или вниз

CTRL + ALT + ↑

Чтобы выделить содержимое какого-то тэга нажмите

CTRL + SHIFT + A

Горячие клавиши Sublime Text Editor

Создание сниппетов

Tools → New Snippet

Вставить нужный код между тэгами content

Раскомментировать tabTrigger и вставить туда название сниппета, которое Вы придумываете сами и будете потом использовать. Нужно сохранить сниппет.

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

Видеоурок

Sublime Text 3 — плагин ColorPicker

Sublime 3 ошибка установка управление пакета

Go back to the installation page and follow the instructions in the Manual section:

Click the Preferences > Browse Packages… menu
Browse up a folder and then into the Installed Packages/ folder
Download Package Control.sublime-package and copy it into the Installed Packages/ directory
Restart Sublime Text

This should install Package Control for you without any problems.

EDIT

Please read through this issue here, and follow wbond’s instructions to install from git. First, completely quit Sublime, then remove all traces of Package Control — any folders in ~/. config/sublime-text-3/Packages, any files in ~/.config/sublime-text-3/Installed Packages, the folder ~/.config/sublime-text-3/Packages/User/Package Control.cache, and any files in ~/.config/sublime-text-3/Packages/User that start with Package Control.* — Package Control.last-run, Package Control.sublime-settings, Package Control.system-ca-bundle, and anything else you can find.

Next, assuming you have git installed (run sudo apt-get install git if you don’t), switch to ~/.config/sublime-text-3/Packages and run

git clone https://github.com/wbond/package_control.git "Package Control"

to clone the master repo (make sure you’ve completely quit Sublime before running this). Restart Sublime and see if everything installs properly. If not, follow the instructions for creating a debug log, restart Sublime to generate the log, open the Console by selecting View -> Show Console, then copy the entire contents (it’ll be a lot) into a new file. Open a new issue and describe exactly what the problem is, including all the details above and the fact that you just installed from the master branch, and paste in the contents of the debug log (make sure you put it in a code block by adding triple backticks «` before and after). Will Bond (wbond) should get in touch with some suggestions.

Good luck!

Note for users of other operating systems: I’m not sure if this is a Linux-only problem or not, but in case it isn’t, Mac users will find Packages and Installed Packages in ~/Library/Application Settings/Sublime Text 3, while Windows users with standard (i.e., non-portable installs) will find them in your user directory under AppData\Roaming\Sublime Text 3. For Windows portable installs, the directories should be in your install directory under Data.

Настройка Sublime Text для Python — TechCave

Программисты любят спорить о том, у кого «лучшая» среда разработки — какие инструменты лучше? Должен ли я использовать текстовый редактор или полноценную среду IDE? Какие плагины и пакеты следует использовать? Это все правильные вопросы, но суть в том, что: после того, как вы выбрали предпочтительный текстовый редактор/IDE, вы должны потратить значительное количество времени на его настройку и понять, как извлечь максимальную пользу из этого, так как это сэкономит вам время в будущем.

Мой выбор текстового редактора — Sublime Text 3. В этой статье я дам вам пятиэтапное руководство по настройке Sublime Text 3 для разработки с помощью Python.

1. Установка

Вы можете скачать и установить Sublime Text 3 здесь.

После установки первое, что вы захотите сделать, это установить диспетчер пакетов. Менеджер пакетов позволяет добавлять и удалять сторонние плагины, которые улучшат вашу среду разработки.

Откройте консоль Sublime с помощью CTRL + `. Затем скопируйте и вставьте код отсюда в консоль и нажмите enter. Установка пакета займет несколько секунд. После этого вы можете открыть командную панель с помощью CTRL + SHIFT + P и ввести имя пакета. Список параметров должен выглядеть следующим образом:

Если вы видите параметры управления пакетами, то вы знаете, что все правильно установили!

2. Рекомендуемые Sublime Text 3 плагины

Одна из лучших вещей в Sublime Text заключается в том, что разработчики могут использовать сторонние плагины для улучшения своей среды разработки. Нажмите «CTRL + SHIFT + P» и выберите «Package Control: Install Package». Затем вы cможете найти плагины, которые я рекомендую вам использовать для разработки в Python:

Anaconda

Anaconda — чрезвычайно мощный пакет Python для Sublime. Он предлагает:

Автодополнение кода Python
Python linting (подчеркивает как синтаксические ошибки, так и нарушения PEP8)
Документация Python
McCabe — проверка сложности
и много чего еще

Djaneiro

Djaneiro предлагает подсветку синтаксиса для HTML-шаблонов Django и автоматическое заполнение табуляцией для синтаксиса языка Django, например {% block%} {% endblock%}.

После того, как вы установили Djaneiro, откройте HTML-файл, а в правом нижнем углу выберите язык, который используется в данный момент, затем выберите Djaneiro -> HTML (Django), чтобы обеспечить выделение синтаксиса Jango Template:

Автодополнение означает, что вам не нужно записывать фрагменты кода снова и снова. Например:

var + TAB генерирует {{}}.
block + TAB генерирует {% block%} {% endblock%}
url + TAB генерирует {% url%}
static + TAB генерирует {% static%}

Полный список автодополнений в Djaneiro доступен здесь.

SideBar Enhancement

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

Requirements Txt

Это простой плагин, который предлагает подсветку синтаксиса для файлов requirements.txt. Используй это!!!

All AutoComplete

All AutoComplete расширяет автодополнение по умолчанию.

GitGutter

GitGutter помещает поле в Sublime Text, которое указывает, была ли строка добавлена, удалена или отредактирована. Это полезно для отслеживания внесенных изменений в предыдущие коммиты.

Другие (JavaScript/CSS) пакеты

Есть куча пакетов JavaScript/CSS, которые я также использую для моей разработки в Python Sublime Text 3. Я не буду подробно останавливаться на них, но вы все равно должны их посмотреть:

AngularJS — предлагает подсветку синтаксиса AngularJS и автодополнение.
jQuery — предлагает подсветку синтаксиса jQuery.
Trimmer — пакет для удаления конечных пробелов
CSS3 — подсветка синтаксиса CSS3 и автодополнение
Sass — подсветка синтаксиса Sass и автодополнение
Color Highlighter — показывает шестнадцатеричные, RGB и буквенные обозначения цвета для соответствующего цвета. Например, синий цвет в таблице стилей CSS будет выделен синим цветом, так что вы получите визуальное представление о цвете.

3. Макет

Большинство вариантов компоновки доступны в меню view.

В Views -> Columns вы можете переключить представление, чтобы отобразить 1, 2, 3 или 4 столбца, 1 или 2 строки или сетку 2 * 2. Мое предпочтение состоит в том, чтобы использовать раскладку из двух столбцов.

Другие настройки макета, которые вы, возможно, захотите рассмотреть:

используйте CTRL + KB для переключения боковой панели (я предпочитаю держать ее открытой всегда)
нажмите F11 для переключения полноэкранного режима
перейдите в меню View -> Ruler, чтобы выбрать отображаемый правый край. Я кодирую в соответствии со стандартами PEP8, поэтому установил правую границу в 80 символов.
перейдите в View -> Hide Minimap, чтобы скрыть мини-карту! Я нахожу ее раздражающей.

4. Горячие клавиши

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

CTRL + K: удаляет текущую строку.
CTRL + X: разрезает текущую строку.
CTRL + SHIFT + UP перемещает выделенный текст вверх.
CTRL + SHIFT + DOWN перемещает выделенный текст вниз.
CTRL + W: закрывает текущую вкладку.
CTRL + KK: удаляет все от курсора до конца строки.
CTRL + F: найти.
CTRL + H: найти и заменить.
CTRL + KU: преобразование выбранного текста в верхний регистр.
CTRL + KL: преобразование выбранного текста в нижний регистр.
CTRL + KB: переключить боковую панель.
CTRL + [: отменить текущую строку.
CTRL +]: отступ текущей строки.
CTRL + M: перейти к закрывающей скобке или нажмите еще раз, чтобы перейти к открывающей скобке.
CTRL + /: комментарий/раскомментирование текущей строки или выбора.

HTML-горячие клавиши:

ALT +.: Завершает текущий тег HTML.
ALT + SHIFT + W: обернуть тег (по умолчанию — <p>).

Некоторые специфичные горячие клавиши:

ALT + SHIFT + [NUMBER]: разбивает представление на столбцы [NUMBER], где [NUMBER] — 1-4.
ALT + SHIFT + 8: разбивает представление на сетку 2×2.
CTRL + 0: фокусируется на боковой панели.
CTRL + 1-4: фокусируется на столбце 1-4.
CTRL + SHIFT + 1-4: перемещает файл в столбец 1-4.

Полный список сочетаний клавиш Sublime Text 3 доступен здесь.

5. Консоль

Когда я впервые начал программировать на Python, я использовал Enthought Canopy. По умолчанию это отличная встроенная консоль IPython. Настройка консоли ST3 немного сложнее, но это того стоит.

Следуя этому видео на YouTube, откройте командную панель, используя CTRL + SHIFT + P и выберите install package. Установите пакет SublimeREPL. Затем перейдите в Preferences -> Browse Packages -> SublimeREPL -> Config -> Python. Откройте файл Main.sublime-menu. Найдите «id»: «repl_python_run» с помощью CTRL + F и добавьте параметр «-i» в раздел «cmd» под «args».

Затем перейдите в Tools -> Build System -> New Build System и введите код из этого ответа на StackOverflow:

{
    "target": "run_existing_window_command", 
    "id": "repl_python_run",
    "file": "config/Python/Main.sublime-menu"
}

Сохраните файл как Python-REPL.sublime-build. Затем создайте простой .py-файл, выберите свою систему сборки с помощью Tools -> Build System -> Python-REPL и используйте CTRL + B для запуска вашей программы. Теперь переменные из вашей программы будут доступны в появившейся консоли.

Вот и все.

Настройка Sublime Text 3 (приквел к курсу)

Краткое описание действий из видео:

Заходим на сайт https://www.sublimetext.com/ и скачиваем версию для Вашей ОС.
Устанавливаем Sublime Text 3 и попутно переходим на сайт https://packagecontrol.io/installation и выделяем текст во вкладке «Sublime Text 3». Этот текст нужно вставить в консоль редактора. Консоль вызываем сочитанием клавиш ctrl+~(тильда). Вставляем в нее код и жмем Enter. Package Control установлен.
После этого нам становится доступна другая комбинация клавиш, которая собственно открывает панель установки плагинов. Жмем ctrl+shift+p, и в появившейся строке поиска вводим: «Package Control: Install Package». Жмем Enter. Это команда для запуска установки плагинов.
После этого в строке вводим названия плагинов. В видео рассказано более детально, посмотрите.
Возьмем пример. Вводим в строке Emmet и жмем Enter. После того как у вас откроется текстовый документ — плагин установлен и готов к работе.
Тестирование плагинов запечатлено на видео.
Далее переходим к Browser-Sync. Для его работы нужно скачать библиотеку node.js. Переходим на сайт https://nodejs.org/en/ и скачиваем последнюю версию, после чего устанавливаем.
Далее, на сайте https://www.browsersync.io/ нас ждет специальный код, который нужно вставить в командную строку вашей операционной системы. Как это делать: либо посмотрите как в видео, либо нажимайте комбинацию Win(клавиша со значком windows)+R, у вас откроется маленькое окошко, в которое нужно ввести «cmd» и нажать Enter.
Когда консоль откроется, нужно вставить в нее код с сайта, нажать Enter и дождаться завершения установки.
После установки ваш browser-sync готов к работе. Для того чтобы его запустить, нужно выбрать папку с вашим проектом. Зажать клавишу shift и в любом свободном месте папки кликнуть правой кнопкой мыши. В окошке появится ранее невидимая команда «открыть окно команд». Это та же самая командная строка, но она применяется конкретно к папке, в которой была запущена.
Вставляем в нее код
browser-sync start —server —files «./**/*.*» —no-notify
Это базовый код для запуска browser-sync. Изучите технологию более детально, чтобы прописывать этот код применительно для определенного вашего проекта.
Тем не менее, после нажатия Enter у нас через какое-то время откроется браузер (или вкладка в нем, если он был открыт). Эта вкладка — содержимое файла index.html. Теперь, вводя какой-то html-код в этот файл и нажимая ctrl+S (сохранение), Вы мгновенно увидите обновления Вашей верстки.

Спасибо Всем за внимание, подписывайтесь на блог, канал на YouTube, добавляйтесь Вконтакте!
Следующий урок (по единицам измерения rem) уже совсем скоро.

ВАЖНО:

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

Метки: урок, youtube, sublime text 3, настройка, плагины, browser-sync

sergeche / emmet-sublime: Emmet для Sublime Text

Официальный плагин Emmet для Sublime Text.

Как установить

Предупреждение: этот плагин может вообще не работать в некоторых ОС, так как он написан на JavaScript и использует двоичные файлы PyV8 и Google V8 для запуска. Если у вас возникли проблемы или сбои редактора, заполните проблему.

с контролем пакетов:

Запустите команду «Управление пакетами: Установить пакет», найдите и установите плагин Emmet .
Перезапустить редактор ST (если требуется)

Вручную:

Клонируйте или загрузите репозиторий git в папку пакетов (в ST найдите пункт меню «Обзор пакетов …», чтобы открыть эту папку)
Перезапустить редактор ST (если требуется)

ПРЕДУПРЕЖДЕНИЕ : Когда плагин установлен, он автоматически загрузит требуемый двоичный файл PyV8, поэтому вам придется немного подождать (см. Загрузка двоичного файла PyV8, сообщение в строке состояния). Если у вас возникли проблемы с автоматическим загрузчиком PyV8, попробуйте установить его вручную.

Доступные действия

Увеличение / уменьшение Число действий:

Увеличение на 1: Ctrl + ↑
Уменьшение на 1: Ctrl + ↓
Увеличение на 0,1: Alt + ↑
Уменьшение на 0,1: Alt + ↓
Увеличение на 10: ⌥⌘ ↑ / Shift + Alt + ↑
Уменьшение на 10: ⌥⌘ ↓ / Shift + Alt + ↓

Поддержка расширений

Вы можете легко расширить Emmet новыми действиями и фильтрами или настроить существующие.В Emmet.sublime-settings определите параметр extension_path , и Emmet загрузит все файлы .js и .json в указанную папку при запуске.

Значение по умолчанию extension_path — ~ / emmet , что указывает на папку emmet внутри домашней папки пользователя ОС.

Кроме того, вы можете создавать разделы с именами файлов расширений (например, фрагменты , , настройки , и синтаксис , профили ) внутри пользовательского Emmet.sublime-settings и напишите туда свои настройки. Примеры см. В исходном файле настроек.

Переопределение сочетаний клавиш

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

Если вас не устраивает раскладка клавиатуры по умолчанию, вы можете отключить отдельные сочетания клавиш с настройкой disabled_keymap_actions для Emmet.sublime-settings файл.

Используйте список имен действий, разделенных запятыми, для которых по умолчанию сочетания клавиш должны быть отключены. Например, если вы хотите освободить ярлыки Ctrl + E («Расширить аббревиатуру») и Ctrl + U («Обновить размер изображения»), вы должны установить следующее значение:

  "disabled_keymap_actions": "expand_abbreviation, update_image_size"

Вы должны обратиться к файлу Default (Your-OS-Name) . sublime-keymap , чтобы получить идентификаторы действий (ищите args / action key).

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

  "disabled_keymap_actions": "все"

Не то, чтобы если вы отключили какое-либо действие, подобное этому, и создаете собственное сочетание клавиш, не должно использовать emmet_action_enabled.ACTION_NAME контекст, поскольку это клавиша, отключающая действие.

Как расширять сокращения с помощью Tab в других синтаксисах

Emmet расширяет сокращения только в ограниченном синтаксисе: HTML, CSS, LESS, SCSS, Stylus и PostCSS.Причина ограничения обработчика Tab ограниченным списком синтаксиса заключается в том, что он нарушает собственные фрагменты Sublime Text.

Если вы хотите использовать аббревиатуру Tab в других синтаксисах (например, JSX, HAML и т. Д.), Вам нужно настроить параметры сочетаний клавиш: добавьте команду expand_abbreviation_by_tab для tab ключ для необходимого синтаксиса селекторы области . Чтобы получить текущий селектор области синтаксиса, нажмите ⇧⌃P (OSX) или Ctrl + Alt + Shift + P , он отобразится в строке состояния редактора.

Перейдите к Preferences > Key Bindings - User и вставьте следующий фрагмент JSON с правильно настроенным селектором области вместо SCOPE_SELECTOR token:

 {
  "ключи": ["вкладка"],
  "command": "expand_abbreviation_by_tab",

  // помещаем селекторы синтаксиса через запятую, для которых
  // вы хотите расширить аббревиатуры Emmet до ключа "операнд"
  // вместо SCOPE_SELECTOR.
  // Примеры: source.js, text.html - исходный код
  "context": [
    {
      "операнд": "SCOPE_SELECTOR",
      "оператор": "равно",
      "match_all": правда,
      "ключ": "селектор"
    },

    // запускаем, только если нет выделенного текста
    {
      "match_all": правда,
      "ключ": "пустой_выбор"
    },

    // не работает, если есть активные табуляторы
    {
      "оператор": "равно",
      "операнд": ложь,
      "match_all": правда,
      "ключ": "has_next_field"
    },

    // не работает, если всплывающее окно завершения видно и вы
    // хочу вставить завершение с помощью Tab. Если ты хочешь
    // расширять Emmet с помощью Tab, даже если всплывающее окно видно -
    // удаляем этот раздел
    {
      "операнд": ложь,
      "оператор": "равно",
      "match_all": правда,
      "ключ": "auto_complete_visible"
    },
    {
      "match_all": правда,
      "ключ": "аббревиатура is_abbreviation"
    }
  ]
}

Обработчик клавиши Tab

Плагин

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

По умолчанию обработчик вкладок работает в ограниченных областях синтаксиса : HTML, XML, HAML, CSS, SASS / SCSS, LESS, PostCSS и строки в языках программирования (например, JavaScript, Python, Ruby и т. Д.). Это означает:

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

Для точной настройки обработчика клавиш Tab вы можете использовать следующие настройки в пользовательском файле Emmet.sublime-settings :

disable_tab_abbreviations_for_scopes — разделенный запятыми список областей синтаксиса, в которых должен быть отключен обработчик клавиши Tab. Например, если вы хотите отключить обработчик внутри строк языков программирования и синтаксиса HAML, ваша настройка будет выглядеть так:

 "disable_tab_abbreviations_for_scopes": "текст.haml, строка "

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

Если вас не устраивает поведение обработчика вкладок Emmet, вы можете отключить его: просто добавьте «disable_tab_abbreviations»: true в пользовательский файл Preferences. sublime-settings .

Отключить автоматическую вставку префиксов поставщиков

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

 {
  "предпочтения": {
    "css.autoInsertVendorPrefixes": ложь
  }
}

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

Emmet — бесценный инструмент экономии времени для всех, кто пишет HTML и CSS. Благодаря Sublime Text вам потребуется совсем немного усилий, чтобы установить и начать использовать прямо сейчас.

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

Что такое Эммет?

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

Это означает, что с помощью Emmet мы можем:

Вводить HTML и CSS с помощью простых ярлыков
Экономить время на написание кода
Упростить жизнь

Довольно полезно, правда? Давайте узнаем, как установить его с помощью Sublime Text.

Установка подключаемых модулей

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

Когда у вас есть фрагмент для своей версии Sublime, запустите программу и откройте консоль ( ⌘ + ` в OS X). Вставьте предполагаемый код, нажмите , введите , затем наблюдайте, как Package Control устанавливает себя как по волшебству.

После установки Package Control вы можете загрузить дополнительные плагины, открыв палитру команд ( Shift + ⌘ + P в OS X) и набрав «Install Package», а затем отправив лучший результат. Затем открывается аналогичное меню со списком пакетов, доступных для установки. Введите здесь «Эммет» и выберите лучший результат.

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

Теперь, когда у нас установлен Emmet, мы, наконец, можем начать получать удовольствие от некоторых из его невероятных ярлыков. Формула использования Emmet очень проста:

Введите поддерживаемый ярлык
Нажмите Tab

И все! Ознакомьтесь с некоторыми из наиболее полезных ярлыков, которые вы можете использовать прямо сейчас.

Улучшение

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

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

Настройка и использование Emmet | Скотт Граннеман

Установка и настройка

Эммет для кронштейнов

Установка

Установить расширение Emmet от Сергея Чикуйонка

Отладка> Обновить с расширениями

Настройки

Создайте папку в документах для хранения ваших предпочтений Emmet: Emmet

Emmet> Настройки…

Для папки расширений введите следующее:

Mac: / Пользователи / rsgranne / Documents / Emmet
Windows: C: \ Users \ Ваше имя \ Documents \ Emmet

синтаксис Профили. json
Создайте файл JSON в папке Emmet с именем syntaxProfiles.json и введите в него следующее:
{ "html": { "tag_nl": "правда" } }
Имя tag_nl определяет, выводит ли Эммет каждый тег на новой строке с отступом. Другими словами, вот так:

Поскольку я хочу, чтобы Эммет выводил каждый тег в новой строке с отступом, я использую значение true .
preferences.json
В папке Emmet создайте еще один файл JSON с именем preferences.json и поместите в него следующее:
{ "format.forceIndentationForTags": "адрес, статья, в сторону, аудио, цитата, тело, холст, div, dl, figcaption, figure, footer, form, head, header, html, iframe, main, map, nav, object, ol , p, pre, script, section, style, table, tbody, td, tfoot, th, thead, tr, ul, video " }
Сохраните настройки . json и закройте его.
Emmet для Sublime Text
Используйте Package Control для установки Emmet.
Если вас попросят установить PyV8, разрешите это.
Перезапустить Sublime Text.
По умолчанию Emmet расширяет аббревиатуры табуляцией в документах HTML, XML, HAML, CSS, SASS, LESS и Stylus. Однако это означает, что вы не можете использовать некоторые фрагменты кода ST2. Прочтите https://github.com/sergeche/emmet-sublime#tab-key-handler о том, как работает обработчик вкладок и как его настроить.
В документах HTML и XML Эммет переопределяет клавишу Enter для вставки форматированных разрывов строк между открывающими и закрывающими тегами. Чтобы отключить обработчик клавиш Enter, добавьте следующий параметр в файл настроек пользователя:
«disable_formatted_linebreak»: истина
Emmet имеет ряд действий с сочетаниями клавиш, которые могут заменять те, которые вы обычно используете (например, Ctrl-E или Ctrl-Down). Прочтите главную страницу проекта, чтобы получить список доступных действий и сочетаний клавиш, а также способы их отключения: https: // github.com / sergeche / emmet-sublime.
Редактировать Sublime Text> Настройки> Настройки пакета> Emmet> Настройки — Пользователь:
{ // Путь к папке, в которой Эммет должен искать расширения // http://docs.emmet.io/customization/ "extension_path": "/ Users / rsgranne / Dropbox / Apps / Brackets / Emmet / Extensions" }
Эммет для BBEdit
Перейдите на https://github.com/mattienodj/zencoding_BBEdit.
Нажмите «Клонировать» или «Загрузить» и выберите «Загрузить ZIP», в результате чего должен быть загружен файл с именем zencoding_BBEdit-master.почтовый индекс .
Дважды щелкните ZIP-архив, чтобы развернуть его.
Использование Emmet
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 расширение. Вы можете изменить настройки, посетив эти файлы и изменив значения, отличные от их значений по умолчанию.
Для редактирования настроек 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, но управление пакетами — это универсально рекомендуемый метод получения, управления и удаления пакетов для вашей установки.
Посетите сайт загрузки Package Control.
Найдите консольную команду Sublime Text (убедитесь, что выбрана правильная версия Sublime Text) и скопируйте ее в буфер обмена.
Откройте консоль 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 ) делает это несложно.
Поместите курсор где-нибудь в слове, которое нужно изменить.
Используйте «Быстрое добавление далее», чтобы расширить ваш (пустой) выбор до текущего слова.
Снова используйте «Быстрое добавление Далее», чтобы добавить следующий экземпляр к выбранному, который обычно отключается.
Продолжайте «Быстрое добавление Далее» сколько угодно раз. Используйте Quick Skip Next ( Ctrl + K, Ctrl + D / Cmd + K, Cmd + D ), чтобы перепрыгивать через экземпляры, которые вы хотите оставить в покое. Если вы зайдете слишком далеко и выберете ошибку, нажмите Ctrl + U / Cmd + U , чтобы отменить.
Внесите свою модификацию, только один раз.
Другой пример, который часто встречается при создании XML , — это использование фрагмента «Перенос с тегом» ( Alt + Shift + W / Ctrl + Shift + W ).Этот фрагмент оборачивает выбранные элементы в тег
, при этом имя тега выделяется как в начальном, так и в конечном тегах. Если элемент p не тот, который вам нужен, просто введите. Оба тега заменены. Это огромное преимущество для автора XML , который существенно использует множественный выбор, даже если вы почти не подозреваете об этом, когда используете эту функцию.
Выбор столбца позволяет выбрать прямоугольную область файла. Это невероятно полезно при редактировании структурированного документа.Есть много способов сделать это (см. Документацию Sublime Text для почти исчерпывающего списка), но наиболее часто используемым является удерживание Shift при щелчке и перетаскивании правой кнопкой мыши (в OS X удерживайте вниз Опция при перетаскивании правой кнопкой мыши). См. Документацию по сочетаниям клавиш.
Выбор столбца становится еще более полезным при использовании в сочетании с сочетаниями клавиш для перемещения и выделения, такими как Ctrl + Shift + Right (выделение до конца слова) и Shift + End (выделение до конца строки).
Еще один пример потрясающе полезности множественного выбора — это копирование и вставка из файла другого формата. Предположим, вы скопировали несколько строк текста и хотите, чтобы каждая такая строка стала элементом списка в вашем источнике MathBook XML .
Используйте выбор столбца, как описано выше, для выбора каждой строки отдельно.
Используйте «Перенос с тегом», чтобы обернуть каждую из выбранных строк совпадающими тегами начала / конца
одновременно.
Теперь вам нужно снова выбрать строки, чтобы обернуть их совпадающими тегами begin / end
. Сначала нажмите Shift + End , чтобы выбрать конец строки.
Если ваши строки обернуты, вам может потребоваться снова нажать Shift + End , чтобы добраться до конца обернутых строк.
Теперь вы выбрали слишком далеко:
также выбраны. Удерживая Ctrl + Shift , дважды нажмите стрелку влево (отменить выделение по слову). (После небольшой практики подобные шаги кажутся автоматическими.)
Используйте Перенос с тегом, чтобы обернуть каждую из выбранных строк совпадающими тегами начала / конца
одновременно.
Это требует небольшой работы с мышью, но экономия на нажатиях клавиш может быть значительной. (Пакет 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
Символ > обозначает дочерний элемент, квадратные скобки (с назначением или без него) обозначают список атрибутов, $ обеспечивает нумерацию на основе строк, а * указывает перенос каждой выбранной строки указанным поддеревом. (поэтому каждая строка будет заключена в

вместо всего выделения).
Emmet может создавать большую иерархию вложенных тегов XML на различных уровнях, используя этот синтаксис сокращения. Например, предположим, что вы знаете, что вам нужно будет создать структуру тегов следующей формы.
<раздел xml: id = ""> <введение>

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

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

По общему признанию, это многовато, но в этом есть смысл.заключение> p
Набрав эту строку и поместив курсор справа от нее, нажмите Ctrl + E (или Tab , если вы не отключили значение Emmet по умолчанию). Вся древовидная структура создается немедленно, с позициями табуляции для отсутствующих значений атрибутов и для каждой совпадающей пары начало / конец.
Команда «Расширить сокращение по мере ввода» позволяет настраивать такие сокращения в интерактивном режиме. Нажмите Ctrl + Alt + Enter и введите указанное выше выражение в минибуфер внизу окна, наблюдая за появлением дерева по мере ввода.
Emmet — очень мощный пакет, который может гораздо больше, чем описано здесь. Однако по умолчанию он в основном адаптирован для написания CSS и HTML. Настройка его для более непосредственной работы с MathBook XML — текущий проект. Вы можете узнать больше об Emmet, изучив документацию Emmet или покопавшись в файлах настроек и Keymap.
Подраздел D.1.7 MBXTools — пакет Sublime Text для MathBook
XML
MBXTools — это пакет Sublime Text, предназначенный для помощи авторам, использующим MathBook XML .Это очень экспериментально и может вести себя неожиданно.
Вдохновением и большей частью кода этот пакет обязан отличному пакету LaTeXTools. Сообщите автору обо всех обнаруженных вами ошибках или функциях, которые вы хотели бы включить в MBXTools, создав проблему на GitHub.
Подраздел D.1.7.1 Установка
через Package Control.
Рекомендуется устанавливать MBXTools через Package Control. Если вы еще не установили Package Control, вам следует сделать это сначала (а затем перезапустить Sublime Text).
После установки Package Control используйте команду Install Package , чтобы найти пакет MBXTools и выбрать его на панели быстрого доступа для установки. Этот метод установки позволяет Package Control автоматически обновлять вашу установку и показывать вам соответствующие примечания к выпуску.
через git.
Вы также можете установить MBXTools через git . Измените каталоги в папку Packages . Чтобы найти папку Packages , выберите «Обзор пакетов» в меню «Настройки» (из меню «Sublime Text 3» в OS X).Убедитесь, что вы находитесь в папке Packages, и , а не в папке Packages / User .
Затем запустите
git clone https://github. com/daverosoff/MBXTools.git
и перезапустите Sublime Text (возможно, не обязательно).
Подраздел D.1.7.2 Использование
Вы можете активировать функции пакета, включив синтаксис MathBook XML . Определение синтаксиса ищет расширения файлов .mbx, , которые большинство из нас не использует (пока?).Если ваши файлы MathBook XML оканчиваются на .xml , вам нужно будет либо добавить комментарий к первой строке каждого файла (после объявления XML ):

, или вам нужно будет включить синтаксис вручную с помощью палитры команд. Чтобы включить его вручную, откройте файл MathBook XML и нажмите Ctrl + Shift + P ( Cmd + Shift + P в OS X ) и введите pretext . Выберите «Установить синтаксис: MathBook XML » из списка вариантов.
Вы должны увидеть текст «MathBook XML » в нижнем правом углу, если у вас есть видимая строка состояния (палитра команд: Переключить строку состояния).
Пока реализовано лишь несколько функций.
Если в вашем файле MBX есть разделы, нажмите Ctrl + R ( Cmd + R в OS X ), чтобы запустить команду «Перейти к символу». Вы должны увидеть панель, на которой отображаются имена всех подразделений @xml: id .
Если вы использовали @xml: id для маркировки своих материалов, попробуйте ввести
Введите chp , sec , ssec или sssec и нажмите Tab , чтобы активировать фрагменты разделения. Предусмотрен пустой элемент title и курсор, расположенный внутри него. По мере ввода поле @xml: id для раздела заполняется аналогичным текстом, отражающим вводимый вами заголовок.
Подраздел D.1.7.3 Известные проблемы
При добавлении xref вручную (без использования фрагментов или автозаполнения) вы часто будете видеть ложную ошибку «Нераспознанный формат».
Фрагмент ref не вызывает быструю панель. Должен ли он?
Рекурсивный поиск ярлыков по включенным файлам пока не реализован.
Это будет работать только для завершения xref , но не для перехода к символу.
Ничего не тестировалось на OS X или Linux.
Подраздел D.
1.8 (*) Sublime Linter Будет написано. Подраздел D.1.9 Рекомендуемые пакеты Пакетный контроль Эммет Усовершенствования боковой панели PowerCursors MultiEditUtils Текстовое тесто Git или SublimeGit SublimeLinter MBXИнструменты Настройка Sublime Text 3 для ReactJS | Адриан Ли Недавно я обновился до Sublime Text 3 и вместо того, чтобы копировать свои старые пакеты, я решил начать все заново.Я предполагаю, что у вас уже установлен диспетчер пакетов управления пакетами и вы знаете, как его использовать. Если нет, перейдите сюда: https://packagecontrol.io Первым делом я установил пакет Babel. Это довольно просто, просто найдите Babel в списке доступных пакетов и установите его. Затем установите пакет Babel Snippets . Это упрощает написание общих функций React. Опять же, это просто: просто найдите пакет Babel Snippets и установите его. Еще одна неприятная часть написания кода на React - это использование JSX или HTML-подобных тегов. Меня раздражает то, что мне всегда приходится вводить закрывающий тег вручную. К счастью, у нас есть Эммет, чтобы спасти положение. Чтобы заставить Emmet работать с файлами JSX, вам необходимо добавить следующее в файл Key Bindings - User (вы можете получить к нему доступ в Preferences ): Линтер полезен по многим причинам , но в основном это полезно для уменьшения количества ошибок и поддержания хороших практик в вашем коде.SublimeLinter позволяет добавлять плагины для линтера. Вам нужен плагин: SublimeLinter-contrib-eslint Перед установкой плагина вам необходимо установить пакет SublimeLinter, но это довольно просто сделать. Просто найдите пакет SublimeLinter . Обратите внимание, что вам также потребуется установить двоичный файл ESLint. Официальное руководство расскажет вам, как все это сделать: https://github.com/roadhump/SublimeLinter-eslint Что касается конфигурации, вы добавите .eslintrc в папки проекта. Чтобы включить ES6, JSX и модули, вам необходимо иметь следующие правила в файле конфигурации: Вероятно, вы можете сделать гораздо больше. Но эти несколько простых пакетов сделали мое программирование в 100 раз более приятным. Я верю, что это поможет и вам! пр.низар ~ Как установить SublimeText 3 с Emmet (бывший Zen Coding) в Ubuntu Как установить SublimeText 3 с Emmet (бывший Zen Coding) в Ubuntu dimanche, 30 марта 2014 г. Баш Linux Программного обеспечения Это мое первое руководство на английском языке, поэтому, если вы обнаружите какие-либо ошибки в тексте, просто игнорируйте их! В конце концов, английский - только мой третий разговорный язык. . Из этого туториала Вы узнаете, как установить SublimeText 3 вместе с двумя плагинами: Package Control и Emmet. Если вы не знаете, что такое SublimeText или Emmet, просто погуглите .. Или вы можете посмотреть это видео .. SublimeText - это просто чертовски хорошая среда IDE, а Emmet - его обязательный плагин. Это пошаговый метод установки вручную. Есть автоматизированный, но я предпочитаю этот. Это было протестировано с Ubuntu 12.04 x64, но должен работать с любой более поздней версией. Сообщите мне, если это не сработает для вас. Итак, прежде всего давайте загрузим установочный файл .deb с веб-сайта SublimeText и установим SublimeText 3: Для Ubuntu x64: wget http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3059_amd64.deb sudo dpkg -i sublime-text_build-3059_amd64.deb Для Ubuntu x32: wget http: //c758482.r82.cf2.rackcdn.ru / sublime-text_build-3059_i386. deb sudo dpkg -i sublime-text_build-3059_i386.deb SublimeText помещает свои плагины в специальную папку в папке .config в вашем домашнем каталоге ; так что давайте просто перейдем туда: Вы должны запустить SublimeText хотя бы раз, чтобы каталог был создан для вашей учетной записи; просто запустите и закройте SublimeText. cd ~ / .config / sublime-text-3 / Пакеты Просто клонируйте репозиторий git плагина Package Control в папку с тем же именем (Package Control): git clone https: // github.com / wbond / sublime_package_control.git «Управление пакетами» Клонируйте репозиторий Emmet git в папку с именем Emmet: git clone https://github.com/sergeche/emmet-sublime.git Emmet Эммету требуется Python Wrapper для Google V8 Javascript Engine, поэтому давайте создадим папку с именем PyV8 и переместимся в нее: мкдир PyV8 компакт-диск PyV8 Загрузите и извлеките необходимые файлы, как описано здесь. Для x64 Ubuntu: wget -c https: // github.com / emmetio / pyv8-бинарные файлы / raw / master / pyv8-linux64-p3.zip && \ распаковать -d linux64-p3 pyv8-linux64-p3.zip && \ rm pyv8-linux64-p3.zip Параметр -c в команде wget предназначен для возобновления загрузки, если вы ее остановили. Для x32 Ubuntu: wget -c https://github.com/emmetio/pyv8-binaries/raw/master/pyv8-linux32-p3.zip && \ распаковать -d linux32-p3 pyv8-linux32-p3.zip && \ rm pyv8-linux32-p3.zip По умолчанию SublimeText по-прежнему будет проверять наличие обновлений для pyv8 , поэтому отключите это, создав эту конфигурацию .json файл. Для x64 Ubuntu: subl ~ / .config / sublime-text-3 / Пакеты / PyV8 / linux64-p3 / config.json Для x32 Ubuntu: subl ~ / .config / sublime-text-3 / Пакеты / PyV8 / linux32-p3 / config.json И поместите это в файл и сохраните: {"skip_update": true} Это все, ребята . . Надеюсь, вам понравилось! P.S: Для форсажистов: Ubuntu x64 в одной команде, чтобы сделать все это: wget -c http: // c758482.r82.cf2.rackcdn.com/sublime-text_build-3059_amd64.deb && sudo dpkg -i sublime-text_build-3059_amd64.deb && subl && cd ~ / .config / sublime-text-3 / Packages && git clone https: // github.com/wbond/sublime_package_control.git «Управление пакетами» && git clone https://github.com/sergeche/emmet-sublime.git Emmet && mkdir PyV8 && cd PyV8 && wget -c https://github.com/ emmetio / pyv8-binaries / raw / master / pyv8-linux64-p3.zip && unzip -d linux64-p3 pyv8-linux64-p3.zip && rm pyv8-linux64-p3.zip && subl ~ / .config / sublime-text-3 / Packages / PyV8 / linux64-p3 / config.json Ubuntu x32 в одной команде: wget http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3059_i386.deb && sudo dpkg -i sublime-text_build-3059_i386.deb && subl && cd ~ / .config / sublime-text-3 / Пакеты && git clone https://github. com/wbond/sublime_package_control.git «Управление пакетами» && git clone https: // github.com / sergeche / emmet-sublime.git Emmet && mkdir PyV8 && cd PyV8 && wget -c https://github.com/emmetio/pyv8-binaries/raw/master/pyv8-linux32-p3.zip && unzip -d linux32 -p3 pyv8-linux32-p3.zip && rm pyv8-linux32-p3.zip && subl ~ / .config / sublime-text-3 / Packages / PyV8 / linux32-p3 / config.json Не забудьте вставить это во вновь созданный файл в SublimeText и сохранить: {"skip_update": true} [Как настроить входной тег Emmet для автоматического закрытия в возвышенном тексте3] Причина проблемы : Ранняя спецификация html и другие элементы разметки не должны «закрывать себя» Проблема: вызвана сама спецификация html несерьезно Решение: В отношении синтаксиса более стандартного и строгого языка XML был введен xhtml. Изолированная самозакрывающаяся этикетка :: В xhtml все изолированные теги, такие как br и img, являются замкнутыми Закрытый метод: после имени тега напишите косую черту "/", Например, —— " Логически: = . .. , Изолированная этикетка : код Логика строгая, без кода 。 Попробуйте Уменьшите количество кода Ввод с сохранением Логическая строгость 。 Аббревиатура изолированного тега Эммета не закрывается автоматически, когда он используется в возвышенном тексте3, косая черта / отсутствует, как показано ниже Чтобы сгенерировать более строгий html-код, нам нужно закрыть саму потерянную метку. Метод настройки: （1） Найдите код и скопируйте его. : В настройках - Настройки плагина - Emmet - Настройки - Настройки по умолчанию по умолчанию найдите код настройки файла грамматики "syntaxProfiles" и скопируйте его. "syntaxProfiles": { } （2） Найдите файл, в который необходимо вставить код. : Выберите «Настройки» - «Настройки плагина» - «Emmet» - «Настройки пользовательских настроек» - пользователь （3） Вставьте два фрагмента кода : Я должен не забыть написать скобки, скопировать код только что и добавить еще один код, как показано ниже "html": "xhtml", "xml": { "tag_case": "верхний", "attr_quotes": "одиночный" } { "syntaxProfiles": { "html": "xhtml", "xml": { "tag_case": "верхний", "attr_quotes": "одиночный" } } } （4） Сохранение, перезапуск, тест : Сохраните код, перезапустите sublime text3, теперь аббревиатура изолированного тега автоматически расширяется до автоматически закрытого тега, синтаксис более строгий.Профессиональный тест эффективен. поблагодарить : ♥♥♥ Если эта статья полезна для вас, вы можете лайкать, комментировать, обращать внимание, поощрять автора, спасибо за чтение O (∩_∩) O haha ~ .No related posts.