Как выровнять код в возвышенном тексте 3
Обновлено: 21.11.2024
Sublime Text 3 (ST3) — это предыдущая версия одного из наиболее часто используемых текстовых редакторов веб-разработчиками, кодировщиками и программистами. Это редактор исходного кода с поверхностью программирования Python или API. Он может поддерживать C++ и язык программирования Python. Кроме того, любой пользователь может добавить функции с помощью подключаемого модуля.
Используйте ST3 по максимуму, воспользовавшись 25 советами и рекомендациями в этом исчерпывающем руководстве для веб-разработчиков. Узнайте не только о том, как использовать Sublime Text 3, но и о необходимых пакетах, полезных сочетаниях клавиш и многом другом.
<р>1. Пользовательские настройкиПо умолчанию в ST3 используются жесткие вкладки длиной 4 символа. Это может привести к тому, что код будет трудно читаемым, так как большие табличные отступы смещают вашу работу вправо. Я рекомендую всем разработчикам добавить это в свои пользовательские настройки ( Sublime Text 3 => Preferences => Settings – User ):
Этот параметр преобразует жесткие табуляции в пробелы, делает отступы длиной всего два символа, помещает линейку на отметку 80 символов (чтобы напомнить вам о том, что ваш код должен быть кратким) и добавляет маркеры пробелов. Вот полный список параметров предпочтений, если вы хотите продолжить настройку среды ST3.
Командная палитра ST3 позволит вам выполнять действия на панели инструментов (например, устанавливать синтаксис кода для открытого файла), не отрывая пальца от клавиатуры. Хотя командную палитру можно открыть с помощью мыши через Tool => Command Palette , лучший способ получить приглашение командной палитры — использовать сочетание клавиш CTRL/⌘-SHIFT-P .
Скриншот командной палитры в Sublime Text 3
<р>3. Панели рабочего пространства столбцов и строкСчитаете ли вы себя более продуктивным кодировщиком с несколькими открытыми файлами? ST3, как и любой хороший текстовый редактор, позволяет вам видеть открытые файлы рядом друг с другом, так что вам не придется переключаться между файлом HTML и его документом CSS:
Чтобы просмотреть панели из двух столбцов (вертикальных) рядом, используйте сочетание клавиш ALT-UP-2 (ПК) или OPTION-⌘-2 (Mac). Замените последнюю черту на «3» или «4», чтобы просмотреть три или четыре панели соответственно. Использование «5» создает сетку из 4 панелей.
Для просмотра двух рядных (горизонтальных) панелей рядом используйте сочетание клавиш SHIFT-ALT-UP-2 (ПК) или SHIFT-OPTION-⌘-2 (Mac). Замените последнюю черту на «3», чтобы просмотреть три панели соответственно.
Столбец разделен пополам с помощью функции группы ST3
Если вы хотите еще больше разделить панель, вы можете использовать функцию ST3 «Группировать». Используйте CTRL-K, SHIFT-CTRL-UP (ПК) или ⌘-K, SHIFT-⌘-UP (Mac), чтобы создать новую группу внутри панели.
<р>4. Управление пакетамиST3 поставляется с множеством готовых функций, но вы можете расширить его функциональность с помощью «пакетов» — подключаемых модулей, написанных большим сообществом ST3. Самый простой способ установить эти пакеты — использовать Package Control. Чтобы установить Package Control на ST3, следуйте инструкциям по установке на веб-сайте Package Control.
Если управление пакетами установлено успешно, вы сможете искать действия управления пакетами в палитре команд ( CTRL/⌘-SHIFT-P ):
Доступ к управлению пакетами из палитры команд
Обязательные пакеты Sublime Text 3
Примечание. Установите эти пакеты с помощью управления пакетами, открыв палитру команд (CTRL/⌘-SHIFT-P), выбрав «Управление пакетами: установить пакет» и выполнив поиск пакета по его имени. em>
<р>5. Улучшения боковой панелиУлучшения боковой панели расширяют функциональные возможности боковой панели ST3, позволяя выполнять действия с файлами и папками, которые обычно недоступны. С этим пакетом вы также сможете запускать эти действия из палитры команд.
Расширенная функциональность за счет улучшения боковой панели
Emmet значительно упрощает кодирование HTML, используя ярлыки на основе селекторов CSS. Что это значит? Убедитесь сами в GIF ниже:
Emmet не ограничивается HTML-тегами, классами и идентификаторами. Текст Lorem ipsum — это то, что часто используют веб-разработчики. Часто они обращаются к генератору lorem ipsum, но с Эмметом просто введите lorem и нажмите Tab. Хотите определенное количество слов-заполнителей (например, 100 слов lorem ipsum)? Вместо этого используйте lorem100.
Emmet также распространяется на CSS.Например, префиксы поставщиков CSS всегда доставляют неудобства, поэтому Emmet позволяет использовать сокращенную запись -bdrs для установки радиуса границы:
Пакет Git позволяет запускать команды Git (например, «Git Diff» или «Git Blame») прямо из палитры команд ST3.
Не знаете, что такое Git и как им пользоваться? Посмотрите вводное видео
Начало работы с Git и Github от General Assembly.
GitGutter показывает незафиксированные добавления, изменения и удаления рядом с номерами строк ST3:
ST3 не поставляется с родным синтаксисом SASS и поддержкой фрагментов, но пакет ST3 "SASS" добавляет их. Настоятельно рекомендуется для опытных разработчиков интерфейсов и программистов Ruby on Rails:
<р>10. Улучшенный CoffeeScript
Кроме того, в ST3 нет поддержки синтаксиса и фрагментов для CoffeeScript, поэтому этот пакет заполняет этот пробел:
<р>11. Пользователи командной строки OSX
Если вы используете Mac и терминал, текстовый редактор Sublime также включает инструмент командной строки subl, который позволит вам открывать текстовый редактор непосредственно из терминала. Запустите следующую команду в своем терминале, чтобы настроить этот ярлык:
Если вы используете Homebrew или /usr/local/bin находится в вашем $PATH, выполните следующую команду:
Изучение сочетаний клавиш ST3 превратит вас из пользователя Sublime в эксперта по Sublime. Вот несколько любимых:
<р>12. Несколько курсоровМножественные курсоры — уникальная функция Sublime Text. Это позволяет вам печатать в нескольких местах одновременно, экономя время на разработку. Чтобы активировать несколько курсоров, поместите курсор на слово, которое хотите выделить, и нажимайте CTRL/⌘-D, пока не выделите все нужные слова. Вы также можете создать несколько курсоров с помощью CTRL/⌘-ЩЕЛЧОК МЫШИ во всех местах, где вы хотите разместить курсор.
<р>13. Перейти к чему угодноПодобно палитре команд, в ST3 есть функция Goto Anything (произносится как «перейти к»), которая позволяет перейти к определенному файлу, строке или определению метода. Откройте панель поиска Goto Anything с помощью CTRL/⌘-P. Чтобы переключаться между файлами, начните вводить имя файла. Поскольку это нечеткий поиск, поисковый запрос не обязательно должен точно соответствовать имени, и вам не нужно вводить полный путь к файлу:
<р>14. Перейти к строке в файлеПереход к чему-либо позволяет не только перейти к файлу, но и перейти к определенной строке в файле. Если вы хотите перейти к строке в новом файле, просто откройте Goto Anything и введите двоеточие, за которым следует номер строки (например, :18 для строки 18). Чтобы перейти к строке в другом файле, введите имя файла, затем двоеточие и номер строки:
<р>15. Перейти к определению в файлеЕсли вы хотите перейти к определению класса, метода или функции в файле, Goto Anything имеет синтаксис, аналогичный переходу к строке. Вместо двоеточия в определении перехода используется символ @. Вы получите список всех определений в выбранном вами файле, и, введя имя одного из них и нажав ENTER, вы перейдете к данному определению:
<р>16. Режим без отвлекающих факторовИногда быть самым продуктивным программистом или разработчиком внешнего интерфейса означает избавиться от всех отвлекающих факторов. Никаких других приложений, окон, вкладок, боковых панелей и меню. Текстовый редактор Sublime предлагает простой способ сделать это в режиме без отвлечения внимания. Запустите его с помощью SHIFT-F11 (ПК) или ⌘-CTRL-SHIFT-F (Mac):
<р>17. Скрыть/показать боковую панель
Боковая панель удобна для отображения файлов и структуры каталогов, но иногда для кода требуется немного больше места в окне. Использование сочетания клавиш CTRL/⌘-K, CTRL/⌘-B (в таком порядке) переключит боковую панель. Помните, что боковая панель будет видна только в том случае, если у вас открыто несколько файлов или папок.
<р>18. Быстро прокомментируйте свой кодЭто полезный совет, если вы постоянно комментируете свой код или временно проверяете, как отключение блока кода влияет на ваш проект. Чтобы быстро прокомментировать код в ST3, выделите код и используйте CTRL/⌘-/ . Если вы не выделите какой-либо код, использование этого сочетания клавиш закомментирует всю строку.
Мы уже видели, как выделить слово ( CTRL/⌘-D ), но в ST3 есть несколько других полезных вариантов выбора.
<р>19. Выбор всей строкиЧтобы выбрать всю текущую строку: CTRL/⌘-L .
<р>20. Выбор кода с аналогичным отступомЧтобы выбрать весь код с непосредственным отступом: CTRL/⌘-SHIFT-J .
21. Выделение всего внутри тега HTML
Чтобы выбрать все внутри текущего HTML-тега: CTRL/⌘-SHIFT-A
22. Быстрый отступ
Разработчики знают о важности отступов, поскольку они делают ваш код разборчивым и понятным. Если вы хотите увеличить отступ текущей строки, используйте CTRL/⌘-] . Для уменьшения отступа используется другая клавиша с квадратными скобками ( CTRL/⌘-[ ).
23. Вставка с отступом
Если вы копируете/вырезаете код с отступом и хотите сохранить уровень отступа при вставке, используйте CTRL/⌘-Shift-V для вставки с отступом.
24. Переключение линий
Вы когда-нибудь писали код только для того, чтобы понять, что некоторые строки не по порядку? В ST3 есть ярлык для экономии времени, который позволяет перемещать заданную строку вверх или вниз в документе. CTRL-SHIFT-ВВЕРХ (ПК) или CTRL-⌘-ВВЕРХ (Mac) перемещает строку вверх, а CTRL-SHIFT-ВНИЗ (ПК) или CTRL-⌘-ВНИЗ (Mac) перемещает строку вниз.
25. Удаление строк
Для тех случаев, когда строка кода не нарушена, но ее нужно просто удалить, в ST3 есть удобный ярлык для удаления строк без необходимости выделения всей строки. CTRL-SHIFT-K (ПК и Mac) удалит текущую строку, на которой находится курсор.
—
Теперь, когда вы освоили Sublime Text 3, вы можете сосредоточиться на написании отличного кода и стать лучшим разработчиком внешнего интерфейса. Продолжите обучение с помощью онлайн-видеоуроков, проводимых экспертами-практиками по темам программирования, бизнеса и дизайна.
Начните заниматься веб-разработкой с помощью нашего курса Software Engineering Immersive.
Свяжитесь
Расскажите нам немного о себе, и один из членов нашей приемной комиссии свяжется с вами, чтобы обсудить возможности в GA.
Мы увидим, как использовать пакет Alignment в Sublime Text 3.
Оглавление
При разработке приятно видеть хорошо выровненный код или хороший отступ.
Большинство пользователей могут использовать PHPStrom, VSCode или что-то еще. У них есть расширения, которые делают то же самое.
Но я фанат Sublime Text Editor. Итак, я делюсь здесь тем, как использовать пакет выравнивания Sublime Text Editor.
Итак, давайте рассмотрим приведенный ниже пример выравнивания и неправильного выравнивания кода.
Реклама
Я использую Sublime Text 3 (незарегистрированный). ИМО лучше всего подходит для развития. У него много замечательных функций.
В этой статье я объясняю пакет выравнивания (сегодня он входит в ТОП-25).
Реклама
Просто выполните следующие простые шаги:
- Нажмите Command+Shift+P, чтобы открыть палитру команд.
- Вводите «Установить пакет», пока не увидите «Управление пакетами: установить пакет».
- Когда появится список пакетов, напечатайте Alignment, пока не найдете его.
- Нажмите Enter, чтобы установить Sublime Alignment.
Посмотрите ниже GIF для справки, чтобы узнать, как установить пакет выравнивания.
Теперь откройте файл настроек для Sublime Alignment:
Windows: Настройки > Настройки пакета > Выравнивание > Настройки-Пользователь
Linux: Настройки > Настройки пакета > Выравнивание > Настройки-Пользователь
Mac OS X: Sublime Text 2 > Настройки > Настройки пакета > Выравнивание > Настройки-Пользователь
Здесь мы добавили = и : Итак, когда вы выбираете код, который включает = или :, он выравнивается с этими символами.
Реклама
Выберите линии, которые вы хотите выровнять. Нажмите Ctrl+Alt+A (Windows и Linux) или Command+Ctrl+A (Mac OS X)
Посмотрите пример ниже, чтобы выровнять код.
ДО
ПОСЛЕ
Посмотрите приведенный ниже пример GIF для справки.
Возвышенный текст предоставляет множество полезных сочетаний клавиш. Ознакомьтесь с полным списком шпаргалок по сочетаниям клавиш Sublime Text 3.
Отступ – это процесс сохранения блоков кода языков программирования для сохранения систематической структуры. Это помогает передать разработчикам лучшую структуру программы. В этой главе подробно рассказывается об отступах в редакторе Sublime Text.
Важность отступов
Отступы помогают поддерживать структуру кода таким образом, чтобы он был легко понятен всем, кто к нему обращается. Правильный отступ придает коду следующие особенности —
- Читаемость
- Удобство использования
- Адаптируемость
- Простота обслуживания
Параметры отступа в Sublime Text
Редактор Sublime Text предоставляет различные варианты отступов кода, как показано на следующем снимке экрана —
Использование этих опций подробно обсуждается здесь —
Параметры отступа
Опция Indent помогает создать отступ указанного кода. Вы должны выбрать указанный код и выбрать опцию «Отступ».Вы также можете использовать сочетание клавиш Ctrl+[ после выбора необходимого кода, для которого нужно сделать отступ. Обратитесь к следующему снимку экрана для лучшего понимания —
Опция без отступа
Опция Undent работает в обратном порядке. Ярлык для опции без отступа — Ctrl+]. Обратитесь к следующему снимку экрана для лучшего понимания —
Вариант повторного отступа
Опция Reindent используется для отмены опции unindent и возврата кода к тому же состоянию. Обратитесь к следующему снимку экрана для лучшего понимания —
Преимущества отступов
Правильный отступ предлагает различные преимущества для кода и разработчиков. Они обсуждаются ниже —
Блоки кода будут видны без особых усилий.
Разработчик может сосредоточиться на необходимых строках кода и легко игнорировать ненужные.
Разработчику, многократно использующему одну и ту же структуру кода, не нужно сосредотачиваться на операторах начала и конца блока.
Formatter – это подключаемый модуль Sublime Text 3, который позволяет украсить и уменьшить размер исходного кода.
- Поддержка более 20 основных языков
- Форматировать весь файл, одиночный или множественный выбор
- Файлы конфигурации доступны для каждого стороннего плагина
- Работать в автономном режиме
Formatter был протестирован в Sublime Text 3 и должен нормально работать на всех платформах.
Бэкпорт в Sublime Text 2 никогда не планировался.
Пожертвование
Если этот проект поможет вам сократить время на разработку, можете угостить меня чашечкой кофе :)
Плагины
Formatter требует специальных подключаемых модулей для форматирования кода. В настоящее время он расширен для работы со следующими плагинами. Эти плагины необходимо устанавливать отдельно, и их можно легко отключить в настройках. Инструкции по их установке приведены ниже. После того, как вы закончите, не забудьте указать правильный путь к исполняемому файлу плагина и настроить их переменные среды в настройках Formatter.
💕Подсказка:
Stylelint и Prettier могут совместно работать с помощью stylelint-plugin-prettier. Конфигурацию можно выполнить с помощью:
ESLint и Prettier могут взаимодействовать друг с другом с помощью eslint-plugin-prettier. Конфигурацию можно выполнить с помощью:
Установка
Существует 3 способа установки Formatter:
- С подключаемым модулем Package Control: проще всего установить Formatter через Package Control.
После установки Package Control перезапустите Sublime Text и вызовите палитру команд (Cmd + Shift + P в MacOSX, Ctrl + Shift + P в Linux/Windows). Выберите «Управление пакетами: Установить пакет», подождите, пока Управление пакетами извлечет последний список пакетов, затем выберите Форматирование, когда появится список. Преимущество использования этого метода заключается в том, что Package Control автоматически обновляет Formatter до последней версии.
С помощью Git: клонируйте репозиторий в папку Sublime Text Packages:
Без Git: загрузите последний исходный код с GitHub, скопируйте весь каталог в каталог Sublime Text Packages и обязательно переименуйте его в Formatter .
Каталог Packages расположен по-другому в:
- MacOSX: ~/Library/Application Support/Sublime Text 3/Packages/
- Linux: ~/.config/sublime-text-3/Packages/
- Windows: %APPDATA%/Sublime Text 3/Пакеты/
Конфигурация
Formatter хранит данные конфигурации в двух разных местах:
Специальные файлы конфигурации, управляющие поведением сторонних подключаемых модулей. Полный список поддерживаемых параметров и допустимых значений можно найти на веб-сайтах разработчиков плагинов. Formatter предоставляет только базовую основу для демонстрации того, как он работает. Вы можете настроить и уточнить их в соответствии со своими потребностями:
Файлы конфигурации по умолчанию и пользователя, управляющие Formatter:
Доступ к настройкам Formatter осуществляется через «Настройки» > «Настройки пакета» > «Форматтер» > «Настройки».
Левая панель содержит все настройки по умолчанию. На правой панели можно сохранить настройки.
Убедитесь, что вы поместили все конфигурации в один корневой объект и скопировали их из левой панели в правую.
Не редактируйте настройки по умолчанию на левой панели. Любые изменения будут потеряны при обновлении пакета.
Следующий пример настроек должен дать вам представление о том, как настроить Formatter:
Использование
Formatter был разработан для определения синтаксиса файлов в соответствии с областями файлов. В большинстве случаев Sublime Text уже делает эту работу за вас, когда вы открываете файл. Для остальных вы должны явно назначить синтаксис через меню синтаксиса в правом нижнем углу или через:
Установка неправильного синтаксиса при коде формата вызовет ошибку: Синтаксис выходит за рамки.
Самый гибкий плагин выравнивания для Sublime Text 3. Этот плагин вдохновлен превосходным табличным плагином VIM.
Поддержка ST2 устарела, но тем не менее можно установить AlignTab на ST2 с помощью управления пакетами.
- Выровнять с помощью регулярного выражения
- Пользовательские интервалы, отступы и выравнивание.
- Интеллектуальное обнаружение выравнивания, если строки не выбраны
- Поддержка нескольких курсоров
- Режим таблицы и режим предварительного просмотра
- Если вам нужно только простое и быстрое выравнивание, вам поможет предустановленное выравнивание.
Более сложное использование
- Откройте AlignTab в палитре команд C+Shift+p и введите ввод в форме / .
- Чтобы узнать больше о регулярных выражениях, посетите здесь и здесь.
- Эта опция управляет выравниванием столбцов, заполнением и максимальным количеством разбиений. Общий синтаксис параметров: ([rlc]8*)*(f5*)? .
- Числа после r , c или l определяют, сколько пробелов будет добавлено после столбцов, а число после f определяет, сколько совпадений будет выполнено на основе .
- Например, c2r3f1 означает
- первый столбец выравнивается по центру, за которым следуют два пробела
- второй столбец выделен справа, за которым следуют 3 пробела
- используется только первое совпадение
- Все столбцы выравниваются по левому краю.
- Пробел добавляется после каждого столбца.
- Все совпадающие разделители выровнены.
Подробнее о регулярном выражении и параметрах
- Используйте незахватывающую круглую скобку (?:регулярное выражение) вместо захватывающей скобки.
- Разделитель также рассматривается как столбец.
- Например, =/rcl означает, что столбец перед = будет выровнен по правому краю, а столбец после = — по левому краю. И = будет центрировано (однако это не имеет значения, так как = имеет длину 1).
- Например, регулярное выражение/rl означает, что все нечетные столбцы будут выравниваться по правому краю, а все четные — по левому.
- Например, r*3 равно rrr , а (cr3)*2 равно cr3cr3 .
Режим просмотра в реальном времени
Нажмите ESC или используйте команду AlignTab: Exit Table Mode, чтобы выйти из режима таблицы.
Несколько простых примеров. Вы также можете добавить туда свои примеры.
Если вы хотите получить привязку клавиш для режима предварительного просмотра в реальном времени, добавьте следующее в свой файл привязок клавиш пользователя.
Что касается частых шаблонов, вы можете учесть следующее в файле пользовательских сочетаний клавиш. Измените привязку клавиш и user_input для своих целей.
или синтаксическая привязка клавиш.
Чтобы упростить запоминание сложных паттернов, вы можете сохранить их в словаре в файле настроек. Чтобы отредактировать узоры, запустите Preferences: AlignTab Settings. Используйте имя в качестве ключа и регулярное выражение в качестве значения. Например,
Тогда вы просто используете имя вместо шаблона в поле ввода.
Пользовательское контекстное меню
Чтобы определить новый элемент в контекстном меню, запустите Preferences: AlignTab Context Menu и добавьте, например,
AlignTab поддерживает символы CJK, но вы должны выбрать правильное начертание и размер шрифта. Насколько мне известно, MinCho работает со всеми китайскими, японскими и корейскими языками.
Читайте также: