Sublime text топ 10 плагины которые обязательно нужны. Emmet, LiveReload.
Vložit
- čas přidán 15. 07. 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 раз приятнее
Это шикарно
Спасибо тебе за ролик, все отлично работает! Вот это действительно хороший канал по веб программированию!!
Спасибо, что ты есть! Шикарный канал, то, что нужно. Жалко, что раньше не нашёл его
Спасибо! Рассказывай о канале всем друзьям кто еще не знает)
Спасибо тебе ! Очень качественное и полезное видео .)
Классное видео! Очень помогло. Спасибо!
Спасибо огромное!
часто пользуюсь SFTP - очень удобная штука, если надо оперативно поправить что-то на удаленном сервере
Я пробовал, мне не очень подошло
не очень подошло, но альтернативы ты не знаешь?
Спасибо за видео, очень помог
За ролик лайк. Вопрос: есть ли плагин, который выделяет несуществующие или отсутствующие файлы? Не присоединенный, отсутствующие картинки и т.п.? В PHPStorm такая функция есть
подскажи пожалуйста, у многих где номера строк в саблайме есть стрелки, с помощью которых можно сворачивать часть кода, у меня таких стрелок нет, как их туда поставить?
спасибо. вопрос по color highlighter: можно ли сделать так, чтобы по умолчанию не подчеркивалось значение цвета в стилях? ибо у меня в любом случае есть подчеркивание (заливка, контур - вопрос второй)
Всё чётко и по делу. Подписался
Бомбезно полезное видео!!!
Спасибо бро, ты лучший !)
Спасибо!
Благодарю!
Подскажите, у кого стоит плагин img-placeholder у вас номально работает? У меня почему то в src=" " не выпадает список с подключением картинок((
спасибо, очень полезно
Отличная подборка. Есть вопрос: пользуюсь плагином sftp - возможно ли при подключении к серверу вывести дерево каталога? чтобы всегда было открыто и выбор файлов из каталога был. Так как этот плагин предоставляет вручную поиск необходимого файла и все каталоги после этого закрываются. Возможно подскажите другой плагин для того чтобы была возможность работы с деревом каталога
Спасибо большое.
Про Emmet чистая правда) без него сейчас как без рук
В Ливрелоад не понял с этим скриптом - его в сэттингсах гдето сохранять не надо? на видео он просто втыкнут в какойто индекс2 html с пробными кодами..
плагин autofilenamme не предлагает никаких вариантов для картинок (или файлов css). Они должны быть сохранены в той же папке где и html?
Awesome! thanks!
Помогитее! Color Highligher и CSS Cоmb включаются одним сочетанием клавиш (ктрл+шифт+С) менюшка с выбором цветов не появляется a CSS Comb выдает ошибку мол выделите текст для сортировки . Что делать? Удалять один из этих двух плагинов не вариант, т. к. оба очень полезные.. Есть ли возможность изменить сочетание клавиш для открытия одного из них?
Есть хороший плагин: trailingSpaces. Удаляет завершающие пробелы из конца строки. Очень удобен.
Sublime 3.2 под Ubuntu. Если в меню View - Syntax не указан язык, то сочетание ! + Tab в Emmet не работает, зато работает ! и Ctrl+E
Слушай, когда сохраняешь файл в конце ставь .html
Например: index.html
Подскажите, что делать если не работает Autoprefixer?
Хотелось бы увидеть установку и настройку vs code
*Всем привет. Подскажите - выделяю текст, выбираю CSScomb - выдает ошибку. Node.js на компе стоит. Заранее спасибо за ответ!)*
какими клавишами можно запустиь файл в браузер?
А почему у меня не подсвечивается синтаксис css файлов. Меняла синтаксис на CSS3, LESS, CSS и другие разные синтаксиса, нормально не подсвечивает?
На много ли лучше 3 версия чем 2 просто я папробывал установить 3 там много плагинов не устанавливается а на второй версии вроде все установилась ? Спасибо)))
Подскажите, пожалуйста, почему в Sublime img и URL не подтягивает папки с img? Плагин AutoFileName установлен
Папка CSS - пуста и в таблице справа значок (stylee. css)вверху не отображается, при нажатии Ctrl+Shift+P , ничего не появляется !!! Какой выход ? В (Package Control: Instal......) вошёл через Preferences, где EMMET ??????? Много непоняток. Поясните.
Ребята, подскажите, как автоматически проставлять комментарий сразу после закрывающиего тега div-а? Чтобы видеть какой класс закрывается. Видел у кого-то в уроках. Поиск молчит.
от души, братан.
Я все сделал как у автора, также установил node.js, т.к. его не было на компьютере. Затем проверил, что он запущен в переменных средах PATH моей Win 10, однако, когда я нажимаю ctrl+shift+p, выбираю Autoprefix CSS и нажимаю ее, то...... ничего не происходит ((( Помогите, пожалуйста, разобраться!!!
Установил emmet. В ранее созданном файле всё работало, а во вновь создаваемом, - нет. !+таб и никаких действий. Долго мучился, но потом подсказали: надо сначала сохранить файл с расширением html. Вроде мелочь...
спасибо тебе, добрый человек )
все равно не помогает
@@user-ew8ev9de1m тем, у кого этот совет не помог, нужно заново включить префикс html. На верхней панели инструментов ищем View, потом Syntax -> HTML, кликаем и проверяем работу плагина. У меня заработало
@@36gradus81 Спасибо, наконец-то заработало
@@36gradus81 Спасибо, человек
Привет, у меня почему-то не работает livereolad, делал все как на видео, но после сейва все равно приходится перезагружать страницу самому
Как сделать так, чтобы в brackets control тэги подсвечивались белым, а не оранжевым?
скачал bracket highliter, а он не добавился в список установленных плагинов, я так понимаю он в 2020 уже по дефолту стоит?
Спасибо тебе огромное
Я использую AutoFileName, emmet, JavaScript Completions, jQuery, LocalizedMenu, Package Control, SublimeLinter.
Нормас
Из SubText перешел на Atom, потом со временем мигрировал (к своему же удивлению, так как не люблю продукты от Microsoft) на VS Code и доволен.
Да VS code неплохой, но мне Sublime как простой редактор нравится, а как IDE я использую PHPStorm
Братишка, всё круто. Но чуть более позитивно. Понимаю, что хочешь срезать время видео и говоришь по делу и быстро, но чуть больше позитива даст больше плодов. Успехов.
Хорошо, спасибо
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема?
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
Все сделал по видео.
Но переходя на сайт ничего не изменилось.
Шрифт маленький, черной полосы нет.
В плагине emmet почему то не работают скобки ( ) Когда делаешь большое выражение и ставишь скобки выдает ошибку unexpected character
А как сделать авторедактирование кода, ну чтобы он красиво становился ??
Спасибо. Очень хорошее видео. Скажи пожалуйста почему плагин Colorhighlighter не отображает цвет в css когда его выделяю?
Выделение перебивает плагин, это не баг, так надо)
@@gumper4634 даже если постовить курсор он не работает((
@@Oksana_Bon ставь color highlight
почему в пекеджконтроле когда вписываешь название плагинов он их не находит ?
поставил на debian ST3 build 3143 уже стоит packagecontrol, можно вызвать ctrl-shift+p
Установил все как нужно но эммет не работает. Ифайл хтмл создал, но автозаполнения нет в чем трабл кто подскажет?
У меня Autoprefix установился, команда появилась, но не префиксирует, ребутал саблайм. И CSS Comb тоже...
Из хороших цветовых тем крутыми считаю :
- bamboo;
-solarize;
-sunrise neo;
-agila cobalt;
-dark hero ;
Чтоб установить их жмякаем комбинацию
shift+ctrl+p
Прописываем
Instal жмём entet
И копируем название темы , жмём enter.
Чтоб применить тему нужно клацнуть "color sheme " и выбрать тему .
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
спасибо
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. Сам по себе это отличный редактор. Не стоит заморачиваться с Саблаймом!!! Поверьте, он Вам понравится.
Ребят подскажите в чем дело устанавливаю ColorPicker а он вылазит в виде обычного окна словно в Paint... т.е. нет этой лупы и такого приятного на вид меню.. уже мозг закипать начинает... не пойму в чем дело..
да и когда пишу color в css документе цвет тоже не выскакивает только на ctrl+shift+c, и то как писал выше как в paint только самому выбирать цвета..
Посоветуйте плагин для работы с FTP.
теги через таб и css свойства и без emmet прописываются, а вот блоки и структура сложная уже нет
в питоне, в sublime text когда начинаю вводить while возникает строка быстрого ввода - > после enter выводит while
pass:
почему это происходит и как настроить просто вывод "while"?
спасибо.
Для пайтона лучше pycharm юзайте, по мне так удобнее раз в 1000
В VSC помоемому почти все перечисленное есть сразу же
где плагин для сравнений? хочу понять какой лучше
Я только учусь, но могу посоветовать для работы с less 2 плагина: LESS и Less2Css
Отличные
Плагин AUTOPREFIXER не работает, сначала выдавал ошибку, что не может найти Node.js, я его установил, но плагин все равно не работает. В чем еще может быть проблема? В винде через командную строку при команде node -v показывает версию 8,12,0
решение такое: оказалось, что его ещё настраивать нужно, по умолчанию он поддерживает последние 2 версии браузеров. Я прописал такое "browsers": ["last 8 versions", "> 0.01%"] и стал добавлять все префиксы. В настройках плагина/ Sublime-Prefences-PackageControl - Autoprefixer
подскажи пожалуйста что делать если таб просто делает отступ , а не как у тебя в видео, заранее благодарю)
Сначала нужно вибрать формат справа внизу " html"
что нужно нажать на мак ос для копирования классов?? :( или что настроить ?:( видел как в sublime копируют код в html и вставляют сразу в css (копируют нажатием контр+тильда,пишут для этого нужно настроить плагин TAG)
я не могу понять какие клавиши у меня установлены по дефолту. учусь на мак ос в subline установил ecsstractor по дефолту пишет кнопки "super+shift+x" не понимаю что за кнопка супер?попробовал контрл команд алт не подходит , как изменить сочетание клавишь тоже ума не хватает + на англ вся программа , подскажи пожалуйста как быть
Вопрос,а как просмотреть код в браузере?
ребят из 2018. Package control уже установлен. ctrl+shift+p -> Package Controll: Install package -> Пишите имя плагина.
Большинство этих плагинов уже установлено!
Здравствуйте. Возможно ли в sublime Text редактирование нескольких одинаковых строк "одновременно" в других файлах!?
Например: я выделяю строку в одном файле нажимаю ctrl+d и меняю таким образом ссылки, домены, и т.д.
Но, такой метод с каждым файлом очень долгий и неудобный! Я за 2дня только 1000 страниц закончил и ещё есть столько же;( если есть способы удобнее подскажите плз.
в саблайме по моему такого нет
А как же те времена, когда для подключения аудио колонок нужно было вносить изменения в autoexec.bat и config.sys?
может как редактор он и удобен, но с навигацией полная жопа.
нет возможности встроить в krusader как дефолтовый редактор чтоб работало редактирование удаленных файлов (sftp)
а без этого, использовать его получается не удобно.. пока работаешь на локале - норм, как только надо работать с удаленкой - он просто юзлесс.
Почему я установил плагин Sidebar Enhancements, а полоски-светофора наверху редактора нет?
Чего чего? какой полоски?
Посмотри,над текстовым полем редактора, под меню находится серо-белая полоска и слева в углу на ней - горизонтально светофор расположен.На этой же полоске написано имя файла HTML2
Какое функциональное назначение у светофора?
Это на маке кнопки закрыть, свернуть и развернуть на полное окно=)
Да, отстал я от жизни:))
улыбнул)
подскажите, какой плагин есть для саблайма, чтобы преобразовать код, который написан в одну строчку (все в куче), в привычный нам код с отступами и переносами строки по вложенностям?
в brackets такой плагин называется Beautify
и в Саблайм он так же называется)
codeformatter, tag
МИСТЕР УГОЛЁК, а как точно он называется? просто Beautify нету. нашел HtmlBeautify, но он делает только отступы у кода, который уже на разных строках разбросан. а код кучей (который весь в одну строку слеплен) на разные строки не разделяет
Не знаю, не пользуюсь таковым
packagecontrol.io/packages/Tag , либо codeformatter
а как так же разделить по полам
Скажи на какой проге рекомендуеш верстать для наченающего программиста?
Visual studio code
@@SuprunAlexey ты будешь делать видео о вёрстке на Visual studio code?
Почему я не могу найти в package control другие плагины кроме emmet?
Не знаю
Отображается без цветов. Все теги, атрибуты и т.д. серого цвета. В чём проблема может быть ?
Настройки во вкладки вью, синтаксис и выбираете нужный, по умолчанию открывается просто текст.
Всем привет! Установил в саблайм несколько плагинов, в том числе и emmet. Но что то пошло не так после перезагрузки и эммет не срабатывает. например после команды ! затем таб не происходит развертывания. Подскажите в чем дело?
документ должен быть сохранен как html тогда буду применяться эмета команды
Спасибо тебе добрый человек)
в .php тоже срабатывает
В brackets установлены все эти плагины кроме EMMET и LIVERELOAD
В VScode тоже, каждому своё
почему не работает css comb
Для тех у кого траблы с emmet`ом попробуйте сочетание клавиш ctrl+e
upd: или просто сохраните файл в формате html/css и т.п., дабы эммит знал че ему делать)
а может ли Livereload обновлять страницу без обновления документа?
Нужно сохранить документ, тогда изменения увидите
Я пользуюсь 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!!!
Зачем LiveReload когда есть Browsersync?
Почему нет
С большим количеством файлов начинает тормозить.
поставил css comb - не работает он. не знаю почему, что только не делал.
Та же беда. Ошибка: CSScomb.py", line 53, in comb
sublime.error_message('CSScomb error:
%s' % stderr.decode('utf-8'))
а што делать если у меня криво работает emmet? типа простие теги делает но сложную структуру не понимает
Попробуйте так: Preferences/Package Settings/Package Control/Settings-User , перезапустить ST, создать файл сразу указав синтаксис html.
как ты разместил две страницы кода на одной странице в одном окне одновременно?
ALT+SHIFT+ 1-10(в зависимости от нужного кол-ва страниц)
COLORHIGHLIGHTER не подчеркивает и не выделяет цвета почему то
поставь COLORHIGHLIGHT он рядом в списке
@@KononovDima У меня та же проблема, спасибо...сейчас отлично)
@@KononovDima да та же проблема была, установил color highlight, всё работает, и очень удобно что всегда цвет подсвечивает
Это на Яблоке"?
Hello, I Arkadii.
Как можно посмотреть установленные плагины?
Preferences -> Package Settings -> Package Control -> Setting User
Что сдедать чтоб CSS Comb заработал? Кто не был задан? 14:15
привет! а как ты открыл вторую сторону для CSS?
alt+shift+1,2,3,4 (точно работает для windows)
view - groups - там на англ (добавить, удалить и тд.)
Вообще то package control сейчас ставится уже из под самого Sublime text 3
Ctrl + shift + p и далее вводим install package control
Круто теперь
эт норм? у моего sublimetext нет менюшуи сверху
шо делать ребята , помогите
а как Вы экран так сделали на два стола для индекса и цсс?
разобрался
гугл помог?
Web Developer Blog нет,поизучал меню)
Как удалить установленные плагины из этой программы?
preferences->package control-> remove packages