Strong-stuff.ru

Образование Онлайн
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Sublime text 3 уроки

Быстрая настройка Sublime Text 3 для вёрстки сайтов

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

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

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.

По-умолчанию Sublime Text выглядит довольно печально:

Установка Package Control в Sublime Text

Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

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

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

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

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.

Самые популярные плагины для Sublime Text:

  • Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
  • AutoFileName — дополняет код при написании путей до файлов в вёрстке;
  • Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
  • Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
  • terminus — плагин встроенного терминала Sublime Text.
  • W3​CValidators — мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

  • One Dark Color Scheme — цветовая схема для подсветки кода;
  • One Dark Material — Theme — тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

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

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

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

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

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

«C:Users<Ваш пользователь>AppDataRoamingSublime Text 3″
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Sublime text 3 уроки

Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words.

Triggered with Ctrl+P+P , it is possible to:

  • Type part of a file name to open it.
  • Type @ to jump to symbols, # to search within the file, and : to go to a line number.

These shortcuts can be combined, so tp@rf may take you to a function read_file within a file text_parser.py . Similarly, tp:100 would take you to line 100 of the same file.

Goto Definition

Using information from syntax definitions, Sublime Text automatically generates a project-wide index of every class, method and function. This index powers Goto Definition , which is exposed in three different ways:

  • A popup is displayed when hovering over a symbol
  • Pressing F12 when the caret is on a symbol
  • The Goto Symbol in Project functionality

Symbol indexing can be customized on a per-syntax basis via configuration files, allowing users to tailor the feature to their needs.

Multiple Selections

Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.

Try pressing Ctrl+Shift+L ++L to split the selection into lines and Ctrl+D +D to select the next occurrence of the selected word. To make multiple selections with the mouse, take a look at the Column Selection documentation.

Command Palette

The Command Palette holds infrequently used functionality, like sorting, changing the syntax and changing the indentation settings. With just a few keystrokes, you can search for what you want, without ever having to navigate through the menus or remember obscure key bindings.

Powerful API and Package Ecosystem

Sublime Text has a powerful, Python API that allows plugins to augment built-in functionality.

Читать еще:  Петров французский язык 1 урок

Package Control can be installed via the command palette, providing simple access to thousands of packages built by the community.

Customize Anything

Key bindings, menus, snippets, macros, completions and more — just about everything in Sublime Text is customizable with simple JSON files. This system gives you flexibility as settings can be specified on a per-file type and per-project basis.

Split Editing

Get the most out of your wide screen monitor with split editing support. Edit files side by side, or edit two locations in the one file. You can edit with as many rows and columns as you wish. Take advantage of multiple monitors by editing with multiple windows, and using multiple splits in each window.

Take a look at the View Layout menu for split editing options. To open multiple views into the one file, use the File New View into File menu item.

Instant Project Switch

Projects in Sublime Text capture the full contents of the workspace, including modified and unsaved files. You can switch between projects in a manner similar to Goto Anything , and the switch is instant, with no save prompts — all your modifications will be restored next time the project is opened.

Performance

Sublime Text is built from custom components, providing for unmatched responsiveness. From a powerful, custom cross-platform UI toolkit, to an unmatched syntax highlighting engine, Sublime Text sets the bar for performance.

Cross Platform

Sublime Text is available for Mac, Windows and Linux. One license is all you need to use Sublime Text on every computer you own, no matter what operating system it uses.

Sublime Text uses a custom UI toolkit, optimized for speed and beauty, while taking advantage of native functionality on each platform.

Sublime HQ Family

Sublime Merge

Have you seen our sister product, Sublime Merge? It’s a Git Client, done the Sublime Text way.

Sublime Text 3 для web разработки

Sublime Text 3 — это «продвинутый» блокнот для написания кода. Sublime Text имеет много плюсов, которые выделяют его среди других «продвинутых» блокнотов (например Notepad++). Он прост в использовании, выглядит очень стильно, имеет минималистичный интерфейс (минимум визуального шума) и кучу плагинов, расширяющих его функционал.

В этой стать будет подборка плагинов для Sublime Text 3, которые помогают нам в работе. Так же будут представлены некоторые настройки самого редактора и плагинов. Для начала скачиваем редактор с официального сайта. Желательно скачивать портабельную версию.

Как же настроить данный редактор под себя? А все очень просто, настройки sublime хранит в обычных текстовых файлах в меню «Preferences». Обычно файл «Settings — Default» хранит настройки по умолчанию, а «Settings — User» содержит пользовательские настройки. Механизм очень простой, просто настройки «User» перебивают настройки «Default», вот и вся магия. Сам же файл «Default» даже не пробуйте править, все равно редактор этого не позволит. За то он позволит скопировать какие-либо настройки, для того чтобы не заниматься рутинным перепечатыванием из одного файла в другой.

Ниже представлен листинг моего файла настроек.

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

Стандартные горячие клавиши меня не сильно устроили и поэтому я решил их немного подкорректировать под себя. Ниже представлен листинг моих горячих клавиш. Доступ к файлу можно получить из меню «Preferences -> Key Binding — User»

И этот файл мы немного допишем, а именно в этой статье мы сделаем 2 очень удобных макроса для console.log() и повесим их на сотетания клавишь alt+c и alt+v. А все горячие клавиши можно посмотреть тут «Preferences -> Key Binding — Default».

Важное замечание: Чтобы заработали хоткеи для навигации по файлам и миникарте, нужно сперва включить их в меню «View -> Side Bar -> Hide Side Bar» и «View -> Hide Minimap» соответственно.

Так же меня не устроила тема по умолчанию. Сильно выраженный красный цвет в коде резал мне глаза. И я решил её немгного перекрасить) В это мне помог сервис. Можно настроить любую из стандартных тем под свои вкусы. Мой вариант можно скачать по ссылке — моя тема. Далее этот файл можно сохранить и поместить в «. Sublime Text 3DataPackagesUser», зайти в эту папку можно выбрав в меню «Preferences» первый пункт «Browse Packages», откроется проводник и в нем нужно зайти в папку «User». Потом нужно активировать нашу новую тему. Для этого в меню «Preferences -> Color scheme -> User -> /Наша новая схема/». Так же можно зайти в настройки «Preferences -> Settings — User» и прописать там вот такую настройку:

Далее нужно установить самый главный плагин в «Sublime — Package Control». Вот инструкция для его установки. Он делает установку и удаление плагинов очень удобным. Так же на этом сайте можно найти много справочной информации и кучу плагинов. Нам же нужно находясь в редакторе нажать сочетание клавиш ctrl+shift+p, что вызовет контекстное меню, в поле ввода которого нужно набрать «pac» и получить примерно такой результат.

В этом списке нас интересует пункт «Package Control: Install Package». Выбираем его и перед нами откроется список плагинов доступных для установки.

Emmet

Наверное один из самых популярных плагинов для текстовых редакторов кода. Он позволяет по нажатию клавиши «TAB» (можно изменить в настройках) превращать простые сокращения в блоки html и css кода. Что очень способствует увеличению продуктивности веб-разработчика.

BracketHighlighter

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

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

и если это Вам доставляет некоторое неудобство (как например мне), то Вы можете поправить ситуацию лишь изменив одну настройку. Отправляемся в «Preferences -> Package Settings -> BracketHighlighter -> Bracket Settings User» и прописываем там следующее (число можете ставить по вкусу) и проблема будет решена :

AutoFileName

Добавляет автозаполнение путей к файлам. Теперь не нужно запоминать длинные названия картинок. Очень удобно.

AllAutocomplete

Стандартное автодополнение в редакторе работает только с текущим файлом. Данный плагин осуществляет поск по всем файлам открытым в редакторе в данный момент. Это так же значительно ускоряет написания кода.

ASCII-Decorator

Данный плагин по сочетанию клавиш ctrl+shift+k превращает выделенный текст из обычного в декоративный. Шрифт можно настроить с помощью файла настроек. Доступ к которому можно получить из меню «Preferences -> Package Settings -> ASCII-Decorator -> Settings — User». Вот содержимое моего файла настроек:

Им я пользуюсь по большей части для быстрому поиску по файлу с помощью minimap.

JavaScript Next

Плагин обеспечивает улучшенную подсветку синтаксиса, так же поддерживает стандарт EcmaScript 2015. Для того чтобы изменить подсветку синтаксиса, необходимо открыть файл с расширением .js и выбрать новый синтаксис: «View -> Syntax -> Open all with current extension as. -> JavascriptNext». Также в «Preferences -> Settings — User» и дописать в настройки :

Читать еще:  Cnc simulator уроки

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

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

Принцип работы Less в одной картинке:

Stylus

Очень продвинутый препроцессор для CSS. На ряду с LESS и Sass(SCSS). От конкурентов отличается довольно удобным и интуитивно понятным сайтом, а так же нестогим синтаксисом (можно как писать в стандартной нотации CSS, так и в нотации Sass, тоесть без лишних символов, что является предпочтительным стилем) + его полной поддержкой Emmet (за исключением некоторых неудобных моментов, но не смертельно).

