Sublime text 3 как работать: Sublime Text 3 жив. (Настройка и работа) / Хабр

Sublime Text 3 жив. (Настройка и работа) / Хабр

Amedomary

Время на прочтение 3 мин

Количество просмотров

64K

CSS *HTML *

Recovery mode

Из песочницы

Sublime Text 3 — кроссплатформенный текстовый редактор.

Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)

Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.

1. Установка программы и контроль за дополнениями (Package Control)


  1. Устанавливаем Sublime Text 3. Тут всё просто — качаем и запускаем.

Теперь нажимаем ctrl/⌘+shift+p или в меню (Tool > Command Palette).

Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.

2. Настройки программы:


  1. Используем пробелы, вместо табов.
    «translate_tabs_to_spaces»: true
  2. Размер таба равен 4 пробела.
    «tab_size»: 4

    Вы спросите зачем?
    Что бы случайно не нажать пробел и таб вместе, и не сломать сборку pug.
    А так же для единообразия работы в команде.

  3. Строки не должны заканчиваться пустыми символами.
    Для этого используем плагин TrailingSpaces.

— Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:


  1. Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.

  2. Запрет переноса строки. Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель)
    «word_wrap»: «false»
  3. Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
  4. Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
  5. View → Side Bar → Hide Open Files — Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху

3. Полезные клавиши ‘hotkey’ :


  1. В первом пункте скажем, что пропустим все стандартные сочетания, такие как
    ctrl(⌘) + Z
    (⌘ — далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
  2. Пожалуй следующее самое популярное сочетание это:
    crtl + P — Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей.
  3. Следующее по важности:
    ctrl + D — Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь.
  4. ctrl + L — Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
  5. Поиск… Ну наверное первое это ctrl+F — поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать ‘Find in folder…’) Советую не включать в поиск папку «Известного толстячка»
  6. ctrl + shift + up/down — Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
  7. Теперь небольшой туториал по комбинациям комбинаций клавиш. Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу)
    Вот полезные из них:
  8. ctrl + K, ctrl + 4 — Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J — разворачивает всё что есть)
  9. ctrl + K, ctrl + B — Скрывает/показывает SideBar. (хорошо работает с F12)

Теги:

  • html
  • css
  • less
  • pug
  • sublime text 3

Хабы:

  • CSS
  • HTML

Всего голосов 19: ↑7 и ↓12 -5

Комментарии 25

Максим @Amedomary

Frontent ux/ui — developer

Сайт Twitter

Редактор кода Sublime Text 3

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

Данный курс распространяется абсолютно бесплатно, но для получения доступа к курсу необходимо оформить бесплатную подписку. Обратите внимание, что подписаваясь для получения курса вы даете свое согласие на получение новостей моего блога zaurmag.ru. На данном блоге я публикую бесплатные материалы по теме создания сайтов, а также некоторые моменты из своей жизни.

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

Ссылка на элемент медиа :

/redaktor-koda-sublime-text-3/preimushchestva-i-nedostatki-redaktora-koda-sublime-text-3

01. Преимущества и недостатки редактора кода Sublime Text 3

Это первый вступительный урок по мини-курсу Sublime Text 3. В данном видео мы разберем какими преимуществами и недостатками обладает данный редактор и узнаем почему он получил боль…

Просмотров: 2,701

Перейти к видео

02. Установка и русификация редактора Sublime Text

В данном видео мы скачаем и установим редактор Sublime. Также мы переведем главное меню программы на русский язык. Инструкцию и название плагина локализации русского языка можете н…

Просмотров: 1,378

Перейти к видео

03. Работа с редактор Sublime Text 3

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

..

Просмотров: 616

Перейти к видео

04. Установка и демонстрация работы плагина Emmet

В данном видео мы установим первый плагин в Sublime под названием Emmet. Без данного плагина сегодня наверно не обходится ни один разработчик. Emmet — это инструмент, который позво…

Просмотров: 410

Перейти к видео

05. Установка плагина Side​Bar​Enhancements в Sublime Text

Из данного вы узнаете как можно расширить возможность родного контекстного меню сайдаба Sublime Text 3. Делается это с помощью плагина Side​Bar​Enhancements. Все подробности в виде…

Просмотров: 1,257

Перейти к видео

06. Создание сниппетов в Sublime Text

В данном уроке мы рассмотрим такой инструмент в Sublime, как сниппеты. Сниппеты позволяют нам сохранять фрагменты кода и потом разворачивать их, введя определенный шорткод. Тем сам…

Просмотров: 449

Перейти к видео

07. Установка плагина Color Highlighter в Sublime Text

