Настройка Sublime text 3 для веб-разработки и html верстки: ставим эффективные плагины

Сколько разных редакторов и IDE я не перепробовал, сейчас я остановился на одном простом редакторе – Sublime Text 3. Естественно в моем выборе есть своя причина и пусть говорят мол этот редактор изжил себя я считаю, что это не так. Он отлично подходит для HTML верстальщика, для программиста, да и в целом для веб-разработки.

Доказывать, что это лучший на свете редактор я не буду, это твой выбор, я лишь покажу как под себя настраиваю его я. Я уверен если ты читаешь эту статью значит, ты тут именно потому, что тебе это нужно. Короче, просматриваешь страницу, и повторяешь за мной. Можешь повторить каждый пункт, а можешь и не все, а только те вещи, которые по твоему мнению действительно тебе нужны. Хотя я и не собираюсь ничего доказывать, но я расскажу почему я выбрал именно Sublime Text 3.

Почему стоит выбрать Sublime Text 3?

Раньше, когда был пик популярности этого редактора, я почему-то обходил его боком. Первое мое знакомство было таким: я просто его скачал, установил и запустив получил не совсем то так как я ожидал что-то на подобии php storm или netBeans 8.1. Короче он мне не понравился и я его удалил.

Глупость в том, что IDE сравнивать с редактором действительно глупо. Это как гироборд и Tesla Model X.

Но позже все изменилось. У меня достаточно слабенький рабочий ноутбук Acer G4257, как бы странно не звучало, но я пытаюсь выжать с него все соки. Хотя у меня есть еще один ноутбук который я купил совсем недавно я люблю работать на этом старичке. Мной на нем за эти годы было поменяно много чего, кроме процессора, батареи и материнской платы, но он живет и работает на ура.

И все же, если запустить Google Chrome с десятком вкладок, Photoshop и еще какие-то дополнительные вещи, то рядом запустить IDE это только навредить самому себе. Он будет жестко тупить.

Когда терпение лопнуло, я просто оценил ситуацию. Я действительно не использую все блага IDE бульдозера, мне нужна обычная лопатка в виде легкого редактора. Пусть и легкого но такого, который позволит установить много дополнительных плагинов. Выбор был между Sublime Text 3 и Atom, но этот мне показался более интересным — не знаю почему.

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

Я выбрал Sublime Text 3 потому что:

  • Он быстрый;
  • Гибкая настройка;
  • Понятный интерфейс;
  • Кроссплатформенность (я настраивал себе его одинаково и на Ubuntu и на Windows 10);
  • Он может все, что мне нужно!

В общем если тебе нравится по тем же причинам, ставь лайк!

Настраиваем Sublime Text 3 для разработки

Первым делом скачиваем и устанавливаем сам Sublime Text 3. Для этого заходим на официальный сайт и скачиваем. Если он есть идем дальше.

Дальше приступаем к настройке:

Install Packege Control

Чтобы мы могли устанавливать сторонние плагины, нам нужно устанавливать Package Control. В целом после установки этого плагина, открывается огромнейший потенциал редактора Sublime Text 3.

Для его установки в самом редакторе выбираем Tools -> Command pallete…

установка плагинов в subline text

Там уже вводим install package control (обычно хватает слова install)

package controll установка плагинов в subline text

 

Ну и собственно все, мы установили установщик для установки плагинов, звучит смешно, но мы сделали это.

Base 16 Color Schemes

Чтобы мне было удобно смотреть в экран во время разработки, я обязательно устанавливаю свою тему. Первым делом я настраиваю стандартную тему самого Sublime Text 3 на темную. Для этого выбираем Preferences -> Theme…, а уже в окошке выбираем Adaptive.Sublime-theme.

установка тем в sublime text

Но это еще не все, дальше мы и ставим Base 16 Color Schemes. Для этого заходим в Tools -> Command pallete… и вписываем в поле install package, а дальше в появившемся окошке вводим 16 Color Schemes и выбираем его.

base 16 установка sublime text

Мы установили плагин, но это еще не конец.

Идем в Preferences -> Color Scheme… и вводим ocean – эту тему я обычно выбираю для себя. Но ты можешь выбрать то, что будет тебе по душе.

sublime text color theme

Terminal

Не знаю, как вам, но чем дальше в лес, тем больше дров. Проще говоря, чем дальше я начал углубляться во Frontend, тем чаще я начал использовать терминал, потому считаю, что он стал для меня незаменимой вещью которая должна быть под руками.