Настраиваем Sublime Text 3

Sublime Text 3 — один из самых распространенных текстовых редакторов для программистов. Он предоставляет своим пользователям уникальные возможности, которых нет больше нигде. Одни из самых главных достоинств — кроссплатформенность и расширяемость.

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

Что такое Sublime Text

Для Sublime Text с первых же версий возможности были гораздо выше, чем у других редакторов. Шутка ли — полностью настраиваемый интерфейс, возможность настроить поведение программы, а не просто вводить текст? Что уж говорить о плагинах — код, написанный на Python, позволяет пользователю управлять редактором так, как укротитель змей, играя на магической дудочке, заставляет гигантского удава трепетать перед ним. Однако, как бы нам ни было жаль, именно это и отпугивает новичков — будучи не в состоянии настроить редактор, они перестают им пользоваться.

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

Сначала поговорим про внешний вид, а затем перейдем к настройке горячих клавиш и плагинов.

1. Внешний вид Sublime Text

Итак, пора запустить Sublime Text (статья про установку — тут). Многим дизайн программы нравится, другим же — нет. И сейчас перед вами встает уникальная возможность поменять интерфейс до неузнаваемости!

Самый простой с виду способ — выбрать тему через настройки. Для этого идем в меню «Preferences» -> «Color Scheme» и выбираем нужную вам тему. Но это способ лишь поменяет расцветку редактора, и ничего более.

Другой, более сложный, но верный вариант — разобраться с файлом настроек. Чтобы открыть его, перейдите в меню «Preferences» -> «Settings». И вот, перед вами не что иное, как громада текста. Но не все так сложно, как кажется! Слева — настройки по умолчанию, их трогать не надо. Их можно взять за пример. А вот справа нужно разместить свои настройки — взять, скопировать нужную строку и поменять ее значение. Основные настройки:

  1. «color_scheme» — цветовая тема. Можно выбрать из существующих, а можно скачать в папку Packages/Color Scheme — Default/.
  2. «font_face» — шрифт текста. Важно, чтобы он был в системе. Чтобы посмотреть список доступных шрифтов, откройте любой текстовый редактор, к примеру, Lible Office Writer.
  3. «font_size» — размер шрифта, устанавливающийся дробным или целочисленным значением.
  4. «font_options» — дополнительные опции шрифта типа «no_bold», «no_italic».
  5. «word_separators» — разделители слов.
  6. «line_numbers» — настройка нумерации строк.
  7. «gutter» — отображать ли «канавку» (в ней располагаются номера строк и закладки).
  8. «margin» — длина отступа от «канавки».
  9. «fold_buttons» — если навести курсор на «канавку», то будут видны треугольные стрелки, позволяющие скрыть или показать фрагмент кода между фигурными скобками. Их тут можно отключить или включить.
  10. «fade_fold_buttons» — если поставить значение false, то треугольные кнопки не будут скрываться.

Вот пример действия настроек (не забудьте сохранить файл):

Вы можете поэкспериментировать здесь сами. А мы идем дальше.

2. Настройка сочетаний клавиш

Да-да, вы не ослышались! Любой может настроить сочетания по-своему, присвоив им другие значения. Чтобы открыть файл, перейдите в «Preferences» -> «Key Bindings».

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

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

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

3. Установка Package Control

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

Package Control — предназначен для более быстрой и удобной установки плагинов. Он позволяет устанавливать их через визуализированный интерфейс, а не через код.

Для начала установим Package Control с официального сайта. Это не значит, что мы его будем скачивать!

  1. Скопируем текст из соответствующего текстового поля (в зависимости от версии Sublime Text).
  2. С помощью сочетания клавиш «Ctrl +

