Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)
Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.
1. Установка программы и контроль за дополнениями (Package Control)
- Устанавливаем Sublime Text 3. Тут всё просто — качаем и запускаем.
- Теперь нужно открыть возможность добавления пакетов.
Она по умолчанию закрытапоэтому: Открываем консоль ctrl+`(ё), или идём в меню (View > Show Console). Вставляем туда код взятый с официального сайта (import urllib.request,os,ha...).
Как подсказали друзья в комментариях — теперь этот пункт можно пропустить.
- Теперь нажимаем ctrl/?+shift+p или в меню (Tool > Command Palette).
- Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.
2. Настройки программы:
- Используем пробелы, вместо
табов.
«translate_tabs_to_spaces»: true
- Размер
табаравен 4 пробела.
«tab_size»: 4
Вы спросите зачем?
Что бы случайно не нажать пробел и таб вместе, и не сломать сборку pug.
А так же для единообразия работы в команде.
- Строки не должны заканчиваться пустыми символами.
Для этого используем плагин TrailingSpaces.
— Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:
- Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.
- Запрет переноса строки. Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель)
«word_wrap»: «false»
- Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
- Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
- Автокомплит Less.
Less в своей стандартной сборке не понимает новых свойств css(2016+). По этому используем LessImproved.
- View > Side Bar > Hide Open Files — Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху
3. Полезные клавиши 'hotkey' :
- В первом пункте скажем, что пропустим все стандартные сочетания, такие как ctrl(?) + Z (? — далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
- Пожалуй следующее самое популярное сочетание это:
crtl + P — Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей.
- Следующее по важности:
ctrl + D — Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь.
- ctrl + L — Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
- Поиск… Ну наверное первое это ctrl+F — поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать 'Find in folder…') Советую не включать в поиск папку «Известного толстячка»
- ctrl + shift + up/down — Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
- Теперь небольшой туториал по комбинациям комбинаций клавиш. Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу)
Вот полезные из них:
- ctrl + K, ctrl + 4 — Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J — разворачивает всё что есть)
- ctrl + K, ctrl + B — Скрывает/показывает SideBar. (хорошо работает с F12)
Комментарии (25)
Sub_Dia
18.02.2018 20:37Кусок настройки есть, работы что-то не видать. Видать, и в самом не дописан пост?
Ребят, не минусуйте человека, с кем ошибок не бывает. Пусть имеет возможность дописать пост.
Amedomary Автор
18.02.2018 22:26Что вы хотите увидеть о работе? могу дописать если пойму интересующий вас аспект.
Aquahawk
18.02.2018 21:13После того как появилась vs code я вообще не понимаю зачем саблайм. Море плагинов, нормальная работа, быстро открывается и вообще функционал больше. Вроде IDE а простая как текстовый редактор. И режим командного управления такой же как в саблайме.
ZoomLS
18.02.2018 22:23VS Code на Electron со всеми вытекающими + отсылает данные мелкомягким. У Sublime, так же море плагинов, работает куда шустрее(и не жрёт столько ресурсов) всех этих поделий на Electron'е, по функционалу не хуже. Обычно, когда заходит речь о прожорливости редакторов на Electron, начинаются аргументы вроде — купи мощнее комп, поставь больше памяти… ага, ради текстового редактора. Epic!
Apx
19.02.2018 01:33Было бы слишком много вони как с десяткой если бы vs code что-то лишнее слал. В остальном очень хороший редактор. Я уже иногда для мелких вещей пишу жаба код в нем, лиш бы в очередной раз не запускать идею.
oldbie
19.02.2018 02:25От себя добавлю еще один плюс sublime — рендер шрифтов гораздо приятнее. В vscode глаза немножечко кровоточат =(.
Aquahawk
19.02.2018 05:01Я тоже не люблю тормозящие технологии и считал электрон таковым. Пока не попробовал vscode. Скайп новые который на веб движке унылое тормозное говно, как много других приложений на электроне. Тормозит всё, но только не вскода. Как они это сделали — хз. Точно асинхронная обработка подсветки синтаксиса, а дальше не знаю.
Amedomary Автор
18.02.2018 22:28Я последние 2 недели тоже тестировал VSCode и Атом, тоже не смог найти плюсов в сравнении с саблаймом. Производительность у них хуже. А настройки с завода переполнены всем всем. Единственное что это поддержка синтаксиса сразу хорошая.
Vasily_T
18.02.2018 22:33Использую и его и vscode, причина проста — на медленной машине sublime работает очень пошустрее (у меня зоопарк в разных местах работы),
но скажу честно vscode удобнее
Alex_ME
19.02.2018 10:41Внимание, IMHO
Может в VsCode и есть какие-то плюшки, по сравнению с саблаймом, типо более продвинутого автокомплита, который в отдельных случаях приближается IntellySense, но даже он более прожорлив. Использовать в качестве прото-IDE можно, в качестве текстового редактора — нет. У меня основная IDE — VS, а редактор — sublime, который я использую для всяких правок конфигов, коммитов, чтобы быстренько глянуть какой-нибудь код и не имеет смысла включать монстра VS, простых скриптов и т.п. Редактор должен быть быстрым, и не только в работе, но и по времени запуска.
SirEdvin
19.02.2018 15:11Убитый, ущербный плагин автодополнения для python, который после того, как его забрал себе microsoft еще начал страдать детксими болезнями в духе автодополнение, которое включалось в строке, который не умеет в удаленные интерпретаторы и даже не планирует и который иногда просто перестает работать — это нормальная работа?
Ну и MS, работа которых по ущербизации всего, к чему они прикасаются меня просто поражает.
luman-web
18.02.2018 22:55имхо… до сих пор вторым саблаймом пользуюсь. есть некоторое количество дополнений, которыми я пользуюсь каждый день,… и пока что ничего другого (лучше), я пока не встретил, что удавлетворяло бы мои потребности в процессе написания кода. что atom, что vs code, что даже сам sublime 3,… в каждой из них происходят какие то тормоза в том или ином случае. ни где лучшей эмуляции vim я еще не встретил.
EndUser
19.02.2018 05:27Внезапно обнаружил, что VS Code ни разу не Portable — перенёс и отвалилось вообще всё.
Sublime, надо признать, всё-таки portable, что драматично уменьшает мороку с настройкой.
А некоторые настройки слегка тонкие…
Случайно никто не помнит, как в VS Code включить (доинсталлировать) такое свойство: перед функцией визуально вставляется дополнительная строка, которая показывает количество вызовов этой функции и позволяет прыгать на эти вызовы? Вероятно этот же плагин позволяет через контекстное меню прыгать на определение функции/класса/переменной, и эту фишку я тоже протерял при переустановке ОСи. :-(
H:\Users\%username%\.vscode\extensions я уже просматривал.Free_ze
19.02.2018 12:00Заголовок спойлераEndUser
19.02.2018 12:03Благодарю!
Настройка включена, результата нет.
Это касается проекта? Я смутно помню, что оно работало на уровне одного открытого файла даже без проекта. Нет?Free_ze
19.02.2018 12:16На здоровье! Нет, нужнен именно проект/солюшн. Иначе было бы сложновато анализировать связи (= Ведь сишарп сам по себе не регламентирует структуру проекта.
saag
19.02.2018 07:26у меня пара вопросов по саблайму: 1. Есть ли возможность у сабжа встроить терминал как у VS Code 2. Есть ли возможность работать с ReactNative как в Atom+Nuclide?
Arik
19.02.2018 10:43Пользуюсь давно, но как обычный текстовой редактор, думал поднять кучу плагинов, но переживаю что большая часть не нужна для простых txt-файлов. Есть ли возможность запускать в разных режимах с разными плагинами/настройками? Т.е. по умолчанию просто редактор, а когда надо запускается как IDE со всеми плюшками
Xalium
19.02.2018 14:10Less в своей стандартной сборке не понимает новых свойств css(2016+). По этому используем LessImproved.
Инфа из Less?Improved:
Deprecated!
The repo has been merged back into LESS and we'll continue supporting and improving it there.
Так что теперь он не нужен, а может быть даже вреден.
grayich
достаточно нажать Ctrl+Shift+P и выбрать из списка Install Package Control
Amedomary Автор
Спасибо — не знал, переустанавливал этим летом, было нужно… дополню статью)