Sublime text топ 10 плагины которые обязательно нужны. Emmet, LiveReload.
Вставка
- Опубліковано 15 лип 2017
- Всем привет в этом видео мы обсудим редактор кода Sublime text и его плагины. Я покажу какие плагины Sublime text я использую в своей работе и какие плагины советую установить вам. Покажу детально как работать с плагином emmet все горячие клавиши и настройка плагинов. Так же покажу как настроить плагин LiveReload со всеми нюансами
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
0:46 - Package Control
2:06 - Emmet
5:39 - BracketHighliter
6:17 - AutoPrefixer
7:14 - AutoFileName
8:40 - AllAutoComplete
9:08 - SideBarEnhancements
9:47 - LiveReload
12:12 - ColorHighlighter
12:53 - ColorPicker
13:20 - GIT
13:46 - CSS Comb
14:37 - Тема Sublime Text
Спасибо!!!
Спс
живи сто лет
@@cs3913 😉
Спасибо большое!
Package Control можно устанавливать прямо из редактора не копируя код с сайта!
1) Ctrl + Shift + P
2) Install Package Control
3) Нажать Enter
СПАСИБО
Благодарю
Спаси6ки ^_^
Добренько! Просто и со скоростью! Щелк, тык - Вуаля!
А что делать, если не работает "Ctrl + Shift + P"?
Спасибо тебе за ролик, все отлично работает! Вот это действительно хороший канал по веб программированию!!
Воу, спасибо. Будто глаза открылись, писать код стало в 1000 раз приятнее
Это шикарно
Спасибо, что ты есть! Шикарный канал, то, что нужно. Жалко, что раньше не нашёл его
Спасибо! Рассказывай о канале всем друзьям кто еще не знает)
Спасибо тебе ! Очень качественное и полезное видео .)
Классное видео! Очень помогло. Спасибо!
Спасибо огромное!
Благодарю!
За ролик лайк. Вопрос: есть ли плагин, который выделяет несуществующие или отсутствующие файлы? Не присоединенный, отсутствующие картинки и т.п.? В PHPStorm такая функция есть
Всё чётко и по делу. Подписался
Спасибо за видео, очень помог
Спасибо большое.
часто пользуюсь SFTP - очень удобная штука, если надо оперативно поправить что-то на удаленном сервере
Я пробовал, мне не очень подошло
не очень подошло, но альтернативы ты не знаешь?
Отличная подборка. Есть вопрос: пользуюсь плагином sftp - возможно ли при подключении к серверу вывести дерево каталога? чтобы всегда было открыто и выбор файлов из каталога был. Так как этот плагин предоставляет вручную поиск необходимого файла и все каталоги после этого закрываются. Возможно подскажите другой плагин для того чтобы была возможность работы с деревом каталога
Спасибо бро, ты лучший !)
Спасибо!
спасибо, очень полезно
Спасибо тебе огромное
от души, братан.
Про Emmet чистая правда) без него сейчас как без рук
Есть хороший плагин: trailingSpaces. Удаляет завершающие пробелы из конца строки. Очень удобен.
спасибо. вопрос по color highlighter: можно ли сделать так, чтобы по умолчанию не подчеркивалось значение цвета в стилях? ибо у меня в любом случае есть подчеркивание (заливка, контур - вопрос второй)
спасибо
Из хороших цветовых тем крутыми считаю :
- bamboo;
-solarize;
-sunrise neo;
-agila cobalt;
-dark hero ;
Чтоб установить их жмякаем комбинацию
shift+ctrl+p
Прописываем
Instal жмём entet
И копируем название темы , жмём enter.
Чтоб применить тему нужно клацнуть "color sheme " и выбрать тему .
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
Бомбезно полезное видео!!!
Awesome! thanks!
Хотелось бы увидеть установку и настройку vs code
Я использую AutoFileName, emmet, JavaScript Completions, jQuery, LocalizedMenu, Package Control, SublimeLinter.
Нормас
Из SubText перешел на Atom, потом со временем мигрировал (к своему же удивлению, так как не люблю продукты от Microsoft) на VS Code и доволен.
Да VS code неплохой, но мне Sublime как простой редактор нравится, а как IDE я использую PHPStorm
подскажи пожалуйста, у многих где номера строк в саблайме есть стрелки, с помощью которых можно сворачивать часть кода, у меня таких стрелок нет, как их туда поставить?
Установил emmet. В ранее созданном файле всё работало, а во вновь создаваемом, - нет. !+таб и никаких действий. Долго мучился, но потом подсказали: надо сначала сохранить файл с расширением html. Вроде мелочь...
спасибо тебе, добрый человек )
все равно не помогает
@@user-ew8ev9de1m тем, у кого этот совет не помог, нужно заново включить префикс html. На верхней панели инструментов ищем View, потом Syntax -> HTML, кликаем и проверяем работу плагина. У меня заработало
@@36gradus81 Спасибо, наконец-то заработало
@@36gradus81 Спасибо, человек
Братишка, всё круто. Но чуть более позитивно. Понимаю, что хочешь срезать время видео и говоришь по делу и быстро, но чуть больше позитива даст больше плодов. Успехов.
Хорошо, спасибо
ребят из 2018. Package control уже установлен. ctrl+shift+p -> Package Controll: Install package -> Пишите имя плагина.
Большинство этих плагинов уже установлено!
Подскажите, у кого стоит плагин img-placeholder у вас номально работает? У меня почему то в src=" " не выпадает список с подключением картинок((
Sublime 3.2 под Ubuntu. Если в меню View - Syntax не указан язык, то сочетание ! + Tab в Emmet не работает, зато работает ! и Ctrl+E
Слушай, когда сохраняешь файл в конце ставь .html
Например: index.html
Помогитее! Color Highligher и CSS Cоmb включаются одним сочетанием клавиш (ктрл+шифт+С) менюшка с выбором цветов не появляется a CSS Comb выдает ошибку мол выделите текст для сортировки . Что делать? Удалять один из этих двух плагинов не вариант, т. к. оба очень полезные.. Есть ли возможность изменить сочетание клавиш для открытия одного из них?
На много ли лучше 3 версия чем 2 просто я папробывал установить 3 там много плагинов не устанавливается а на второй версии вроде все установилась ? Спасибо)))
плагин autofilenamme не предлагает никаких вариантов для картинок (или файлов css). Они должны быть сохранены в той же папке где и html?
В Ливрелоад не понял с этим скриптом - его в сэттингсах гдето сохранять не надо? на видео он просто втыкнут в какойто индекс2 html с пробными кодами..
*Всем привет. Подскажите - выделяю текст, выбираю CSScomb - выдает ошибку. Node.js на компе стоит. Заранее спасибо за ответ!)*
Спасибо. Очень хорошее видео. Скажи пожалуйста почему плагин Colorhighlighter не отображает цвет в css когда его выделяю?
Выделение перебивает плагин, это не баг, так надо)
@@gumper4634 даже если постовить курсор он не работает((
@@Oksana_Bon ставь color highlight
Подскажите, пожалуйста, почему в Sublime img и URL не подтягивает папки с img? Плагин AutoFileName установлен
Ребята, подскажите, как автоматически проставлять комментарий сразу после закрывающиего тега div-а? Чтобы видеть какой класс закрывается. Видел у кого-то в уроках. Поиск молчит.
А почему у меня не подсвечивается синтаксис css файлов. Меняла синтаксис на CSS3, LESS, CSS и другие разные синтаксиса, нормально не подсвечивает?
6:17 - AutoPrefixer
9:47 - LiveReload
13:46 - CSS Comb
Я пользуюсь Brackets. И там есть классный плагин для код-стайла - Beautify. А вообще по плагинам в Brackets есть хорошая статья на хабре habrahabr.ru/post/242623/ . А т.к. я нашла плагины в Brackets, которые вы перечислили для Sublime - то, думаю, что из этой статьи и вы извлечете пользу:)
Спасибо
Brackets действительно лучший frontend редактор, а для backend разработки лучше чем PhpStorm пока не знаю, но советую попробовать Aptana Studio 3 и к тому же Aptana GNU GPL, то есть бесплатная
У Sublime есть плагин Prettify, делает тоже самое даже больше
Sublime3 much more beteer then Brackets!!!
какими клавишами можно запустиь файл в браузер?
Я все сделал как у автора, также установил node.js, т.к. его не было на компьютере. Затем проверил, что он запущен в переменных средах PATH моей Win 10, однако, когда я нажимаю ctrl+shift+p, выбираю Autoprefix CSS и нажимаю ее, то...... ничего не происходит ((( Помогите, пожалуйста, разобраться!!!
Папка CSS - пуста и в таблице справа значок (stylee. css)вверху не отображается, при нажатии Ctrl+Shift+P , ничего не появляется !!! Какой выход ? В (Package Control: Instal......) вошёл через Preferences, где EMMET ??????? Много непоняток. Поясните.
Привет, у меня почему-то не работает livereolad, делал все как на видео, но после сейва все равно приходится перезагружать страницу самому
скачал bracket highliter, а он не добавился в список установленных плагинов, я так понимаю он в 2020 уже по дефолту стоит?
Подскажите, что делать если не работает Autoprefixer?
поставил на debian ST3 build 3143 уже стоит packagecontrol, можно вызвать ctrl-shift+p
А как же те времена, когда для подключения аудио колонок нужно было вносить изменения в autoexec.bat и config.sys?
А как сделать авторедактирование кода, ну чтобы он красиво становился ??
Я только учусь, но могу посоветовать для работы с less 2 плагина: LESS и Less2Css
Отличные
Как сделать так, чтобы в brackets control тэги подсвечивались белым, а не оранжевым?
Скажи на какой проге рекомендуеш верстать для наченающего программиста?
Visual studio code
@@SuprunAlexey ты будешь делать видео о вёрстке на Visual studio code?
В плагине emmet почему то не работают скобки ( ) Когда делаешь большое выражение и ставишь скобки выдает ошибку unexpected character
Здравствуйте. Возможно ли в sublime Text редактирование нескольких одинаковых строк "одновременно" в других файлах!?
Например: я выделяю строку в одном файле нажимаю ctrl+d и меняю таким образом ссылки, домены, и т.д.
Но, такой метод с каждым файлом очень долгий и неудобный! Я за 2дня только 1000 страниц закончил и ещё есть столько же;( если есть способы удобнее подскажите плз.
в саблайме по моему такого нет
Для тех у кого траблы с emmet`ом попробуйте сочетание клавиш ctrl+e
upd: или просто сохраните файл в формате html/css и т.п., дабы эммит знал че ему делать)
Посоветуйте плагин для работы с FTP.
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
я не могу понять какие клавиши у меня установлены по дефолту. учусь на мак ос в subline установил ecsstractor по дефолту пишет кнопки "super+shift+x" не понимаю что за кнопка супер?попробовал контрл команд алт не подходит , как изменить сочетание клавишь тоже ума не хватает + на англ вся программа , подскажи пожалуйста как быть
подскажите, какой плагин есть для саблайма, чтобы преобразовать код, который написан в одну строчку (все в куче), в привычный нам код с отступами и переносами строки по вложенностям?
в brackets такой плагин называется Beautify
и в Саблайм он так же называется)
codeformatter, tag
МИСТЕР УГОЛЁК, а как точно он называется? просто Beautify нету. нашел HtmlBeautify, но он делает только отступы у кода, который уже на разных строках разбросан. а код кучей (который весь в одну строку слеплен) на разные строки не разделяет
Не знаю, не пользуюсь таковым
packagecontrol.io/packages/Tag , либо codeformatter
В VSC помоемому почти все перечисленное есть сразу же
теги через таб и css свойства и без emmet прописываются, а вот блоки и структура сложная уже нет
У меня Autoprefix установился, команда появилась, но не префиксирует, ребутал саблайм. И CSS Comb тоже...
Все сделал по видео.
Но переходя на сайт ничего не изменилось.
Шрифт маленький, черной полосы нет.
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема?
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
может как редактор он и удобен, но с навигацией полная жопа.
нет возможности встроить в krusader как дефолтовый редактор чтоб работало редактирование удаленных файлов (sftp)
а без этого, использовать его получается не удобно.. пока работаешь на локале - норм, как только надо работать с удаленкой - он просто юзлесс.
почему в пекеджконтроле когда вписываешь название плагинов он их не находит ?
в питоне, в sublime text когда начинаю вводить while возникает строка быстрого ввода - > после enter выводит while
pass:
почему это происходит и как настроить просто вывод "while"?
спасибо.
Для пайтона лучше pycharm юзайте, по мне так удобнее раз в 1000
Ребят подскажите в чем дело устанавливаю ColorPicker а он вылазит в виде обычного окна словно в Paint... т.е. нет этой лупы и такого приятного на вид меню.. уже мозг закипать начинает... не пойму в чем дело..
да и когда пишу color в css документе цвет тоже не выскакивает только на ctrl+shift+c, и то как писал выше как в paint только самому выбирать цвета..
в 2020 году это уже все по умолчанию. даже тема monokai )))
Это хорошо
@@SuprunAlexey я поставил sublime и ничего не настраивал. все по умолчанию с коробки. а все работает как вы в видео показываете уже с подключенными пакетами . в конце решил поставить тему как у вас, смотрю она уже стоит :)
@@sh.konstantin Emmet и автообновление не стоит)
Autoprefixer не работает, node js поставил для него, LiveReload тоже. Для All autocomlete такой фикс помог: sridhar.blog/enable-autocomplete-css-selectors-sublime-text/. Ещё полезный плагин это Auto-save, сохраняет файл при любом изменении в нём.
AdvanceNewFile чтоб хоть как то начать работать)
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема? В винде через командную строку при команде node -v показывает версию 8,12,0
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
Если кто не разобрался с EMMET. Я не разобрался какой установить, их там 3, установил EMMET и Emmet Css. После установки у вас появится окно с текстом, у меня англ.версия, если у кого тоже, то там просто благодарность за установку.
Закрываем окно, и зажимаем CTRL + Teb, либо CTRL + E. Что дальше?
1. В нижнем правом углу, правее "Tab Size" выбираем тип текста - HTML. Нажимаем CTRL+C, пишем любое имя и сохраняем файл.
2. Пишем " ! ". И нажимаем не Enter, а TAB. А теперь все готово. И HTML вставка, и коды сами закрываются.
3. Уравнение на быстрое написание. h1>p(ul(li*8), нажимаем enter. Знак " > ", это та же стрелка, а скобка означает что внутри контейнера p, будет список ul, внутри которого будут пункты, я умножил на 8, т.е. пунктов будет 8.
Все. Успехов) Главный учитель - это практика, главный навык тут - упорство)
Установил все как нужно но эммет не работает. Ифайл хтмл создал, но автозаполнения нет в чем трабл кто подскажет?
где плагин для сравнений? хочу понять какой лучше
Почему я установил плагин Sidebar Enhancements, а полоски-светофора наверху редактора нет?
Чего чего? какой полоски?
Посмотри,над текстовым полем редактора, под меню находится серо-белая полоска и слева в углу на ней - горизонтально светофор расположен.На этой же полоске написано имя файла HTML2
Какое функциональное назначение у светофора?
Это на маке кнопки закрыть, свернуть и развернуть на полное окно=)
Да, отстал я от жизни:))
улыбнул)
autoprefixer ошибку выдает "autoprefixer couldn't find node.js. Make sure it's in your $PATH by running node-v in your command-line"
можно установить node.js
все легко решилось) это ошибка означает что программа не может найти node.js, т.к. у многих его нет на компьютере надо скачать и установить его вот ссылка: nodejs.org/en/ и все будет работать
@@maxwelplay2851 Подскажите, пожалуйста, как Вы исправили эту ошибку. Дело в том, что я скачал и установил node.js, однако, плагин по-прежнему не работает ((((
@@ne_psixyu поделись пожалуйста а то сам в такой ж... нахожусь голову ломаю
@@rus1006 Делюсь )))) Скачайте и установите себе Visual Studio Code от компании Microsoft. Сам по себе это отличный редактор. Не стоит заморачиваться с Саблаймом!!! Поверьте, он Вам понравится.
Для неосведомлённых, package control встроен в sublime text, и не надо копипастить с сайта, открываем sublime text, жмём ctrl/cmd+shift+p и набираем install package control вот и всё.
Теперь так)
Вопрос,а как просмотреть код в браузере?
подскажи пожалуйста что делать если таб просто делает отступ , а не как у тебя в видео, заранее благодарю)
Сначала нужно вибрать формат справа внизу " html"
Всем привет! Установил в саблайм несколько плагинов, в том числе и emmet. Но что то пошло не так после перезагрузки и эммет не срабатывает. например после команды ! затем таб не происходит развертывания. Подскажите в чем дело?
документ должен быть сохранен как html тогда буду применяться эмета команды
Спасибо тебе добрый человек)
в .php тоже срабатывает
BRATAN SPASIBO TEBE
а как так же разделить по полам
Это на Яблоке"?
Hello, I Arkadii.
а может ли Livereload обновлять страницу без обновления документа?
Нужно сохранить документ, тогда изменения увидите
привет! а как ты открыл вторую сторону для CSS?
alt+shift+1,2,3,4 (точно работает для windows)
view - groups - там на англ (добавить, удалить и тд.)
3:06 {Я ток учусь на програмиста} Увидел, охерел, скачал
так стоп, вроде там в послед версия и без плагинов все также, я пишу
@@belial473 там не так удобно, с Emmet писать намного меньше надо
Лицензию-то купи на саблайм ;)
Зачем?
Web Developer Blog Странно слышать от разработчика софта подобный вопрос. Всего хорошего.
Нет лишних денег, сами понимаете)
дорого
Рекомендую присмотреться к редактору Visual Code Studio. Сейчас стал намного крут. Отказался от сублайм в пользу него
когда практика по jQuery??
Мало просмотров по jQuery как то, будет просто практика, со всем, время от времени будем jQuery применять
ждем
Вообще то package control сейчас ставится уже из под самого Sublime text 3
Ctrl + shift + p и далее вводим install package control
Круто теперь
а как Вы экран так сделали на два стола для индекса и цсс?
разобрался
гугл помог?
Web Developer Blog нет,поизучал меню)
Почему я не могу найти в package control другие плагины кроме emmet?
Не знаю
COLORHIGHLIGHTER не подчеркивает и не выделяет цвета почему то
поставь COLORHIGHLIGHT он рядом в списке
@@KononovDima У меня та же проблема, спасибо...сейчас отлично)
@@KononovDima да та же проблема была, установил color highlight, всё работает, и очень удобно что всегда цвет подсвечивает