Редактор Sublime Text 2017
Хороший инструмент в любой работе повышает качество работы и позволяет выполнить ее гораздо быстрее. Верстка в данном случае не исключение. Для верстальщика основной инструмент – это редактор кода. Конечно, к инструментам для верстальщика можно отнести и photoshop и множество различных сервисов. Но все-таки самым главным, без которого невозможно выполнять основную функцию верстки – это редактор кода.
Стоит отметить, что для каждого разработчика самым удобным и привычным может быть свой редактор кода. Поэтому каждый должен попробовать использовать несколько редакторов и остановиться на наиболее понравившемся варианте.
Текстовый редактор Sublime Text на данный момент является одним из самых популярных текстовых редакторов, используемых для веб-разработки. Используя плагины, можно сколько угодно расширять функционал редактора и сделать его именно таким, как вам нужно. Конечно, как и любой другой редактор, в SublimeText есть и так называемые стандартные функции подсветки синтаксиса, автодополнения, смена кодировки и еще множество других полезных функций, которые упрощают написание кода и помогают экономить время и силы.
В данном курсе мы с вами изучим редактор Sublime Text. Установим, настроим его. Рассмотрим стандартные функции редактора и расширим функционал редактора, установив несколько полезных плагинов. Благодаря популярности редактора Sublime Text , для него написано множество плагинов. И если вам понадобится дополнительный функционал в редакторе, то скорее всего плагин с нужным функционалом уже есть и его нужно просто поискать и установить. В курсе мы научимся искать и ставить нужные плагины.


Урок 1. Редактор Sublime Text. Установка:
От автора: изучение функционала и возможностей любой программы начинается с ее скачивание и установки. В данном, первом, уроке курса мы с вами с официального сайта редактора скачаем и увидим, как происходит установка SublimeText. В уроке рассмотрим установку portable версии. В такой версии Sublime Text проще всего и в таком виде его можно установить куда угодно.
Также в уроке мы с вами сразу рассмотрим несколько очень удобным и приятных функций редактора SublimeText, которые уже с первых шагов после его установки показывают, на сколько, хороший и удобный этот редактор кода.


Урок 2. Редактор Sublime Text. Настройка:
От автора: в прошлом уроке мы с вами скачали и установили редактор SublimeText. Теперь нам необходимо произвести первичную настройку редактора. В уроке будет показана настройка рабочего пространства так, чтобы им было удобно пользоваться. SublimeText обладает достаточно широкими настройками, и вы сможете настроить его так, как будет удобно именно вам.
В уроке мы настроим с вами размер шрифта в редакторе. Выберем тему для оформления и подсветки кода. Настроим расположение и количество рабочих окон. Отобразим колонку проекта, чтобы удобно было следить за файлами проекта.


Урок 3. Редактор Sublime Text. Плагины. Часть 1. Плагин установки:
От автора: начиная с данного урока, мы с вами начнем расширять именно функциональные возможности редактора. Расширять возможности Sublime Text, мы будем, устанавливая плагины. Плагины – это расширения, дополнения которые дополняют существующий и вносят новый функционал в какую-либо программу. В данном случае мы рассматриваем плагины для редактора Sublime Text.
Устанавливать плагины для Sublime Text стандартными средствами самого редактора не очень удобно, поэтому для этих целей есть специальный плагин, который делает установку плагинов более удобной. В данном уроке мы установим такой плагин, который в будущем упростит нам установку последующих плагинов.


Урок 4. Редактор Sublime Text. Плагины. Часть 2. Плагин расширения функционала:
От автора: из предыдущих уроков вы знаете, что стандартная колонка, в которой отображаются файлы проекта, обладает весьма ограниченным функционалом. Она в ней есть возможность только переименовать файл и удалить его.
В данном уроке мы с вами установим плагин, который расширяет функционал колонки проекта и позволит нам создавать новые документы и директории. Позволит сразу открывать файлы с помощью браузера, позволит выбирать программу для открытия сторонних документов. Откроет нестандартные возможности работы с изображениями и многое другое, что очень упрощает и сокращает время на разработку проекта.


Урок 5. Редактор Sublime Text. Плагины. Часть 3. Плагин Emmet:
От автора: для редактора Sublime Text, как и для некоторых других редакторов, есть возможность установить плагин Emmet. Плагин Emmet позволяет ускорить набор текста благодаря использованию большого числа сокращений. Сокращения Emmet охватывают практически все свойства CSS и HTML теги, которые приходится набирать веб-разработчику. После установки Emmet в Sublime Text можно просто набрать сокращение, нажать Tab и Emmet расшифрует его в документе в полный текст.
При таком подходе, конечно, необходимо знать синтаксис сокращений, но данный синтаксис не сложный, интуитивно понятный и не громоздкий. В данном уроке мы с вами установим плагин Emmet в Sublime Text и рассмотрим самые популярные и наиболее часто встречающиеся сокращения.


Урок 6. Редактор Sublime Text. Плагины. Часть 4. Плагин ColorPicker:
От автора: вы знаете, что при создании сайта, сначала рисуется макет сайта в графическом редакторе, например, photoshop. Но есть такая категория дизайнеров-верстальщиков, которые при создании несложных и необширных сайтов вообще не используют photoshop. Я думаю, многие из вас тоже верстали несложные информационные страницы без дизайна в photoshop. Самое сложное при верстке таких страниц подобрать цвет ссылок, фона, цвет основного текста. Не то чтобы это сложно, но это заставляет использовать photoshop, чтобы посмотреть и узнать код цвета.
В данном уроке мы с вами установим плагин ColorPicker, который позволит выбирать цвета и копировать их код прямо в редакторе Sublime Text. Для того, чтобы пользоваться плагином, нужно после указания свойства значением которого является текст, нажать сочетание клавиш. И в появившейся палитре, как в photoshop, выбрать нужный цвет. Его код автоматически подставится в значение свойства.


Урок 7. Редактор Sublime Text. Плагины. Часть 5. Оптимизация CSS:
От автора: после того, как проект готов и все коды для него написаны необходимо провести хотя бы базовую оптимизацию. Для оптимизации сайтов, конечно, есть свои инструменты и сервисы, но, например, оптимизировать код css можно прямо в редакторе. Причем сделать это будет гораздо быстрее и не хуже, чем css оптимизируют какие-либо сервисы.
В данном уроке мы рассмотрим плагин Sublime Text, который оптимизирует нам css код. Принцип работы плагина очень простой: мы устанавливаем плагин, открываем css файл, который нужно оптимизировать, нажимаем кнопку и получаем готовый оптимизированный css.