По наработанной схеме переходим Tools -> Command pallete… вводим install и (дальше просто будем открывать install package) запускаем наш установщик.

Вводим слово Terminal и устанавливаем самый первый. 

terminal в sublime text

Дальше все просто, открываем тот проект, с которым будем работать и наживаем сочетание клавиш ctrl+shift+t и получаем нужную нам командную строку.

windows shell

Дальше просто радуемся и пользуемся.

BracketHighlighter

Если тебе постоянно приходится писать много кода, то тебе знакома та ситуация, когда просто не можешь найти где начался блок с кодом или, когда закончился.

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

В целом я долго думал, как коротко объяснить и показать, как работать с программой, но нашел на Youtube крутой урок, там парень показывает полезные вещи об этом плагине.

Color Highlighter

После того, как я перешел с Php Storm мне было сложно привыкнуть к тому, что я не вижу цвет кода, который задам. Что немного теряет меня в моем же css. Потому я нашел крутое решение. Заходим в package controll и устанавливаем Color Highlighter. Больше ничего не нужно.

Color Highlighter

В итоге будем видеть цвета таким образом.

AutoFileName

Опять-таки дурная привычка из php storm, когда все подтягивается и т.п. Так вот для меня был облом, когда я перешел на этот редактор. Пути к файлам не подгружаются. В общем мне нужно было что-то предпринять и немного поискав я нашел решение.

Устанавливаем package control и устанавливаем этот плагин – вводим AutoFileName. По факту больше ничего делать не нужно.

SCSS

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

Заходим в менеджер пакетов и вводим слово scss.

И выбираем этот пакет:

SCSS в sublime text

Дальше просто пользуемся.

тип синтаксиса в sublime text

HTML/CSS/JS Prettify

Сознаюсь честно – у меня в коде время от времени бывает беспорядок. Не хватает у меня нервов настраивать html так, чтобы он был идеален, причем я четко понимаю, что это можно автоматизировать.

Заходим в менеджер пакетов и устанавливаем HTML/CSS/JS Prettify.

 Дальше заходим в настройки, показанные на картинке:

HTML/CSS/JS Prettify

И в открывшемся окне вводим следующее значение:

{
     "format_on_save": true, 
} 

Так при сохранении кода, html, css, js сам код подстроится и станет более понятным и структурированным.

TypeScript/TypeScript Syntax

Ты используешь typescript? Так как я за использование Angular и React, то мне конечно же приходится его использовать очень активно. Правда стандартный Sublime text 3 не имеет в своей сборке поддержку typescript’а.

Но можно сделать ход конем, и просто установить. Заходим в менеджер пакетов для установки плагинов, вводим слово TypeScript и ищем два плагина:

TypeScript/TypeScript Syntax

Вот их и устанавливаем. TypeScript Syntax нам понадобится для подсветки самих скриптов, что является очень важным.

А второй который TypeScript он будет помогать нам работать с самим языком, давать подсказки по доступным функциям, по наличию ошибок и т.д.

В итоге работать с этим языком будет значительно проще.

Emmet

Для тех, кто не знаком с Emmet я сразу скажу, что эта штука должна быть везде и всегда твоем редакторе. Неважно какой ты выбрал редактор, если ты верстальщик, а там нет Emmet’a то ты явно тратишь много своего времени на рутинные выписывания html тегов.

Те, кто хоть раз использовал этот плагин поймут меня почему! В общем ставим эту крутую программу, которая которая заслуживает отдельной инструкции по работе с плагином Emmet.

Действия по установке этой программы стандартные Tools -> Command pallete… вводим install выбираем install package и получаем окошко для поиска разных плагинов.

Вводим туда Emmet и устанавливаем его, он там будет один такой.

Emmet в sublime text 3

Все, можно использовать. Если возникает вопрос, как, то выше была ссылочка на инструкцию по тому как его использовать, а так я покажу вкратце.

Допустим мы хотим создать меню, для этого нам нужно написать немного, но и не мало кода.

Вписываем в нашу html страницу вот такую строчку nav>a{$}*5

И нажимаем tab, в итоге выходит вот такое меню:

пример использования emmet sublime text 3

Интересно? Из маленькой строчки много html и это еще только начало.

 Tag

Этот плагин установить сложнее чем другие, но он по-своему особенный. С ним мы можем одним сочетанием клавиш просто взять и скопировать все css классы которые мы поставили на html код. Обычно это занимает дополнительное время, а так просто взял, скопировал и вставил в свой css файл.

 Скачиваем плагин Tag, после чего получаем Zip папку с обычной папкой внутри. Нажимаем на Preferences и переходим по Browse Packages…

Tag крутой плагин в sublime text 3

В открытой папке выгружаем папку Tag

установка плагина tag

Можем считать, что плагин установлен, но еще нужно его настроить. Preferences -> Key bindings

Key bindings в sublime text 3

Получаем новое окошко и вводим в него выделенный код:

настрока Key bindings в sublime text 3

Чтобы было проще, я выпишу этот код здесь – тебе просто нужно будет скопировать и вставить:

[{
 "keys": ["ctrl+`"], 
     "command": "tag_classes" // Копирует в html код в index.html css код из style.css 
 }] 

    Дальше чтобы использовать тег, ты должен выделить html код, который тебе нужен и нажать сочетание клавиш ctrl + ~ (Она же ctrl + Ё)

Вот как это выходит – у нас есть определенный html

выделяем html теги

Мы выделяем его, можно и не выделять ничего на странице, но по нажатию выше описанного сочетания клавиш скопируются css классы на всей странице.

А дальше вставляем в наш css файл

вставляем все стили | Key bindings

Удобно, быстро и качественно.

Goto-CSS-Declaration

Чтобы долго не искать класс в файле css достаточно выбрать его в html файле, и нажать необходимое сочетание клавиш (Главное, чтобы css файл был открыт), а после, сублайм текст 3 найдет этот класс сам.

Обычно я пользовался поиском, но так еще проще. Полезный плагин?

Заходим в менеджер пакетов ищем Goto-CSS-Declaration, устанавливаем и практически все. Остался один штрих:

  1. Нажимаем на Preferences -> Key bindings
  2. Вставляем следующий код:
вставляем Key bindings код который позволит ускорить действие

Продублирую код, чтобы можно было просто скопировать и вставить:

{
    "keys": ["ctrl+1"], 
     "command": "goto_css_declaration", 
    "args":  { 
      "goto": "next" 
    } // Переход на style.css по нажатию ctrl+1 с index.html 
 } 

   Осталось еще немного и мы закончим настройку нашего редактора.

Дополнительные настройки Sublime text 3

В целом с таким набором дополнений хоть в космос лети, они пригодятся всегда и везде, но мне не хватает еще нескольких мелочей.

Для их настройки переходим на Preferences -> Settings и добавляем следующие строчки:

Дополнительные настройки Sublime text 3

Продублирую с описаниями, что за что отвечает:

"draw_white_space": "all", //Отображает непечатаемые символы
"draw_indent_guides": false, //Убирает направляющие линии 
"font_size": 10, //Размер шрифта по умолчанию 
"margin": 0,//Убирает отступы 
"tab_size": 3,//Размер табуляции 
"trim_trailling_white_space_on_save": false,//Отключает самодеятельность программы 
"remeber_open_files": true,//Помнит открытые ранее файлы 
"update_check": false // убирает надоедливое окно предложения обновить программу 

Подводим итог по Sublime text 3

Я не давлю на тебя устанавливать все эти плагины, некоторые возможно для тебя будут вообще бесполезными и не нужными, но для меня это все дает возможность оптимизировать работу с самим редактором ускорив сам процесс разработки.

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

Из этого всего набора мне не хватает лишь авто импортера какого-то который бы мне постоянно импортировал автоматом все библиотеки, которые я подключаю при работе с angular.

В общем если я был полезен для тебя, не поленись просто поделиться этой статьей. В итоге, у тебя на странице будет быстрый доступ к этой статье, а у меня побывают твои друзья если и им эта тема будет интересна. Круто? Круто!

2 комментария к “Настройка Sublime text 3 для веб-разработки и html верстки: ставим эффективные плагины”

  1. I just like the helpful info you provide in your articles.
    I’ll bookmark your blog and take a look at once more
    right here regularly. I’m slightly certain I’ll be told many new stuff proper here!

    Good luck for the next!

    P.S. If you have a minute, would love your feedback on my new website re-design. You can find it
    by searching for «royal cbd» — no sweat if you can’t.

    Keep up the good work!

    Ответить
  2. Hi, Not bad, i looked at your site, and overall I like it, though the first picture appears with a little delay, I would add for this moment a preloader that tells a user with weak internet that the site is loading!

    Ответить

Оставьте комментарий