Меню

Sublime text 3 файл настроек

Настройка 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 потому что:

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

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

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

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

Install Packege Control

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

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

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

Base 16 Color Schemes

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

Terminal

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

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

Читайте также:  Ussd команды мтс настройки интернета

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

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

BracketHighlighter

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

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

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

Color Highlighter

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

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

AutoFileName

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

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

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

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

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

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

HTML/CSS/JS Prettify

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

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

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

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

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

TypeScript/TypeScript Syntax

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

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

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

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

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

Emmet

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

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

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

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

Читайте также:  Монитор acer настройка яркости

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Goto-CSS-Declaration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!

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!

Читайте также:  Drag racing bike edition настройки мотоциклов

Источник

Быстрая настройка Sublime Text 3 для вёрстки сайтов

Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3, установке необходимых для вёрстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.

Вам наверняка знакома ситуация, когда на новом рабочем месте необходимо быстро установить и настроить Sublime Text для работы над новыми проектами. Как правило, тонкая настройка Sublime Text занимает много времени и выполнять её каждый раз не практично и долго.

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.

По-умолчанию Sublime Text выглядит довольно печально:

Установка Package Control в Sublime Text

Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.

Установка плагинов в Sublime Text

Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.

Самые популярные плагины для Sublime Text:

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

Установка плагина вручную

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

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку

«C:\Users\<Ваш пользователь>\AppData\Roaming\Sublime Text 3″
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Источник