Как только вы начнете разрабатывать сайт, первым инструментом, который вы будете использовать, станет текстовый редактор, будь то простой блокнот или полноценная IDE.
В этом выпуске Эдди и Мэтт рассматривают свою коллекцию плагинов для Sublime Text и обсуждают, как каждый из них помогает в их рабочем процессе.
Управление пакетами
Чтобы получить пакеты (или плагины), упомянутые в эпизоде, вам необходимо установить Package Control . Его легко и удобно установить, а инструкции о том, как это сделать, можно найти здесь .
JSHint
JSHint — это линтер JavaScript, который проверяет ваш JavaScript и выявляет любые возможные ошибки или некорректные методы в вашем коде.
Например, если вы случайно ввели неправильное имя переменной, как показано ниже, JSHint укажет, что fo никогда не была определена, и это вызовет ошибку.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
Плагин JSHint указывает на проблемы, отображая желтый прямоугольник вокруг соответствующего текста и помещая курсор в этот фрагмент кода, что приведет к отображению сообщения об ошибке в левом нижнем углу Sublime.
Другие проблемы, которые он обнаружит:
- Переменные, которые определены, но никогда не используются
- Как избежать создания функций внутри циклов
- Использование правильных методов сравнения
Чтобы установить пакет SublimeLinter-JSHint, вам также необходимо установить пакет SublimeLinter -JSHint и следовать инструкциям по установке на странице пакета SublimeLinter-JSHint .
Некоторым разработчикам может быть полезно также включить плагин JSHint Gutter . Он помещает небольшую точку в конец любой строки с ошибкой JSHint.
ОАО
JCS выделит все места, где ваш JavaScript не соответствует определенному стилю кодирования.
Например, JCS можно использовать для определения того, следует ли использовать пробелы после ключевых слов, например «if», или для определения того, должны ли фигурные скобки находиться в той же строке или в новой строке метода.
Пакет SublimeLinter-JSCS выделяет любые проблемы встроенным образом в стиле, аналогичном JSHint, что позволяет легко исправить любые проблемы.
Это чрезвычайно полезно, когда дело доходит до работы в команде, поскольку каждый может следовать одному и тому же руководству по стилю и поддерживать единообразие вашего кода.
Самое приятное то, что с помощью пакета JSCS-Formatter вы можете автоматически устранять любые проблемы на странице, нажав ctrl + shift + p , набрав «JSCS Formatter: отформатировать этот файл» и нажав Enter. Подробности вы узнаете из записи в блоге Адди .
Цветной хайлайтер
Цветной маркер добавит цвет к фону любого определения цвета в вашем CSS или Sass.
Вы можете определить, будет ли оно отображаться в виде подчеркивания на полном фоне при наведении на него курсора или всегда отображать цвет на фоне определения. Просто перейдите в «Настройки пакета» > «Цветовой маркер» > «Настройки — По умолчанию», чтобы просмотреть исходные настройки и изменить настройки в «Настройки — Пользователь».
Для полной подсветки фона добавьте в файл «Настройки — Пользователь» следующее:
{
"ha_style": "filled"
}
Цвет желоба
Цвет переплета — это альтернатива цветовому маркеру: вместо отображения цвета поверх переменной цвета он помещает цвет в переплет этой линии.
Выбор цвета
Если вам когда-нибудь понадобится быстрый и простой способ выбрать цвет на экране, вам может подойти пакет выбора цвета .
Нажмите ctrl + shift + c и бум — вы получили палитру цветов.
ИмяАвтоФайла
AutoFileName — это простой небольшой плагин, который выдает список возможных файлов по мере ввода. Это очень удобно, если вы пытаетесь ввести имя изображения или добавить файл CSS или JS, поскольку это экономит ваше время и, что более важно, снижает риск опечаток.
Автопрефиксер
У всех нас был момент осознания, когда мы забыли добавить свойство CSS с префиксом. С помощью Autoprefixer вы просто запустите его в своем CSS, и он добавит все необходимые вам префиксы.
значит мы идем от этого..
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
..до следующего, просто нажав ctrl + shift + p , набрав «Autoprefix CSS» и нажав Enter.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Вы также можете определить, какие браузеры и версии браузеров вы хотите поддерживать, в настройках пакета. Для получения дополнительной информации посетите страницу управления пакетами .
Более...
Для Sublime Text существует множество других плагинов, поэтому обязательно изучите Package Control .
Для получения дополнительных советов и подсказок вам следует ознакомиться с великолепной колодой слайдов WesBos о сочетаниях клавиш и других плагинах для Sublime Text .
WesBos также написал книгу под названием «Возвышенный текст для опытных пользователей», которая может быть интересна и вам, замечательные люди :)