« вызываем встроенную в редактор консоль (да-да, есть и такое!).

  • Вставляем скопированный код в текстовое поле и ждем успешной установки.
  • Перезапускаем редактор.
  • Package Control установлен! Теперь пора разобраться с тем, как им пользоваться.

    4. Работа с плагинами в Package Control

    Чтобы запустить Package Control, необходимо набрать сочетание клавиш «Ctrl + Shift + P» и из списка выбрать элемент Package Control: Install Package.

    И перед нами долгожданная установка плагинов! Теперь есть возможность быстрого их поиска и выбора, а если выбрать другие команды для Package Control, то можно и удалять, и изменять элементы редактора. Теперь надо потренироваться на установке. Уставноим Material Theme и выполним настройки темы sublime text 3.

    1. Запускаем установщик плагинов.
    2. Набираем в поле поиска Material Theme.
    3. Нажимаем и ждем, внизу должна появиться надпись «Installing package Material Theme». В процессе установки будет запрошено добавление еще одного плагина, разрешаем.

    Чтобы применить тему, необходимо перейти в меню «Preferences» -> «Color Scheme» -> «Material Theme» -> «schemes», а далее — тема, которая вам больше всего понравится.

    Однако это еще не все. Несмотря на установку темы в качестве плагина, она активируется не до конца. Чтобы исправить это, зайдите в файл настроек и допишите следующий текст:

    «theme»: «Material-Theme.sublime-theme»,
    «color_scheme»: «Packages/Material Theme/schemes/Material-Theme.tmTheme»,
    «overlay_scroll_bars»: «enabled»,
    «line_padding_top»: 3,
    «line_padding_bottom»: 3,
    // On retina Mac
    «font_options»: [ «gray_antialias» ],
    «always_show_minimap_viewport»: true,
    «bold_folder_labels»: true,
    // Highlight active indent
    «indent_guide_options»: [ «draw_normal», «draw_active» ]

    Вид редактора после применения к нему темы:

    Неплохо, да? Настройка Sublime Text 3 почти завершена. А сейчас пора установить что-нибудь более существенное. Давайте ознакомимся с самыми популярными плагинами для Sublime Text.

    Топ 5 плагинов для Sublime Text 3

    1. Emmet

    Emmet — плагин, позволяющий сделать отображение кода более удобным. Здесь используются сочетания клавиш. К примеру, «html + tab» создает каркас документа, а «div.wrapper + tab» превратится в полноценный код:

    2. JavaScript & NodeJS Snippets

    Этот плагин представляет собой коллекцию сокращений снипсетов для JavaScript. Длина набираемого текста с помощью подсказок правда уменьшается! К примеру, вместо набора «document.querySelector(‘selector’);» можно просто набрать «qs + Tab».

    3. Advanced New File

    Зачем искать место для нового файла в неудобном дереве каталога? Данный плагин позволит быстро и эффекстивно ввести нужные данные, и файл будет создан буквально за пару нажатий клавиш!

    4. Git

    Название этого плагина говорит само за себя: вы сможете выполнять все необходимые действия в рамках Git’а, не выходя из редактора!

    5. GitGutter

    Этот плагин позволит пользователю не только обращаться с обычными командами Git, но и работать с изменением версий: отлавливать их, просматривать, сравнивать — и все в режиме реального времени.

    Выводы

    Как писать код — дело каждого. Но есть удобные вещи, которые доступны всем, и нет смысла от них отказываться! Такие редакторы, как Sublime Text, особенно важны веб-разработчикам. А пока вы можете настроить редактор под себя сами — пусть это станет ВАШ собственный Sublime Text, в который вы вложили частичку собственной души. Удачи!

    Обзор текстового редактора Sublime Text 3

    Всем привет! Сегодня хотелось бы рассказать об одном классном текстовом редакторе под названием Sublime Text 3. До этого я пользовался легковесным Notepad++ для различных конфигов и кодинга, но сейчас немного увлёкся веб-разработкой, как уже можно было понять в одной из предыдущих статей.

    Смотрел видеоуроки и обратил внимание на отсылки к текстовому редактору Sublime Text 3 (далее – ST), возможности которого слегка поражали. О некоторых из них попробую рассказать здесь, но опять же, это надо видеть или делать своими руками. При желании в YouTube можно найти множество роликов, повествующих о его богатых возможностях (и демонстрирующих всё их многообразие), я не буду создавать ещё один, а постараюсь вкратце описать то, что мне понравилось.

    Быстрый доступ к настройкам

    Чтобы не бегать по меню (которое достаточно многообразно) в поисках нужной команды, можно нажать сочетание клавиш Ctrl+Shift+P и начать набирать то, что мы хотим сделать.

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

    В примере на скриншоте я привёл команду сортировки линий. Работает изумительно! Выделяем ряд строк, нажимаем F9 и вжух-вжух! Строки отсортированы в алфавитном порядке!

    Быстрое выделение текста

    Множество вариантов выделить определённый фрагмент текста, например то, что заключено внутри скобок – Ctrl+Shift+M. Пригодится в программировании, например. Ставим курсор в любое место внутри скобок и нажимаем заветное сочетание клавиш! Редактор выделит текст по обе стороны от курсора до ближайшей пары скобок.

    Если же речь идёт о HTML/XML коде, то выделит содержимое какого-либо тега можно нажатием клавиш Ctrl+Shift+A – выделится только текст внутри конкретного тега. Это очень удобно, если имеется большая вложенность, а инденты (отступы) расставлены не очень красиво.

    Кстати, об отступах. Мало того, что они здесь гибко настраиваются, так ещё и есть возможность выделить весь текст на определённом уровне отступов. Для этого нужно запомнить сочетание клавиш Ctrl+Shift+J. Запомнить такое количество клавиш сразу тяжело, но стоит попрактиковать это пару часов в работе и всё!

    Кстати, можно выделив какой-то фрагмент текста быстро выделить и другие вхождения этого же фрагмента в тексте нажав Ctrl+D, причём тут мы сталкиваемся с таким понятием, как множественное выделение и редактирование. Теперь в тексте у нас несколько курсоров! Можно вводить и удалять текст одновременно в несколько мест! Этот способ хорош для переименования класса или переменной или перепечатки какого-либо участка текста, если использование поиска и замены нежелательно!

    Плагины

    Плагинов великое множество! А так как редактор, насколько я знаю, написан на Python, то и писать какие-то свои дополнения под силу каждому, кто знаком с языком.

    Установка плагинов достаточно проста – в уже упомянутой мной панели быстрого доступа к настройкам вводим Install Packages и попадаем в панель дополнений, где так же действует поиск. Выбрав нужное дополнение жмём Enter и оно устанавливается! Нет ничего проще!

    Плагинов великое множество! Есть и для встраивания терминала прямо в окно редактора, для работы с git, подсветки синтаксиса и ещё много чего ещё!

    Сниппеты

    Вот эта тема мне очень понравилась! Есть определённые заранее заготовленные “кирпичики”, которыми можно пользоваться для ускорения ввода текста. Кроме того, можно задавать собственные! Сейчас покажу.

    Плагины

    Ставим плагин Emmet, он помогает расширить количество сокращений удобных для вёрстки кода (вот список), переходим в редактор и напишем конструкцию вида:

    То есть класс, в который вложен ul, в который вложены li в количестве пяти штук, имеющие класс MenuItem с содержимым тега “Пункт ” и порядковый номер элемента.

    Нажимаем Tab и конструкция развернётся в

    По ссылке есть и правила, по которым преобразуются сниппеты. Там ОЧЕНЬ много материала, стоит брать на вооружение.

    Собственные сниппеты

    Мы также можем делать собственные сниппеты. Весьма несложно. Делается следующим образом:

    1. Tools ->Developer ->New Snippet
    2. Откроется новое окно с текстом вроде этого:
    3. Тут всё в принципе понятно, создаём конструкцию вида:
      Думаю понятно, что есть что. content – то, что будет вписано. tabTrigger – по какому сочетанию клавиш это вызывать. scope – область видимости, с какими типами файлов работать. Всё есть в документации.
      Я же сделал цикл for и описал там некоторую текстовую константу с тремя маркерами ввода, причём в пермое задано значение по умолчанию “0”. Символы $ тут являются служебными, и те, что относятся к тексту, приходится экранировать слешем.
    4. Сохраняем сниппет:
    5. Перезапускаем редактор, чтобы изменения вступили в силу… И пробуем! Открываем php-исходник и пишем там наше ключевое слово fori и жмём Tab:
      Сначала курсор у нас стоит в позиции с выделенным текстом 0 (это значение по умолчанию $ ), при нажатии следующего Tab, он перейдёт в позицию $ , затем $ . Таким образом мы можем расставить якоря, куда прыгать курсору для ввода текста! Также есть много служебных ключевых слов и методик, позволяющих модифицировать тело сниппета на лету. Ну я так не углубляюсь, просто пишу часто употребляемые конструкции.

    Сворачивать фрагменты файла

    Можно убрать большую “простыню” кода, если выделить фрагмент и нажать Ctrl+Shift+[ (развернуть – соответственно Ctrl+Shift+] ).

    Типовая функция, но весьма приятная.

    Навигация по CSS-свойствам

    Открываем CSS-файл и нажимаем клавиши Ctrl+R. Появится панель с полем ввода, где мы можем набрать какой-либо класс CSS, или просто перемещаться стрелочками между классами. В редакторе будет мгновенно подсвечиваться нужный участок кода:

    Нечто подобное есть и для HTML кода, правда там навигация по ID идёт.

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

    Куда же без этого?! Есть множество предустановок, например Alt+Shift+1 (так же есть цифры 2, 3, 4, 5, 8, 9)

    Ссылка на основную публикацию
    Adblock
    detector