23 Мая 2019

Текстовые редакторы

Для облегчения написания программ, разработчики пользуются разнообразными текстовыми редакторами. На данный момент текстовых редакторов существует очень много - от самых простых и бесплатный, до навороченных и платных.
В данной статье рассмотрим самые распространенные редакторы, их установку и подключение плагинов.

Sublime Text 3

Sublime Text 3 — это один из лучший текстовый редактор для программистов, верстальщиков и web разработчиков. В нем нет ничего лишнего, и в то же время в нем есть все, что может потребоваться. Если какой-то функционал отсутствует, то его всегда можно дополнить одним из 1000 бесплатных плагинов. Если и этого мало, то под свою задачу можно написать плагин самостоятельно на языке Python.

Заходим на сайт Sublime Text 3 и качаем дистрибутив под Вашу ОС. Процесс установки не должен вызвать затруднений.

После того, как Вы в первый раз откроете текстовый редактор он будет выглядеть так:
interfeys-1-768x423.png


  Настроить интерфейс можно через верхнее меню – VIEW, где:
  1. view – side bar –show side bar. Показывает левый сайд бар, по началу он пусто, но если мы создадим на рабочем столе папку: new project и просто перетащим ее в Sublime, то она там появится и далее мы сможем работать с проектом, который будет находиться в этой папке.
  2. View – show minimap. Показывает в правом сайд баре в каком месте кода вы находитесь. Очень удобно при работе с большими проектами.
  3. View – show tab Показывает все открытые вкладки
  4. View – show status bar. Показывает нижнее меню. Кстати в самом правом углу можно менять кодировки. Вообще в зависимости от открываемого файла Sublime Text 3 по расширению понимает, что это за файл и сразу его открывает, как надо, но иногда бывает, что нужно подсказать, что это PHP, Python, C++ или что-то еще. Чуть левее находится Индентация, с помощью нее можно менять табы на пробелы и наоборот приводя код в более структурированное состояние.
  5. View – hide menu. Нажали? Если да, то меню в Sublime у вас скрылось, для того, чтобы вернуть надо нажать ctrl+shift+p и набрать menu.
  6. View – show console. Показать консоль. (если этого пункта нет, то как ее включить описано ниже)
  7. Enter Full Screen и Enter Distraction Free Mode. Полноэкранный и еще более полноэкранный режим.
  8. Layout, Groups, Focus Group, Move File to Group. Разбивка экрана на 2-3-4 части для работы с несколькими файлами. Разбивать можно как вертикально, так и горизонталью.

Настройка Sublime Text 3

Настройки хранятся во вкладке: верхнее меню – preferences – settings. В левой части будут настройки по умолчанию, а в правой пользовательские (preferences.sublime- settings user). Правильнее вносить корректировки именно в правой части (user).
Добавим такую строчку: «draw_white_space»: «all», и сохраним. Как видно, теперь пробелы и табы начали подсвечиваться.
settings-2-1.jpg

Полезные функции в Sublime Text 3

  1. Для того, чтобы увеличить/уменьшить шрифт достаточно просто нажать ctrl+покрутить колесико мышки.
  2. ctr + / (контр + слеш) закомментировать строчку;
  3. tab — увеличить индентацию;
  4. shift + tab уменьшить индентацию;
  5. ctrl+shift+v — вставить с учетом индентации;
  6. shift+ctrl+d — дублирование строк.

Package Control для Sublime Text

Package Control это менеджер пакетов для установки плагинов на Sublime Text. Для того, чтобы он у нас появился нужно выполнить следующие действия:
  1. Переходим в саблайн;
  2. открываем консоль (view — show console) или с помощью комбинации клавиш ctr +` ;
  3. Вставляем скрипт;
    import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  4. Нажимаем enter и ждем;
Далее того, что бы убедится в том, что все прошло успешно открываем командную строку — ctrl+shift+p и видим там наши новые пакеты, включая самый главный install package.  Он списком загружает все доступные плагины, нам остается только найти необходимый и установить его.

Установка плагинов в Sublime Text

Плагины для Sublime Text пишутся на языке Python. Сам по себе язык очень простой и если вы программист, то вам не составит труда его выучить.
Для установки плагинов нужно:
  1. открыть командную строку, нажав комбинацию клавиш: ctrl+shift+p ;
  2. в строчке вводим Install Package и жмем ентер;
  3. снизу в открывшемся поле вводим название плагина, например: emmet;
  4. нажимаем enter и ждем конца установки, там появится экран с кучей строчек;
  5. Готово.

Sublime Text Emmet

Чуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP.

Для первоначального создания страницы достаточно добавить ! и нажать Tab.

Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div.

Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a[href=#]{menu_$}

При написании ul без <> и нажатия Tab будет автоматически развернут полный список.

Таким же методом можно написать div.class для назначения класса.

Advanced New File

Позволяет создавать новые файлы. Устанавливаем плагин, открываем правый сайд бар (view – side bar –show side bar), далее нажимаем комбинацию клавиш ctrl+alt+n и пишем index.php, как видим файл создался, и это очень быстро и удобно.

Brackethighlighter

По умолчанию если мы стоим, например на каком то div, то очень тяжело заметить закрывающий тег, так как он подчеркнут слишком бледно. Brackethighlighter.

Gotocss Declaration

Помогает найти и перейти на нужный элемент css прямо из html кода. Нужно просто правой кнопкой мыши кликнуть по элементу, к которому применяется этот стиль и выбрать Go To CSS Declaration

Частично информация была взята с сайта - https://sublimetext3.ru/