Все разработчики создают свой собственный набор инструментов, когда дело доходит до работы с различными проектами. Инструменты, которые использует веб-разработчик, могут сократить время, необходимое для создания веб-сайта или веб-приложения, и упростить выполнение задач.
Интеллектуальные инструменты необходимы каждому успешному рабочему процессу разработчика, поэтому, если вы хотите расширить свой набор инструментов целым набором новых приемов, рекомендуется внимательно прочитать эту статью от начала до конца.
Нет недостатка в редакторах кода, которые можно использовать для облегчения своей работы. Выбор среди них становится намного сложнее, когда вас ждет так много вариантов.
Поэтому мы представим один вариант, который выделяется среди остальных: Sublime Text. Это один из наиболее широко используемых редакторов кода на рынке, и его предпочитают тысячи программистов, веб-разработчиков и веб-дизайнеров.
Что впечатляет в Sublime Text, так это его гибкость. Вы можете легко расширить редактор кода, используя плагины Sublime Text, созданные практически для всех мыслимых целей. И вы даже можете создавать собственные пакеты, которые заметно улучшат ваш рабочий процесс и повысят вашу производительность.
Продолжайте читать эту статью, созданную нашей командой в wpDataTables, и узнайте о некоторых из лучших пакетов Sublime Text, о том, как они работают и как вы можете их использовать.
Плагины Sublime Text: установка пакетов
Прежде чем перечислять плагины Sublime Text, которые мы считаем актуальными для всех веб-дизайнеров, вы должны узнать, как устанавливать пакеты в этом редакторе кода. Вот шаги, которые вам необходимо выполнить:
- Загрузите zip-файл репозитория пакетов. Вы можете сделать это на странице пакета GitHub.
- Извлеките файлы из папки Sublime Text Packages. Вы должны найти его в разделе: {{ user name }}AppDataRoamingSublime Text {{ version }}Packages
Или же
- Установите пакет через официальный пакет Sublime Text Control. Нажмите на ссылку и скопируйте код, который подходит для вашей версии Sublime Text.
- Вставьте код в консоль Sublime Text, к которой вы можете получить доступ, нажав CTRL + ~.
- Перезапустите редактор кода, откройте командное окно, нажав CTRL + Shift + P, и введите «Управление пакетами: Установить пакет» (или просто «Установить пакет» — автозаполнение покажет нужные варианты)
После установки пакета не вносите никаких изменений в его файл конфигурации по умолчанию, если вы точно не знаете, что делаете. Пакеты Sublime Text в основном предназначены для настройки с использованием отдельных файлов переопределения, чтобы ваши изменения не были потеряны при обновлении пакетов.
Плагины Sublime Text, которые должны попробовать все веб-разработчики
Говоря о расширяемости редактора кода, было бы полезно перечислить несколько лучших плагинов Sublime Text и то, как они могут помочь вам стать лучшим разработчиком в кратчайшие сроки.
Надеюсь, вы найдете эти плагины полезными и актуальными для вашей работы. Вот список:
Управление пакетами
Sublime Text Package Control — вероятно, самый популярный инструмент, доступный для этого редактора кода. Он позволяет загружать, устанавливать и обновлять пакеты непосредственно из интерфейса Sublime Text.
Хотя «плагин» и «пакет» часто используются взаимозаменяемо, пакеты включают в себя плагины, меню, фрагменты и другие элементы, которые можно использовать для расширения Sublime Text по своему вкусу.
Вместо того, чтобы самостоятельно загружать файлы пакета и устанавливать их в нужную папку, позвольте этому плагину сделать все за вас, не выходя из Sublime Text. Если вы программист, подумайте об этом как о pip для Python или npm для node.js.
Выравнивание
Выравнивание делает именно то, что говорит его название: это один из тех плагинов Sublime Text, который делает вашу работу в 10 раз проще, выравнивая ваш код, чтобы сделать его более аккуратным и удобным для чтения. Он отлично работает с PHP, JavaScript, CSS и другими.
Вы можете выравнивать разделы, многострочные выделения или весь код с помощью разделителей, таких как «=». Даже если вы думаете, что это не так уж сильно помогает, после того, как вы его используете, вы станете зависимым от того, насколько он полезен.
Эммет
Среди наиболее часто используемых плагинов Sublime Text — Emmet, простой плагин, который может повысить производительность любого разработчика, помогая с рабочим процессом CSS и HTML.
Например, если вы напишете html:5 и нажмете CTRL + E при использовании Emmet, вы получите доступ к базовому шаблону страницы HTML5 для работы. Плагин прост, но чрезвычайно эффективен и определенно улучшит вашу работу.
ИзменитьЦитаты
Вы ненавидите обрабатывать кавычки? Поздравляю, вы один из миллионов разработчиков, которым также трудно поддерживать их согласованность. ChangeQuotes поможет вам.
Он может легко преобразовывать одинарные/двойные кавычки и повторно экранировать их. Если вы хотите изменить кавычки, поместите курсор внутрь цитируемого текста и откройте палитру команд. Запустите плагин и вам больше не нужно будет выделять всю строку для изменения кавычек. Так намного быстрее!
Улучшения боковой панели
Этот плагин Sublime Text добавит некоторые новые функции в боковое меню. Например, вы можете создать новый файл гораздо быстрее, оставаясь в текущей папке проекта. Вы также можете легче перемещать файлы и папки, дублировать их по мере необходимости и открывать файлы в Finder или в браузере.
SublimeEnhancements добавляет множество полезных функций боковой панели, которые помогут вам более эффективно управлять своим проектом. Установите его, чтобы открыть для себя все полезные функции.
SublimeLinter
Если вы являетесь пользователем Sublime Text 3, вам понравится SublimeLinter. Не многие плагины Sublime Text были обновлены до последней версии редактора, поэтому всегда приятно видеть, что разработчики плагинов сосредоточены на обновлении своих продуктов. Вместо того, чтобы хранить все ваши линтеры в одном пакете, этот плагин позволяет вам установить те, которые вы используете регулярно.
По сути, SublimeLinter дает вам фреймворк для анализа кода. Если вы не знаете, линтинг представляет собой процесс пометки непереносимого или неправильного синтаксиса в вашем коде. Проще говоря, он предупреждает вас, когда код загроможден ошибками.
SublimeGit
Работа с программным обеспечением контроля версий является обычным делом для разработчиков. Самый популярный из них — Git. Для тех, кто устал сохранять текстовые файлы и возвращаться к терминалу, чтобы выполнить пару команд Git, ответом будет SublimeGit. Этот плагин Sublime Text позволяет вам выполнять все ваши команды Git в текстовом редакторе.
Используя SublimeGit, разработчики могут делать больше за меньшее время, что значительно повышает их производительность. Вам не придется переключаться между редактором кода и командной строкой.
Раньше он был доступен только как платный плагин, но в прошлом году он стал открытым. Он имеет множество полезных функций, а также документы SublimeGit, которые помогут вам понять и использовать плагин.
GitGutter
Вы всегда можете запускать команды Git в самом Sublime Text, но это не самый быстрый способ справиться с этой задачей. Sublime Text заставляет вас запускать отдельную команду вместо того, чтобы просматривать изменения в режиме реального времени. Что ж, здесь в дело вступает GitGutter.
GitGutter с некоторых точек зрения похож на Atom. Он добавляет те же функции в Sublime Text, что означает, что вы можете начать добавлять подсказки различий в желоб боковой панели. Наводя курсор на индикаторы боковой панели, вы получаете доступ к очень удобным всплывающим окнам различий.
SASS
Выделение имеет первостепенное значение для быстрого обнаружения ошибок и багов. Для разработчиков быстрое и эффективное исправление ошибок является абсолютной необходимостью. SASS поможет вам в этом. Он выделяет синтаксис SASS и SCSS и поможет любому разработчику CSS, использующему эти языки расширений.
GitHubinator
Те, кто использует репозитории GitHub/Bitbucket, должны попробовать GitHubinator. Этот плагин показывает выделенный текст в удаленном репозитории. Таким образом, текст, который вы ищете, выделяется, и вы можете просто щелкнуть контекстное меню, чтобы запустить соответствующую веб-страницу в браузере.
Как и в случае с другими плагинами Sublime Text, перечисленными здесь, GitHubinator помогает разработчикам сэкономить время и избежать повторяющихся действий.
GitOpenChangedFiles
Как вы понимаете, этот плагин используется для открытия измененных файлов из репозитория Git. Вам просто нужно установить его и запустить плагин, чтобы открыть файлы, которые вы ранее изменили в своей ветке Sublime Text.
Это небольшой плагин, но те, кому нужна эта функция, найдут ее очень удобной.
Терминал
Вы знаете, как долго длится процесс открытия папок проекта с помощью Sublime Text. Терминал позволяет открывать папки непосредственно из Sublime Text на платформе с помощью одной горячей клавиши. Разве это не удобно?
При выполнении командных строк в заданной папке вам необходимо выполнить несколько шагов, которые отнимают много времени и довольно напряженны. Терминал сводит эти шаги к горячей клавише CTRL + SHIFT + T.
SublimeREPL
Использование SublimeREPL облегчит работу программиста в 10 раз. Этот плагин позволяет запускать интерпретаторы наиболее распространенных языков, включая NodeJS, Python, Ruby, Scala или Haskell.
Вы можете запустить интерпретатор на любом из этих и других языков прямо из Sublime Text. Взгляните на другие функции плагина для более глубокого понимания того, что он может делать.
Вавилон
Если вам нужны определения языка для ES6+ Javascript, вам следует использовать Babel. Не многие плагины Sublime Text предлагают хорошие определения языка, особенно для его последней версии. Babel специально создан для Sublime Text 3 и не поддерживает более ранние версии. Он также поддерживает синтаксис React JSX.
ВсеАвтозаполнение
По умолчанию Sublime Text использует опцию автозаполнения только для слов, которые присутствуют в текущем файле. Чтобы расширить эту функциональность на все открытые файлы, вы можете использовать AllAutocomplete, плагин, который ищет каждый файл, который вы открыли, и находит совпадения, а также предлагает слова.
CSSComb
CSSComb сортирует свойства CSS, чтобы ваш код стал чище и легче для чтения. Он размещает код в правильном порядке и позволяет настраивать его свойства без особых хлопот. Это полезный плагин для тех, кто работает в командах, где не все участники пишут код одинаково.
MarkdownПредварительный просмотр
Многие разработчики привыкли создавать файлы Markdown в GitHub, StackEdit или Markable в облаке. Если вы писатель старой школы и предпочитаете хранить свои файлы локально, вам стоит попробовать MarkdownPreview.
Вы также можете установить MarkdownEditing и выделить свой код Markdown.
DocBlockr
В некоторых компаниях все принципы кодирования должны соблюдаться неукоснительно. Это может оказать давление на плечи разработчиков. DocBlockr упрощает работу, создавая комментарии для вашего кода, анализируя функции, переменные или параметры и автоматически добавляя основные элементы.
Вам нужно будет только ввести /и плагин сделает всю работу за вас.
Материализованные фрагменты CSS
MaterializeCSSiзапоминающийся интерфейсный фреймворк, созданный Google. Он современный, полностью адаптивный и готов к использованию всеми дизайнерами и разработчиками. Этот плагин Sublime Text поможет вам использовать Materialize CSS в текстовом редакторе с использованием общих фрагментов кода.
Материализованные фрагменты CSS добавляют компоненты CSS непосредственно в редактор кода, поэтому вы можете получить к ним доступ с помощью основных команд. Материализованные фрагменты CSS могут сэкономить массу времени и энергии, которые обычно тратятся на ввод синтаксиса вручную и добавление компонентов CSS по отдельности.
Стандартный формат
Без форматирования ваш код будет выглядеть грязным и трудным для понимания. StandardFormat позволяет вам создать гораздо более прочную кодовую базу, помогая людям читать ваш код быстрее и эффективнее, когда им это нужно.
Плагин основан на библиотеке Standard Format JS, которая будет применяться к тому, что вы пишете. Все знают, как читать традиционный формат JS, поэтому этот плагин оказывается очень полезным для разработчиков.
Фрагменты запроса мультимедиа CSS
Медиа-запросы используются для разработки приложений и программного обеспечения для мобильных устройств или масштабируемых размеров экрана. Без этих запросов вы не сможете превратить свой проект в мобильный.
CSS Media Query Snippets призваны помочь вам в решении этой задачи, предлагая предварительно написанные шаблоны для медиа-запросов. Вы можете просто использовать шаблон для внесения изменений.
Shell Exec
Мы все знаем, что доступ к Shell является спорной темой из-за небезопасных конфигураций, которые использовались серверами в прошлом. Стать жертвой хакеров было гораздо чаще, когда доступ к командам Shell Exec можно было получить извне, открывая уязвимости в платформе.
Этот плагин помогает вам запускать команды оболочки внутри Sublime Text 3, учитывая, что Интернет теперь намного безопаснее. Это хороший способ сэкономить время, но не забудьте настроить параметры брандмауэра и выяснить шаблоны доступа, чтобы избежать вышеупомянутой ситуации.
Laravel BladeHighlighter
Laravel — это фреймворк с открытым исходным кодом для PHP, и он заметно повлиял на разработку PHP. Laravel использует Blade Engine, синтаксис, который позволяет разрабатывать новое программное обеспечение поверх фреймворка.
Sublime Text не был бы таким же без Laravel Blade Highlighter, если вы используете Laravel ежедневно. С более чем 300 000 установок этот плагин не должен быть упущен ни одним разработчиком PHP.
Завершение мыслей об этих плагинах Sublime Text
Sublime Text достаточно силен сам по себе, но плагины и пакеты делают его еще более мощным. Самым большим преимуществом этих плагинов является экономия вашего времени, помогая настроить Sublime Text в соответствии с вашими потребностями, требованиями и повседневными задачами.
Каждый разработчик предпочитает определенную процедуру кодирования, и вы можете поддерживать эту процедуру, выбирая плагины Sublime Text, которые лучше всего подходят для вашей ситуации. Выберите те, которые имеют смысл для вашего способа работы и вашей работы. Это сделает все более эффективным и займет меньше времени.
Удачи в решении задач по кодированию!
Если вам понравилось читать эту статью о плагинах Sublime Text, вы должны прочитать эту о темах Sublime Text.
Мы также писали о нескольких связанных темах, таких как лучшие пакеты Atom и о том, как стать фронтенд-разработчиком.