Разделы сайта
Выбор редакции:
- Чем отличается интерфейс PCI Express от PCI?
- Команды bat-файлов. Как создать bat-файл? Базовые команды. Bat файлы, примеры Содержимое bat файла
- Когнитивные беспроводные самоорганизующиеся сети
- Какая информация - важная
- Origin – где взять последнюю версию, как скачать и правильно установить
- Как настроить горячие клавиши для любой программы Как настроить клавиши клавиатуры
- Не торопитесь с покупкой DVB-T2 тюнеров
- QQ: регистрируемся и устанавливаем секретные вопросы Вот краткий перечень требований к email-маркетингу в Китае
- Как поставить комментарии вконтакте на wordpress
- Веб-камера ВКонтакте: новые функции
Реклама
Sublime text полезные плагины. Плагины |
Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3 , установке необходимых для вёрстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте. Класснуть Запинить Вам наверняка знакома ситуация, когда на новом рабочем месте необходимо быстро установить и настроить Sublime Text для работы над новыми проектами. Как правило, тонкая настройка Sublime Text занимает много времени и выполнять её каждый раз не практично и долго. Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme . По-умолчанию 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:
Установка внешнего оформления Sublime TextМне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе. Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:
Установка плагина вручнуюНекоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную. Один из таких плагинов BufferScroll - потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы. Для установки BufferScroll вручную, перейдите на GitHub страницу плагина , скачайте и распакуйте его в любое удобное место на вашем диске. Далее в 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 на клавиатуре. Плагины для Sublime Text пишутся на языке Python. Сам по себе язык очень простой и если вы программист, то вам не составит труда его выучить. Если нет, то тоже не беда, так как скорее всего под Вашу задачу плагин уже написан. Установка плагинов в Sublime TextНа данный момент существует два метода установки плагинов в программу:
Перед тем, как начать инсталлировать плагины нужно установить Sublime Package Control, об этом читаем . Для установки плагинов нужно:
(см инструкцию на 3 скринах) Рассказывать о том, какие плагины популярны, а какие-нет особого смысла нет, так как в Sublime пишут на нескольких десятках языков программирования и под каждый язык есть свои плагины. Но так как основная масса людей, выбирающая этот редактор пишет на php мы все же рассмотрим несколько. Sublime Text EmmetЧуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP. Теперь в редакторе ставим! и нажимаем TAB. Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div. Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a{menu_$}
Advanced New FileПозволяет создавать новые файлы. Устанавливаем плагин, открываем правый сайд бар (view – side bar –show side bar), далее нажимаем комбинацию клавиш ctrl+alt+n и пишем index.php, как видим файл создался, и это очень быстро и удобно. BrackethighlighterПо умолчанию если мы стоим, например на каком то div, то очень тяжело заметить закрывающий тег, так как он подчеркнут слишком бледно. Brackethighlighter. ![]() Color HighlighterПодсказывает цвет кода, то есть по умолчанию нам не ясно, какого цвета будет код #224f43, а плагин подчеркивает код тем цветом, которым он является. Более того если мы кликнем по коду, то он выделит его этим цветом. Gotocss DeclarationПомогает найти и перейти на нужный элемент css прямо из html кода. Нужно просто правой кнопкой мыши кликнуть по элементу, к которому применяется этот стиль и выбрать Go To CSS Declaration Идем на официальный сайт Sublime Text в раздел Download, и скачиваем последнюю версию программы, для своей операционной системы я скачал программу разрядностью 64 бит. Запускаем, проверяем, что все работает. Кстати, программа не является бесплатной и если не приобретать ключ, то никаких ограничений нет кроме надписи "unregistered" в заголовке и не назойливого всплывающего окна с предупреждением через какой-то промежуток времени (1 раз в пол часа - час). Давайте установим руссификаторРаспаковываем скачанный архив и копируем все файлы с расширением.sublime-menu (кроме папки "backup") в одну из следующих папок (в зависимости от вашей операционной системы): Если папки "Default" по указанному пути нет, то необходимо создайть ее. Настроим автоперенос строкиОткрываем Preferences → Настройки - Пользовательские Дописываем следующую строчку: "word_wrap": true Борьба с кодировкой в файлахПовторим Preferences → Настройки - Пользовательские. Необходимо заменить "fallback_encoding": "Western (Windows 1251)", на эту строчку: "fallback_encoding": "Cyrillic (Windows 1251)", Устанавливаем Package ControlPackage Control необходим для того чтобы расширять функциональность редактора Sublime Text 3 различными плагинами. Идем на сайт ,смотрим инструкцию по установке. Или заходим в редактор, нажимаем клавиши: Ctrl + ~ , в появившейся коммандной строке вводим следующую комманду на установку: import urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; 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) Установка цветовых схемСнова нажимаем Ctrl+Shift+P и набираем daylerees - themes . ДополнительноДля доступа к FTP необходимо установить "SFTP" Еще одна интересная фича "Goto-CSS-Declaration". При клике на класс, показывает этот класс в файле стилей. Кроссплатформенный текстовый редактор. Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно) Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале. 1. Установка программы и контроль за дополнениями (Package Control)
Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д. 2. Настройки программы:
- Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:
3. Полезные клавиши "hotkey" :
Который позволяет делать проверку кода на наличие синтаксических ошибок. Далее предоставлена простая инструкция для превращение редактора в полноценный IDE для веб-разработки. ВНИМАНИЕ! Статья описывает настройку Sublime Text 3 (далее ST3) на Windows 7. 1. Представим что вы уже установили ST3 на свой Win 7 и установили Package Control . 2.
Теперь необходимо поставить дополнительные пакеты в ST3. Идем в Preferences -> Package Control -> Install Packages
3. Настройка проверки ошибок синтаксиса HTML
4. Настройка проверки ошибок синтаксиса CSS
5. Настройка проверки ошибок синтаксиса JavaScript
6. Настройка проверки ошибок синтаксиса PHP
НЕОБХОДИМО ПОПРАВИТЬ ПУТИ К tidy.exe и php.exe { "user": { "debug": true, "delay": 0.25, "error_color": "D02000", "gutter_theme": "Packages/SublimeLinter/gutter-themes/Circle/Circle.gutter-theme", "gutter_theme_excludes": , "lint_mode": "background", "linters": { "csslint": { "@disable": false, "args": , "errors": "", "excludes": , "ignore": "", "warnings": "" }, "hlint": { "@disable": false, "args": , "excludes": }, "htmltidy": { "@disable": false, "args": , "excludes": }, "jscs": { "@disable": false, "args": , "excludes": }, "jshint": { "@disable": false, "args": , "excludes": }, "jsl": { "@disable": false, "args": , "excludes": }, "php": { "@disable": false, "args": , "excludes": }, "phplint": { "@disable": false, "args": , "excludes": } }, "mark_style": "outline", "no_column_highlights_line": false, "passive_warnings": false, "paths": { "linux": , "osx": , "windows": }, "python_paths": { "linux": , "osx": , "windows": }, "rc_search_limit": 3, "shell_timeout": 10, "show_errors_on_save": false, "show_marks_in_minimap": true, "sublimelinter": true, "sublimelinter_executable_map": { "css": "node", "html": "Z:\\usr\\bin\\tidy.exe", //путь до вашей папки с tidy.exe, обратите внимание на двойные обратные слеши, они обязательны "php": "C:\\Program Files\\PHP_5.6\\php.exe" //путь до вашей папки с php.exe }, "syntax_map": { "css": "css", "html (django)": "html", "html (rails)": "html", "html 5": "html", "js": "js", "php": "php", "python django": "python" }, "warning_color": "DDB700", "wrap_find": true } } 8. Перезапускаем Sublime Text
|
Читайте: |
---|
Популярное:
Новое
- Команды bat-файлов. Как создать bat-файл? Базовые команды. Bat файлы, примеры Содержимое bat файла
- Когнитивные беспроводные самоорганизующиеся сети
- Какая информация - важная
- Origin – где взять последнюю версию, как скачать и правильно установить
- Как настроить горячие клавиши для любой программы Как настроить клавиши клавиатуры
- Не торопитесь с покупкой DVB-T2 тюнеров
- QQ: регистрируемся и устанавливаем секретные вопросы Вот краткий перечень требований к email-маркетингу в Китае
- Как поставить комментарии вконтакте на wordpress
- Веб-камера ВКонтакте: новые функции
- Добавить в избранные закладки для всех браузеров Javascript добавить в избранное