В данном уроке мы разберем такой плагин, как Color Highlighter. С его помощью мы можем подсвечивать код цвета в файлах CSS, что в свою очередь упрощает навигацию по цвету. Также с…

Просмотров: 4,503

Перейти к видео

08. Установка и настройка плагина autoFileName

В данном видео рассмотрим плагин для Sublime под названием AutoFileName . Данный плагин позволяет быстро находить имена файлов и папок в нашем проекте и добавлять их в код.

Просмотров: 1,979

Перейти к видео

09. Установка и работа плагина Sass в Sublime

В данном уроке мы установим очередной плагин под названием Sass . Данный плагин позволяет подсвечивать синтаксис кода, если вы используете препроцессор Sass/Scss.

Просмотров: 469

Перейти к видео

10. Установка и настройка плагина SFTP

В данном уроке рассмотрим плагин SFTP. Данный плагин дает возможность соединяться с удаленным сервером и закачивать/скачивать файлы прямо из редактора Sublime. Плагин очень простой…

Просмотров: 430

Перейти к видео

11. Создание и работа с проектами в Sublime

В Sublime есть такая возможность, как создание проектов. С помощью проектов мы можем объединять папки и файлы, а также сохранять рабочее пространство. Тем самы мы можем настроить к…

Просмотров: 367

Перейти к видео

12. Настройки редактора Sublime Text 3

В данном уроке мы рассмотрим настройки редактора Sublime Text 3, а конкретно как открыть и как переопределить под себя нужные опции.

Просмотров: 390

Перейти к видео

13. Установка темы Spacegray и выбор цветовой схемы

Одно из замечательных особенностей Sublime Text это то, что можно менять тему оформления и их на просторах интернета можно найти не мало. В данном уроке мы установим тему под назва…

Просмотров: 736

Перейти к видео

14. Устанавливаем и настраиваем плагин HTML-CSS-JS Prettify

Чтобы легко ориентироваться в написанном коде его необходимо структурировать, отбив табами вложенность. Делать это вручную долго и муторно. Поэтому на помощь приходит такой плагин…

Просмотров: 1,410

Перейти к видео

15. Заключение и полезные ссылки

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

Просмотров: 312

Перейти к видео

16. Доп. урок: Краткий обзор темы Material + плагин BracketHighlighter

Это дополнительный урок к курсу по Sublime Text 3. Здесь мы кратко затронем тему оформления под названием Material + установим плагин подсветки парных тегов в коде. Данный редактор…

Просмотров: 408

Перейти к видео

Использовать возвышенное! — Альваро Каррил

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

Что это такое?

Sublime Text — это бесплатный кроссплатформенный редактор исходного кода. Вы можете легко добавить несколько плагинов для расширения его функциональности, позволяя редактировать и компилировать код Stata, скрипты Python, R, LaTeX, Julia… список бесконечен. Вы также можете настроить несколько других аспектов, таких как макет с несколькими столбцами или сочетания клавиш, и это лишь несколько примеров.

Вам может быть интересно, что такого особенного в запуске сценария Python и компиляции документа LaTeX из одного и того же редактора, поскольку вы, возможно, уже используете среду разработки Python, такую ​​как PyCharms, и превосходный редактор LaTeX, такой как Texmaker. Дело в том, что большие проекты, как правило, сложны и требуют обработки большого количества файлов, поэтому наличие легкого, настраиваемого редактора one , который может обрабатывать их все, упрощает как сохранение общей картины, так и быстрое погружение в любой вид. кода для дополнительной работы.

  1. Перейдите на sublimetext.com, загрузите и установите Sublime Text 3 (ST3) для вашей операционной системы.

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

Вот оно!

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

Тема

Весь внешний вид ST3 можно настроить, установив темы. Я знаю, что это вопрос личного вкуса, но, попробовав множество (, много, ) тем, мой личный фаворит — Monokai Pro. Он темный (конечно), минималистичный и отлично смотрится в Windows и MacOS. Чтобы установить его, просто вызовите палитру команд ( Tools ‣ Command Palette ), введите install и нажмите Return . Затем найдите Monokai Pro и нажмите 9.0037 Верните еще раз, чтобы установить его.

Monokai Pro также имеет набор «цветовых фильтров», которые позволяют вам изменить общее впечатление от темы. Вы можете поиграть с ними, перейдя в Tools ‣ Command Palette ‣ Monokai Pro: выберите тему .

Хотя сначала это не видно, ST3 поставляется с удобной боковой панелью, в которую вы можете перетаскивать папки вашего проекта для быстрого доступа, помимо списка всех ваших открытых файлов. Чтобы активировать его, просто перейдите в Вид ‣ Боковая панель ‣ Показать боковую панель 9.0038 , и вы увидите что-то вроде скриншота ниже:

