Sublime text топ 10 плагины которые обязательно нужны. Emmet, LiveReload.
Всем привет в этом видео мы обсудим редактор кода 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
========================================================
Пікірлер: 312
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
@revolt_321
4 жыл бұрын
Спасибо!!!
@iskandar_ayti5929
4 жыл бұрын
Спс
@cs3913
3 жыл бұрын
живи сто лет
@SkilleR2
3 жыл бұрын
@@cs3913 😉
@xake4chik722
3 жыл бұрын
Спасибо большое!
Package Control можно устанавливать прямо из редактора не копируя код с сайта! 1) Ctrl + Shift + P 2) Install Package Control 3) Нажать Enter
@N1F90
5 жыл бұрын
СПАСИБО
@poslednycent7772
4 жыл бұрын
Благодарю
@belligalaton9091
4 жыл бұрын
Спаси6ки ^_^
@user-jl7eu7bm1k
4 жыл бұрын
Добренько! Просто и со скоростью! Щелк, тык - Вуаля!
@SwEikil
4 жыл бұрын
А что делать, если не работает "Ctrl + Shift + P"?
Воу, спасибо. Будто глаза открылись, писать код стало в 1000 раз приятнее
@SuprunAlexey
5 жыл бұрын
Это шикарно
Спасибо тебе за ролик, все отлично работает! Вот это действительно хороший канал по веб программированию!!
Спасибо, что ты есть! Шикарный канал, то, что нужно. Жалко, что раньше не нашёл его
@SuprunAlexey
7 жыл бұрын
Спасибо! Рассказывай о канале всем друзьям кто еще не знает)
Спасибо тебе ! Очень качественное и полезное видео .)
За ролик лайк. Вопрос: есть ли плагин, который выделяет несуществующие или отсутствующие файлы? Не присоединенный, отсутствующие картинки и т.п.? В PHPStorm такая функция есть
Классное видео! Очень помогло. Спасибо!
спасибо. вопрос по color highlighter: можно ли сделать так, чтобы по умолчанию не подчеркивалось значение цвета в стилях? ибо у меня в любом случае есть подчеркивание (заливка, контур - вопрос второй)
Спасибо огромное!
Отличная подборка. Есть вопрос: пользуюсь плагином sftp - возможно ли при подключении к серверу вывести дерево каталога? чтобы всегда было открыто и выбор файлов из каталога был. Так как этот плагин предоставляет вручную поиск необходимого файла и все каталоги после этого закрываются. Возможно подскажите другой плагин для того чтобы была возможность работы с деревом каталога
Всё чётко и по делу. Подписался
подскажи пожалуйста, у многих где номера строк в саблайме есть стрелки, с помощью которых можно сворачивать часть кода, у меня таких стрелок нет, как их туда поставить?
Спасибо за видео, очень помог
часто пользуюсь SFTP - очень удобная штука, если надо оперативно поправить что-то на удаленном сервере
@SuprunAlexey
7 жыл бұрын
Я пробовал, мне не очень подошло
@grantorino3465
6 жыл бұрын
не очень подошло, но альтернативы ты не знаешь?
Подскажите, у кого стоит плагин img-placeholder у вас номально работает? У меня почему то в src=" " не выпадает список с подключением картинок((
Sublime 3.2 под Ubuntu. Если в меню View - Syntax не указан язык, то сочетание ! + Tab в Emmet не работает, зато работает ! и Ctrl+E
@khanbatiy8274
4 жыл бұрын
Слушай, когда сохраняешь файл в конце ставь .html Например: index.html
Спасибо бро, ты лучший !)
@SuprunAlexey
6 жыл бұрын
Спасибо!
плагин autofilenamme не предлагает никаких вариантов для картинок (или файлов css). Они должны быть сохранены в той же папке где и html?
Бомбезно полезное видео!!!
Помогитее! Color Highligher и CSS Cоmb включаются одним сочетанием клавиш (ктрл+шифт+С) менюшка с выбором цветов не появляется a CSS Comb выдает ошибку мол выделите текст для сортировки . Что делать? Удалять один из этих двух плагинов не вариант, т. к. оба очень полезные.. Есть ли возможность изменить сочетание клавиш для открытия одного из них?
В Ливрелоад не понял с этим скриптом - его в сэттингсах гдето сохранять не надо? на видео он просто втыкнут в какойто индекс2 html с пробными кодами..
Спасибо большое.
Благодарю!
*Всем привет. Подскажите - выделяю текст, выбираю CSScomb - выдает ошибку. Node.js на компе стоит. Заранее спасибо за ответ!)*
Установил emmet. В ранее созданном файле всё работало, а во вновь создаваемом, - нет. !+таб и никаких действий. Долго мучился, но потом подсказали: надо сначала сохранить файл с расширением html. Вроде мелочь...
@oDrova
5 жыл бұрын
спасибо тебе, добрый человек )
@user-ew8ev9de1m
5 жыл бұрын
все равно не помогает
@36gradus81
5 жыл бұрын
@@user-ew8ev9de1m тем, у кого этот совет не помог, нужно заново включить префикс html. На верхней панели инструментов ищем View, потом Syntax -> HTML, кликаем и проверяем работу плагина. У меня заработало
@user-pd9rl3wn7f
5 жыл бұрын
@@36gradus81 Спасибо, наконец-то заработало
@mikhailaskh921
5 жыл бұрын
@@36gradus81 Спасибо, человек
спасибо, очень полезно
На много ли лучше 3 версия чем 2 просто я папробывал установить 3 там много плагинов не устанавливается а на второй версии вроде все установилась ? Спасибо)))
Про Emmet чистая правда) без него сейчас как без рук
Папка CSS - пуста и в таблице справа значок (stylee. css)вверху не отображается, при нажатии Ctrl+Shift+P , ничего не появляется !!! Какой выход ? В (Package Control: Instal......) вошёл через Preferences, где EMMET ??????? Много непоняток. Поясните.
Подскажите, пожалуйста, почему в Sublime img и URL не подтягивает папки с img? Плагин AutoFileName установлен
Подскажите, что делать если не работает Autoprefixer?
А почему у меня не подсвечивается синтаксис css файлов. Меняла синтаксис на CSS3, LESS, CSS и другие разные синтаксиса, нормально не подсвечивает?
Спасибо. Очень хорошее видео. Скажи пожалуйста почему плагин Colorhighlighter не отображает цвет в css когда его выделяю?
@gumper4634
5 жыл бұрын
Выделение перебивает плагин, это не баг, так надо)
@Oksana_Bon
4 жыл бұрын
@@gumper4634 даже если постовить курсор он не работает((
@evgenykolodenets3683
4 жыл бұрын
@@Oksana_Bon ставь color highlight
Я все сделал как у автора, также установил node.js, т.к. его не было на компьютере. Затем проверил, что он запущен в переменных средах PATH моей Win 10, однако, когда я нажимаю ctrl+shift+p, выбираю Autoprefix CSS и нажимаю ее, то...... ничего не происходит ((( Помогите, пожалуйста, разобраться!!!
какими клавишами можно запустиь файл в браузер?
Awesome! thanks!
Ребята, подскажите, как автоматически проставлять комментарий сразу после закрывающиего тега div-а? Чтобы видеть какой класс закрывается. Видел у кого-то в уроках. Поиск молчит.
Есть хороший плагин: trailingSpaces. Удаляет завершающие пробелы из конца строки. Очень удобен.
Спасибо тебе огромное
спасибо
от души, братан.
Хотелось бы увидеть установку и настройку vs code
Привет, у меня почему-то не работает livereolad, делал все как на видео, но после сейва все равно приходится перезагружать страницу самому
Я использую AutoFileName, emmet, JavaScript Completions, jQuery, LocalizedMenu, Package Control, SublimeLinter.
@SuprunAlexey
4 жыл бұрын
Нормас
скачал bracket highliter, а он не добавился в список установленных плагинов, я так понимаю он в 2020 уже по дефолту стоит?
Как сделать так, чтобы в brackets control тэги подсвечивались белым, а не оранжевым?
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема?
@user-jh5pw6lv9k
5 жыл бұрын
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
поставил на debian ST3 build 3143 уже стоит packagecontrol, можно вызвать ctrl-shift+p
Из хороших цветовых тем крутыми считаю : - bamboo; -solarize; -sunrise neo; -agila cobalt; -dark hero ; Чтоб установить их жмякаем комбинацию shift+ctrl+p Прописываем Instal жмём entet И копируем название темы , жмём enter. Чтоб применить тему нужно клацнуть "color sheme " и выбрать тему .
@user-mi4kj4gr7t
2 жыл бұрын
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
В плагине emmet почему то не работают скобки ( ) Когда делаешь большое выражение и ставишь скобки выдает ошибку unexpected character
Братишка, всё круто. Но чуть более позитивно. Понимаю, что хочешь срезать время видео и говоришь по делу и быстро, но чуть больше позитива даст больше плодов. Успехов.
@SuprunAlexey
4 жыл бұрын
Хорошо, спасибо
Ребят подскажите в чем дело устанавливаю ColorPicker а он вылазит в виде обычного окна словно в Paint... т.е. нет этой лупы и такого приятного на вид меню.. уже мозг закипать начинает... не пойму в чем дело..
@Sadhir-Dzen
6 жыл бұрын
да и когда пишу color в css документе цвет тоже не выскакивает только на ctrl+shift+c, и то как писал выше как в paint только самому выбирать цвета..
У меня Autoprefix установился, команда появилась, но не префиксирует, ребутал саблайм. И CSS Comb тоже...
Из SubText перешел на Atom, потом со временем мигрировал (к своему же удивлению, так как не люблю продукты от Microsoft) на VS Code и доволен.
@SuprunAlexey
7 жыл бұрын
Да VS code неплохой, но мне Sublime как простой редактор нравится, а как IDE я использую PHPStorm
А как сделать авторедактирование кода, ну чтобы он красиво становился ??
в питоне, в sublime text когда начинаю вводить while возникает строка быстрого ввода - > после enter выводит while pass: почему это происходит и как настроить просто вывод "while"? спасибо.
@jebbathehop
6 жыл бұрын
Для пайтона лучше pycharm юзайте, по мне так удобнее раз в 1000
почему в пекеджконтроле когда вписываешь название плагинов он их не находит ?
Посоветуйте плагин для работы с FTP.
подскажите, какой плагин есть для саблайма, чтобы преобразовать код, который написан в одну строчку (все в куче), в привычный нам код с отступами и переносами строки по вложенностям? в brackets такой плагин называется Beautify
@user-dc7ot2lm1m
7 жыл бұрын
и в Саблайм он так же называется)
@mercurykd
7 жыл бұрын
codeformatter, tag
@shorohovvs
7 жыл бұрын
МИСТЕР УГОЛЁК, а как точно он называется? просто Beautify нету. нашел HtmlBeautify, но он делает только отступы у кода, который уже на разных строках разбросан. а код кучей (который весь в одну строку слеплен) на разные строки не разделяет
@SuprunAlexey
7 жыл бұрын
Не знаю, не пользуюсь таковым
@mercurykd
7 жыл бұрын
packagecontrol.io/packages/Tag , либо codeformatter
Все сделал по видео. Но переходя на сайт ничего не изменилось. Шрифт маленький, черной полосы нет.
В VSC помоемому почти все перечисленное есть сразу же
Здравствуйте. Возможно ли в sublime Text редактирование нескольких одинаковых строк "одновременно" в других файлах!? Например: я выделяю строку в одном файле нажимаю ctrl+d и меняю таким образом ссылки, домены, и т.д. Но, такой метод с каждым файлом очень долгий и неудобный! Я за 2дня только 1000 страниц закончил и ещё есть столько же;( если есть способы удобнее подскажите плз.
@SuprunAlexey
5 жыл бұрын
в саблайме по моему такого нет
Установил все как нужно но эммет не работает. Ифайл хтмл создал, но автозаполнения нет в чем трабл кто подскажет?
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
@user-mi4kj4gr7t
2 жыл бұрын
я не могу понять какие клавиши у меня установлены по дефолту. учусь на мак ос в subline установил ecsstractor по дефолту пишет кнопки "super+shift+x" не понимаю что за кнопка супер?попробовал контрл команд алт не подходит , как изменить сочетание клавишь тоже ума не хватает + на англ вся программа , подскажи пожалуйста как быть
Скажи на какой проге рекомендуеш верстать для наченающего программиста?
@SuprunAlexey
5 жыл бұрын
Visual studio code
@viktornester8531
5 жыл бұрын
@@SuprunAlexey ты будешь делать видео о вёрстке на Visual studio code?
подскажи пожалуйста что делать если таб просто делает отступ , а не как у тебя в видео, заранее благодарю)
@oleksandromelchenko3627
5 жыл бұрын
Сначала нужно вибрать формат справа внизу " html"
autoprefixer ошибку выдает "autoprefixer couldn't find node.js. Make sure it's in your $PATH by running node-v in your command-line"
@user-jr1ov7bo4m
6 жыл бұрын
можно установить node.js
@maxwelplay2851
6 жыл бұрын
все легко решилось) это ошибка означает что программа не может найти node.js, т.к. у многих его нет на компьютере надо скачать и установить его вот ссылка: nodejs.org/en/ и все будет работать
@ne_psixyu
5 жыл бұрын
@@maxwelplay2851 Подскажите, пожалуйста, как Вы исправили эту ошибку. Дело в том, что я скачал и установил node.js, однако, плагин по-прежнему не работает ((((
@rus1006
5 жыл бұрын
@@ne_psixyu поделись пожалуйста а то сам в такой ж... нахожусь голову ломаю
@ne_psixyu
5 жыл бұрын
@@rus1006 Делюсь )))) Скачайте и установите себе Visual Studio Code от компании Microsoft. Сам по себе это отличный редактор. Не стоит заморачиваться с Саблаймом!!! Поверьте, он Вам понравится.
теги через таб и css свойства и без emmet прописываются, а вот блоки и структура сложная уже нет
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема? В винде через командную строку при команде node -v показывает версию 8,12,0
@user-jh5pw6lv9k
5 жыл бұрын
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
Почему я установил плагин Sidebar Enhancements, а полоски-светофора наверху редактора нет?
@SuprunAlexey
7 жыл бұрын
Чего чего? какой полоски?
@user-vd9vy3ff8t
7 жыл бұрын
Посмотри,над текстовым полем редактора, под меню находится серо-белая полоска и слева в углу на ней - горизонтально светофор расположен.На этой же полоске написано имя файла HTML2 Какое функциональное назначение у светофора?
@SuprunAlexey
7 жыл бұрын
Это на маке кнопки закрыть, свернуть и развернуть на полное окно=)
@user-vd9vy3ff8t
7 жыл бұрын
Да, отстал я от жизни:))
@abandoned7501
7 жыл бұрын
улыбнул)
Всем привет! Установил в саблайм несколько плагинов, в том числе и emmet. Но что то пошло не так после перезагрузки и эммет не срабатывает. например после команды ! затем таб не происходит развертывания. Подскажите в чем дело?
@user-fe2lb9vc1f
6 жыл бұрын
документ должен быть сохранен как html тогда буду применяться эмета команды
@denispetrov3478
6 жыл бұрын
Спасибо тебе добрый человек)
@user-vs3yh4dn7l
5 жыл бұрын
в .php тоже срабатывает
ребят из 2018. Package control уже установлен. ctrl+shift+p -> Package Controll: Install package -> Пишите имя плагина. Большинство этих плагинов уже установлено!
где плагин для сравнений? хочу понять какой лучше
Вопрос,а как просмотреть код в браузере?
Я только учусь, но могу посоветовать для работы с less 2 плагина: LESS и Less2Css
@SuprunAlexey
6 жыл бұрын
Отличные
может как редактор он и удобен, но с навигацией полная жопа. нет возможности встроить в krusader как дефолтовый редактор чтоб работало редактирование удаленных файлов (sftp) а без этого, использовать его получается не удобно.. пока работаешь на локале - норм, как только надо работать с удаленкой - он просто юзлесс.
Я пользуюсь Brackets. И там есть классный плагин для код-стайла - Beautify. А вообще по плагинам в Brackets есть хорошая статья на хабре habrahabr.ru/post/242623/ . А т.к. я нашла плагины в Brackets, которые вы перечислили для Sublime - то, думаю, что из этой статьи и вы извлечете пользу:)
@SuprunAlexey
7 жыл бұрын
Спасибо
@sovetit
6 жыл бұрын
Brackets действительно лучший frontend редактор, а для backend разработки лучше чем PhpStorm пока не знаю, но советую попробовать Aptana Studio 3 и к тому же Aptana GNU GPL, то есть бесплатная
@servit__metrica1235
6 жыл бұрын
У Sublime есть плагин Prettify, делает тоже самое даже больше
@prsion1925
6 жыл бұрын
Sublime3 much more beteer then Brackets!!!
а как так же разделить по полам
а может ли Livereload обновлять страницу без обновления документа?
@user-uh1ec4yd4k
5 жыл бұрын
Нужно сохранить документ, тогда изменения увидите
COLORHIGHLIGHTER не подчеркивает и не выделяет цвета почему то
@KononovDima
5 жыл бұрын
поставь COLORHIGHLIGHT он рядом в списке
@veronicacol4134
5 жыл бұрын
@@KononovDima У меня та же проблема, спасибо...сейчас отлично)
@khramov2736
4 жыл бұрын
@@KononovDima да та же проблема была, установил color highlight, всё работает, и очень удобно что всегда цвет подсвечивает
В brackets установлены все эти плагины кроме EMMET и LIVERELOAD
@SuprunAlexey
4 жыл бұрын
В VScode тоже, каждому своё
Почему я не могу найти в package control другие плагины кроме emmet?
@SuprunAlexey
4 жыл бұрын
Не знаю
6:17 - AutoPrefixer 9:47 - LiveReload 13:46 - CSS Comb
Для тех у кого траблы с emmet`ом попробуйте сочетание клавиш ctrl+e
@user-vz2bv8qb2v
5 жыл бұрын
upd: или просто сохраните файл в формате html/css и т.п., дабы эммит знал че ему делать)
BRATAN SPASIBO TEBE
А как же те времена, когда для подключения аудио колонок нужно было вносить изменения в autoexec.bat и config.sys?
Hello, I Arkadii.
привет! а как ты открыл вторую сторону для CSS?
@mslark21
5 жыл бұрын
alt+shift+1,2,3,4 (точно работает для windows)
@Stieg_W
5 жыл бұрын
view - groups - там на англ (добавить, удалить и тд.)
Отображается без цветов. Все теги, атрибуты и т.д. серого цвета. В чём проблема может быть ?
@jebbathehop
6 жыл бұрын
Настройки во вкладки вью, синтаксис и выбираете нужный, по умолчанию открывается просто текст.
Зачем LiveReload когда есть Browsersync?
@SuprunAlexey
7 жыл бұрын
Почему нет
@user-nc7sd2qz3b
5 жыл бұрын
С большим количеством файлов начинает тормозить.
почему не работает css comb
Это на Яблоке"?
в 2020 году это уже все по умолчанию. даже тема monokai )))
@SuprunAlexey
4 жыл бұрын
Это хорошо
@sh.konstantin
4 жыл бұрын
@@SuprunAlexey я поставил sublime и ничего не настраивал. все по умолчанию с коробки. а все работает как вы в видео показываете уже с подключенными пакетами . в конце решил поставить тему как у вас, смотрю она уже стоит :)
@drunken_rubbish
4 жыл бұрын
@@sh.konstantin Emmet и автообновление не стоит)
AdvanceNewFile чтоб хоть как то начать работать)
поставил css comb - не работает он. не знаю почему, что только не делал.
@skillbroshow2482
5 жыл бұрын
Та же беда. Ошибка: CSScomb.py", line 53, in comb sublime.error_message('CSScomb error: %s' % stderr.decode('utf-8'))
как ты разместил две страницы кода на одной странице в одном окне одновременно?
@AL-ip7yf
5 жыл бұрын
ALT+SHIFT+ 1-10(в зависимости от нужного кол-ва страниц)
а как Вы экран так сделали на два стола для индекса и цсс?
@user-ue6cn1ie7l
6 жыл бұрын
разобрался
@SuprunAlexey
6 жыл бұрын
гугл помог?
@user-ue6cn1ie7l
6 жыл бұрын
Web Developer Blog нет,поизучал меню)
а што делать если у меня криво работает emmet? типа простие теги делает но сложную структуру не понимает
@irinaiferova6471
6 жыл бұрын
Попробуйте так: Preferences/Package Settings/Package Control/Settings-User , перезапустить ST, создать файл сразу указав синтаксис html.
Как можно посмотреть установленные плагины?
@SuprunAlexey
5 жыл бұрын
Preferences -> Package Settings -> Package Control -> Setting User