Всего в каталоге: 216 компаний
Сравнить (0)

Sublime Text — отличный редактор для веб-мастера

Время чтения: 54 минуты

106 0

Удивительно наблюдать прогресс технологий и собственного мнения по прошествии времени. Когда-то идеальным мне казался мощный и тяжелый текстовый редактор NetBeans, а до него — Dreamweaver

В процессе эволюции осталось три претендента на звание лучшего текстового редактора для веб-мастера:

До последнего момента лидировал PSPad. Лидерство редактору обеспечили метки (установка метки: Ctrl+Shift+ЦИФРА; переход к метке: Ctrl+ЦИФРА).

Метки в PSPad

Рис. 1. Метки  на полях редактора PSPad для быстрого перехода к нужной строке.

Несмотря на преимущества NotePad++, такие как:

  • подсветка отступов (см. рис. 2);
  • подсветка одинаковых выражений, совпадающих с выделенным текстом (см. рис. 3);
  • хороший автокомплит (см. рис. 4)

    лидером для меня оставался PSPad. На столько, видимо, я был потрясен метками

    Подсветка отступов в NotePad++

    Рис. 2. Подсветка отступов в NotePad++.

    Подсветка совпадений в NotePad++

    Рис. 3. Подсветка совпадений с выделенным текстом в NotePad++. Очень удобно для поиска переменных, мест объявления методов и т.п.

     Автокомплит в NotePad++

    Рис. 4. Сравнительно хороший автокомплит NotePad++.

    PSPad умел переходить к совпадающему с выделенным текстом участку, благодаря комбинации Ctrl+Shift, но подсветки, аналогичной рис. 2, не было. И даже ужасно реализованный, столь ценимый мною, автокомплит не отпугнул меня от PSPad (см. рис. 5).

    Автокомплит в PSPad

    Рис. 5. Ужасный автокомплит PSPad. После выбора нужного CSS-свойства появляется неудобное окно для ввода его значения. Мне это очень не нравилось.

    Кстати, автокомплит можно вызвать комбинацией Ctrl+ПРОБЕЛ.

    Все эти противоречивые проблемы были решены, как только я попробовал Sublime Text.

    Плюсы:

    • Редактор легкий и простой.
    • Очень хороший автокомплит. Жаль, нет автокомплита CSS-свойств в атрибуте styleHTML-тегов. А то бы я был полностью счастлив. Но перемещение между точками ввода клавишей TAB доставляет (см. видео).
    • Подсветка отступов и совпадений с выделенным текстом как в NotePad++ (см. рис. 2, 3).
    • Есть метки, почти как в PSPad (см. рис. 1). Единственное — метки не различаются цифрами, все они одинаковые и клавишей F2 можно переходить от одной к другой последовательно (устанавливается метка комбинацией Ctrl+F2). Но может быть это и к лучшему, не нужно держать в голове какую именно метку я поставил в таком-то месте.
    • Можно ставить несколько курсоров (Ctrl+СРЕДНЯЯ КЛАВИША МЫШИ). Я как-то не оценил этой возможности, но Димоксу понравилось.

    Минусы:

    • Не работает с FTP из коробки. Есть какой-то плагин, но кто его знает, как он устанавливается. Я практически не пользуюсь прямым редактированием файлов через FTP, так что не жалко.


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

      Sublime Text

      Установка Sublime Text 3

      Вначале нужно скачать файл установщика. Сделать это можно вот тут (бесплатно). Далее запускаем файл установки «Sublime Text 3 Build 3126 x64» (или x86, в зависимости от разрядности вашей ОС) и указываем путь к папке, по желанию, после чего нажимаем на кнопку «Next»:

      Установка Sublime

      Все следующее окно оставляем как есть и переходим дальше. Устанавливаем приложение кнопкой «Install». В конце установки нажимам копку «Finish».

      Итак, установка Sublime Text прошла успешно. Думаете на этом все? Как бы не так! Теперь его еще нужно настроить.

      Русификация Sublime

      Как работать с Sublime, на русском языке или на английском, решать, конечно же, вам. Для русификации открываем папку «SublimeText3RussianMenu-master» и копируем все файлы с расширением .sublime-menu в папку C:\Users\Имя_пользователя\AppData\Roaming\Sublime Text 3\Packages\Default\ (если у вас Windows 7/8/10), заменив исходные файлы.

      Настройка Sublime

      Вот и все. Теперь наш Sublime Text русифицирован!

      Ввод ключа лицензии для Sublime Text

      Прежде чем начинать работать с Sublime, нужно его зарегистрировать. Для этого открываем файл «Key.txt» и копируем из него весь текст. Затем запускаем «Sublime Text 3» и откроем ввод лицензии, как показано на картинке.

      Ввод лицензии Sublime

      Вставляем код и подтверждаем нажатием на кнопку «Use License».

      Ввод лицензии Sublime

      Регистрация завершена!

      Настройка Sublime

      Настройки добавляем в файл «Preferences→Settings — User» или же, если русификатор поставлен, «Preferences→Packages Settings→AutoFileName→Settings — User».

      Настройка Sublime

      Параметры копируем из файла «sublime_USER.txt» и заменяем ими текст в файле.

      Настройка Sublime

      Нужно иметь ввиду, что в конце каждой строки с параметром, обязательно нужно ставить запятую, кроме той, что перед закрывающей фигурной скобкой. А также в начале конфигурационного файла должна стоять открывающая фигурная скобка, в конце — закрывающая. Подробнее про параметры Sublime можно прочитать здесь.

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

      Плагины нужны для того, чтобы сделать наш Sublime более удобным и многофункциональным. Для начала нужно установить Package Control, родителя всех плагинов. Для этого вызываем консоль сочетанием клавиш Ctrl+~ и вставим туда код:

      import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
      Настройка Sublime

      Жмем клавишу Enter.

      После завершения установки в меню Preferences должен появиться дополнительный пункт меню — Package Control, от которого ведется управление плагинами. Их установка выполняется через репозиториум, являющимся единой базой всех плагинов.

      Настройка Sublime

      Для вызова консоли управления плагинами необходимо зайти в: Preferences→Package Control или же с помощью комбинации клавиш Ctrl+Shift+P. Туда вводим: Install Package.

      Настройка Sublime

      В разделе Install Package в верхней строке вводим название нужного плагина и устанавливаем. Для удаления плагина вводим Remove Package и выбираем ненужный нам плагин.

      Какие плагины лучше использовать веб-разработчикам для работы?

      Лично я использую следующие плагины:

      Emmet
      позволяет записывать HTML и CSS быстрее, используя аббревиатуры и ярлыки, затем расширяет их до допустимых html-тегов, что сильно экономит время.
      BracketHighlighter
      позволяет видеть открытый и закрытый фрагмент в коде.
      HTML5, CSS3
      отображает синтаксис HTML5 и CSS3.
      ColorHighlighter
      подсвечивает цвета реальным цветом в CSS.
      AutoFileName
      находит путь к файлу и предлагает для вставки в код.
      AllAutocomplete
      автодополнение.
      HTML-CSS-JS Pretty
      форматирует код, автотабуляция.
Оцените, пожалуйста, статью по пятибальной шкале, при анализе мы учтём ваше мнение и станем чуть лучше:
  Рейтинг статьи: 4.0
Узнайте об акциях и отзывах первыми в нашей группе