Я также рекомендую вам установить SideBarEnhancements, плагин, который добавляет массу полезных функций для работы с файлами и папками на боковой панели (вы даже не можете Переместить в корзину без этого!). Чтобы установить его, просто вызовите палитру команд ( Tools ‣ Command Palette ), введите install и нажмите Return . Затем найдите SideBarEnhancements и нажмите . Верните еще раз, чтобы установить его.

С помощью Package Control мы можем легко добавлять плагины, которые позволят нам использовать ST3 для редактирования и компиляции следующих программ:

  • R
  • Питон
  • Юлия
  • Статус
  • Латекс

32 или 64 бита?

Прежде чем продолжить, важно убедиться, какая у вас операционная система: 32- или 64-разрядная. Ответ определит, какую версию программного обеспечения вам следует установить: если у вас 32 бита, то вам должен выбирать 32-битные версии. Если у вас 64-битная ОС, вы можете выбрать любой из них… но обычно имеет смысл выбрать и 64-битное программное обеспечение.

В Windows тип вашей системы можно узнать, щелкнув правой кнопкой мыши «Этот компьютер» (или «Мой компьютер» в более старых версиях Windows) и выбрав «Свойства». Найдите «Тип системы», как на снимке экрана ниже:

В macOS (macOS?), выберите «Об этом Mac» в меню Apple (






При повторном входе на сервер добавьте дополнительную опцию в 9Команда 0037 ssh .

Вместо обычного…

 ssh [your_user_name]@[your_servers_ip_address] 

…use…

 ssh  -R 52698:localhost:52698  [your_user_name]@ [your_servers_ip_address] 

для меня это будет:

 ssh -R 52698:localhost:52698 [email protected] 

Эта дополнительная опция -R 52698:localhost:52698 открыла туннель, используя 52698 900 38 порт. Этот туннель будет использоваться для передачи файлов между вашим сервером и Sublime Text 3.

Если вы используете Windows…

… откройте Putty и введите данные подключения, как обычно.
Но прежде чем вы действительно подключитесь к удаленному серверу, на боковой панели перейдите в меню Connection >> SSH >> Tunnels . А здесь:

  • Введите 52698 в поле Исходный порт !
  • Введите localhost:52698 в поле Destination !
  • В следующей строке установите Local на Remote .
  • И оставьте следующую строку на Auto .
  • И наконец, нажмите Добавить .

Вот более наглядное руководство:

После нажатия кнопки Добавить вы должны увидеть это:

Если да, вернитесь в меню сеанса на боковой панели, Сохраните вашу конфигурацию и Откройте связь.

Эта дополнительная настройка открыла туннель с использованием 52698 порт. Этот туннель будет использоваться для передачи файлов между вашим сервером и Sublime Text 3.

Для всех пользователей Mac/Linux/Windows…

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

Просто введите:

 sublime test.csv 

И происходит волшебство, Sublime Text 3 на вашем компьютере открывает test.csv файл с удаленного сервера:

Ввожу: "Привет, это тест!" — а затем сохраните мой файл.

Затем я возвращаюсь к своему терминалу и cat test.csv . И вот что я получаю:

Та-да, теперь вы можете использовать Sublime Text 3 на своем удаленном сервере!

И, конечно же, вы можете легко редактировать не только файлы .csv , но и сценарии .py , .sql и .sh .

Отказ от ответственности

При использовании Sublime Text 3 через пакет RemoteSubl на удаленном сервере обратите внимание на две важные вещи:

1. Чтобы открыть что-либо с помощью возвышенная команда из В командной строке приложение Sublime Text 3 должно быть открыто на вашем локальном компьютере. В противном случае вы получите следующее сообщение об ошибке: connect_to localhost port 52698: failed.

2. Этот метод работает только до тех пор, пока открыто соединение («туннель») между вашим сервером и локальным компьютером. Если вы закроете соединение и не сохраните свой скрипт, Sublime Text 3 вернет сообщение об ошибке, и ваш скрипт больше не сможет быть сохранен.

Заключение

Sublime Text 3 — потрясающий редактор сценариев! Попробуйте — и я обещаю, вы не пожалеете. Теперь вы знаете, как использовать его и с удаленным сервером, поэтому вы можете использовать его в любых проектах данных.

  • Если вы хотите узнать больше о том, как стать специалистом по данным, просмотрите мой 50-минутный видеокурс «Как стать специалистом по данным». (Это бесплатно!)
  • Также ознакомьтесь с моим 6-недельным онлайн-курсом: видеокурс The Junior Data Scientist’s First Month.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *