Быстрая настройка Sublime Text 3 для верстки сайтов
Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3, установке необходимых для верстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.
Смотреть урок на YouTube
Вам наверняка знакома ситуация, когда на новом рабочем месте необходимо быстро установить и настроить Sublime Text для работы над новыми проектами. Как правило, тонкая настройка Sublime Text занимает много времени и выполнять ее каждый раз не практично и долго.
Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения верски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.
По умолчанию Sublime Text выглядит довольно печально:
Установка Package Control в Sublime Text
Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чем вы получите соответствующее уведомление.
Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.
Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.
Установка плагинов в Sublime Text
Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.
Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.
Самые популярные плагины для Sublime Text:
- Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet
- AutoFileName — дополняет код при написании путей до файлов в верстке;
- Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
- Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
- terminus — плагин встроенного терминала Sublime Text.
- W3CValidators — мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.
Установка внешнего оформления Sublime Text
Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.
Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:
- One Dark Color Scheme — цветовая схема для подсветки кода;
- One Dark Material — Theme — тема оформления UI Sublime Text.
Установка плагина вручную
Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.
Один из таких плагинов BufferScroll — потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.
Для установки BufferScroll вручную, скачайте его и распакуйте в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.
Тонкая настройка редактора, пресет моих настроек
Переходим к настройкам Sublime Text.
Предтавляю мой пресет настроек, который я всегда использую для стартовой настройки редактора Sublime Text на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости:
Keymap (Windows Users): [ { "keys": ["alt+shift+f"], "command": "reindent" }, ] Settings: { "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", }
Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:
{ "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", }
Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:
[ { "keys": ["alt+shift+f"], "command": "reindent" }, ]
Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.
Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля — левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив свое значение.
Узнать какое свойство за что отвечает довольно просто — все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.
Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
«C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3»
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «Инструменты»
- Настройка VS Code для верстки
- Simple Starter — простой стартер для верстки | Материалы урока
- Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
- Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
- Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
- Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
Настройка Sublime Text 3 под Python 3
Вопрос задан
Изменён 2 года 1 месяц назад
Просмотрен 448 раз
Решил перейти на Sublime столкнулся со следующей проблемой. Установленные packages:
- Python3
- Sublime PuthonIDE
- All Autocomplite
- Sublime CodeIntel
- SublimeREPL
При запуске любого кода на python в sublime выдаёт:
«py» �� ���� ����७��� ��� ���譥� ��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���. [Finished in 0.1s with exit code 1] [shell_cmd: py -3 -OO -u «D:\Programming\Python\Learning\Programm Deal List\test.py»] [dir: D:\Programming\Python\Learning\Programm Deal List] [path: C:\Program Files (x86)\Common Files\Oracle\Java\javapath;c:\programdata\oracle\java\javapath;c:\program files (x86)\amd app\bin\x86_64;c:\program files (x86)\amd app\bin\x86;c:\windows\system32;c:\windows;c:\windows\system32\wbem;c:\windows\system32\windowspowershell\v1.0;c:\program files\dotnet;c:\program files\nvidia corporation\nvidia nvdlisr;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common]
- python
- python-3.x
- ide
- sublime-text
- settings
На самом деле причин может быть много, типа неправильной установки/настройки дополнений или их конфликтность друг с другом.
- Sublime PuthonIDE — не обновлялся уже пять лет
- All Autocomplite — пытается обхватить необъятное
- Sublime CodeIntel — тоже 3 года как в коме
- из всего списка SublimeREPL еще более менее, но тоже требует настройки.
Вместо всего этого лучше установить:
- Для подсветки ошибок — Sublime Linter, который имеет отдельный модуль для работы с питоном SublimeLinter-pylint (в самом питоне должен быть установлен pylint)
- Для автодополнения и навигации по определениям — Jedi — Python autocompletion
- Для запуска кода (вместо репла) и работы с терминалами — Terminus
В принципе этого вполне достаточно для комфортной работы с кодом, особенно если вникнуть и настроить под себя.
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Установка — Неофициальная документация Sublime Text
Обязательно ознакомьтесь с условиями использования на официальном сайте. Sublime Text не является бесплатным .
Процесс установки Sublime Text отличается для каждой платформы.
32 бита или 64 бита?
OS X
Вы можете игнорировать этот раздел: есть только одна версия Sublime Text для OS X.
Windows
Вы сможете запустить 64-битная версия если вы используете современную версию Windows. Если у вас возникли проблемы с запуском 64-битной версии, попробуй 32-битную версию.
Linux
Запустите эту команду в вашем терминале чтобы проверить тип вашей операционной системы:
uname -m
Windows
Портативный или не портативный?
Sublime Text поставляется в двух вариантах для Windows: обычный и портативный. Большинству пользователей лучше обслуживать нормальная установка. Используйте только портативную версию если вы знаете, что вам это нужно.
Обычные установки отдельные данные между двумя папками: собственно папка установки, и каталог данных (пользовательский каталог для данных; объясняется далее в этом руководстве). Обычные установки также интегрируйте Sublime Text с проводником файлов.
Портативные установки сохранить все файлы требуется Sublime Text в одной папке. Эту папку можно перемещать и редактор все равно будет работать.
Как установить обычную версию Sublime Text
- Скачать программу установки
- Дважды щелкните программу установки
Как установить переносную версию Sublime Text
- Скачать сжатые файлы
- Разархивируйте их в папку по вашему выбору
Вы найдете исполняемый файл sublime_text.exe внутри этой папки.
OS X
- Скачать .dmg файл
- Открыть .dmg файл
- Перетащите пакет Sublime Text 3 в папку Applications
Для создания символической ссылки использовать в командной строке введите следующую команду на терминале:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
Linux
Вы можете скачать пакет и распаковать его вручную. Альтернативно, вы можете использовать командную строку.
Ubuntu
Для i386
cd ~ wget http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3083_i386.deb
Для x64
компакт-диск ~ wget http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3083_amd64.deb
Другие дистрибутивы Linux
Для i386
cd ~ wget http://c758482.r82.cf2.rackcdn.com/sublime_text_3_build_3083_x32.tar.bz2 смола vxjf sublime_text_3_build_3083_x32.tar.bz2
Для x64
компакт-диск ~ wget http://c758482.r82.cf2.rackcdn.com/sublime_text_3_build_3083_x64.tar.bz2 смола vxjf sublime_text_3_build_3083_x64.tar.bz2
Теперь мы должны переместить несжатые файлы в соответствующее место.
sudo mv Sublime\ Text\ 3 /opt/
Наконец, мы создаем символическую ссылку для использования в командной строке.
sudo ln -s /opt/Sublime\ Text\ 3/sublime_text /usr/bin/sublime
В Ubuntu, если вы также хотите добавить Sublime Text к ланчеру Unity, читайте дальше.
Сначала нам нужно создать новый файл.
sudo возвышенное /usr/share/applications/sublime.desktop
Затем скопируйте в него следующее.
[Вход с рабочего стола] Версия=1.0 Имя = Возвышенный текст 3 # Кажется, только KDE 4 использует GenericName, поэтому мы повторно используем строки KDE. # Из пакетов Ubuntu language-pack-kde-XX-base, версия 9.04-20090413. GenericName=Текстовый редактор Exec=возвышенный Терминал=ложь Icon=/opt/Sublime Text 3/Icon/48x48/sublime-text.png Тип = Приложение Categories=TextEditor;IDE;Разработка X-Ayatana-Desktop-Shortcuts=НовоеОкно [Группа ярлыков NewWindow] Имя=Новое окно Exec=возвышенный -n Целевая среда = единство
Если вы зарегистрировали свою копию Sublime Text, но каждый раз, когда вы открываете его вас попросят ввести вашу лицензию, вы должны попробовать запустить эту команду.
sudo chown -R имя пользователя: имя пользователя /home/username/.config /sublime-text-3
Просто замените имя пользователя на имя пользователя вашей учетной записи. Это должно исправить ошибку разрешения в случае, если вы открыли Sublime Text как root при первом входе в лицензию.
Каналы выпуска
На момент написания этой статьи существуют две основные версии Sublime Text: Sublime Text 2 и Sublime Text 3. Вообще говоря, Sublime Text 3 это лучший выбор. Хотя технически это бета-версия, он такой же стабильный, как Sublime Text 2 и имеет больше возможностей.
Использовать только Sublime Text 2 если вы нашли проблемы работает Sublime Text 3 или вы зависите от любого пакета недоступно для Sublime Text 3.
Получение Sublime Text 3
Sublime Text 3 в настоящее время имеет два канала выпуска :
- Бета (по умолчанию, рекомендуется)
- Дев
Бета-версии лучше протестированы и надежнее для повседневного использования чем развитие строит. Большинство пользователей должны только использовать бета-версии.
Канал dev нестабилен: сборки для разработчиков могут содержать ошибки и работать не надежно. Dev-сборки обновляются чаще чем бета-версии.
Доступны только сборки для разработчиков зарегистрированным пользователям.
Получение Sublime Text 2
Мы рекомендуем Sublime Text 3, но если вы решили использовать Sublime Text 2 Вы можете скачать это здесь.
Установка | Sublime Text Community Documentation
Обязательно ознакомьтесь с условиями использования (открывается в новом окне) на официальном сайте. Sublime Text не является бесплатным . Однако, вы можете оценить его без лицензии.
Ссылки для скачивания для всех поддерживаемых платформ можно найти на странице загрузки (открывается в новом окне).
Процесс установки Sublime Text отличается для каждой платформы.
32 или 64 бита?
Предпочтительны 64-битные версии. Используйте только 32-битную версию если у вас проблемы с 64-битной версией или вы используете 32-разрядную операционную систему. Обратите внимание, что некоторые функции, например, Git Integration (открывается в новом окне) доступны только в 64-битной версии.
macOS
Существует только одна версия Sublime Text для macOS.
Windows
Вы сможете запустить 64-битная версия если вы используете современную и поддерживаемую версию Windows (читай: все, что старше Windows XP).
Linux
Выполните следующую команду
в вашем терминале
для проверки типа вашей операционной системы. x86_64
означает, что у вас 64-битная система.
Портативный или не портативный?
Sublime Text поставляется в двух вариантах (особенно для Windows):
- обычный
- портативный.
Большинству пользователей лучше подойдет обычная установка. Используйте портативную версию, только если вы знаете, что она вам нужна.
Обычные установки отдельные данные между двумя папками: собственно папка установки, и каталог данных (пользовательский каталог для данных; объясняется далее в этом руководстве). Обычные установки также интегрируйте Sublime Text с проводником файлов.
Переносные установки сохранить все файлы требуется Sublime Text в одной папке. Эту папку можно перемещать и редактор все равно будет работать.
Как установить
macOS и Windows
- Загрузите программу установки.
- Дважды щелкните программу установки и выполните указанные действия.
Linux
Рекомендуемый способ: используйте официальные репозитории Linux (открывается в новом окне) для часто используемых дистрибутивов Linux и выполните соответствующие шаги для установки Sublime Text с помощью менеджера пакетов вашей системы.
Если репозитория для вашей системы нет, вы можете найти запись Sublime Text в репозитории вашего дистрибутива.
Ручная установка
Можно использовать следующую последовательность команд Bash.
установить Sublime Text вручную.
Замените 3211
последней доступной сборкой.
(или любой более старый номер сборки).
Как установить портативную версию
СОВЕТ
Портативная версия активирована
всякий раз, когда в папке установки существует папка Data/
,
то есть папка, в которую вы распаковали переносимый архив.
Windows
- Загрузите сжатый архив с портативной версией.
- Разархивируйте его в папку по вашему выбору.
Вы найдете исполняемый файл sublime_text.exe
внутри этой папки.
Linux
Действия аналогичны описанным выше шагам ручной установки.
- Загрузите архив.
- Разархивируйте его в папку по вашему выбору.
- Создайте папку
Data/
внутри этой папки.
Вы найдете исполняемый файл sublime_text
внутри этой папки.
macOS
- Загрузите файл
.dmg
. - Открыть файл
.dmg
. - Перетащите пакет Sublime Text 3 в папку Applications
Чтобы создать символическую ссылку
для использования в командной строке,
введите следующую команду на терминале:
Release Channels
Sublime Text в настоящее время имеет два выпуска канала :
- Стабильная (открывается в новом окне)
- Dev (открывается в новом окне)
Стабильные версии лучше протестированы и более надежен для повседневного использования.