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)

Который позволяет делать проверку кода на наличие синтаксических ошибок. Далее предоставлена простая инструкция для превращение редактора в полноценный IDE для веб-разработки.

ВНИМАНИЕ! Статья описывает настройку Sublime Text 3 (далее ST3) на Windows 7.

1. Представим что вы уже установили ST3 на свой Win 7 и установили Package Control .

2. Теперь необходимо поставить дополнительные пакеты в ST3. Идем в Preferences -> Package Control -> Install Packages
И устанавливаем следующие пакеты:

• SublimeLinter
• SublimeLinter-html-tidy
• SublimeLinter-csslint
• SublimeLinter-jsl
• SublimeLinter-jshint
• SublimeLinter-php
• SublimeLinter-phplint
• JSHint

3. Настройка проверки ошибок синтаксиса HTML
3.1. Скачиваем и кладем его в любую понравившуюся вам папку.
3.2. Добавляем путь до этой папки! с tidy.exe в переменную серды пользователя windows (PATH), настройки которой, находятся в Мой компьютер -> Свойства -> Дополнительные параметры системы -> Переменные среды… -> Выбираем переменную «PATH» -> Жмем «Изменить» добавляем путь.
ВНИМАНИЕ! Обратите внимание на точку с запятой ";" после каждого пути и не забудьте её прописать, а так же обратите внимание на обратный \ слеш.

4. Настройка проверки ошибок синтаксиса CSS
4.1. Скачиваем и устанавливаем node.js
4.2. Добавляем путь до папки (до папки!) с node.js в PATH (путь примерно следующий: C:\Users\User_name\AppData\Roaming\npm )! Незабываем про точку с запятой.
4.3. Устанавливаем csslint. Для этого - запускаем командую строку Windows от имени админа и пишем: npm install -g csslint

5. Настройка проверки ошибок синтаксиса JavaScript
5.1. Если не делали пункты 4.1. и 4.2. - то делаем.
5.2. Устанавливаем jslint и jshint, для этого выполняем ту же самую операцию что и в пункте 4.3. только пишем вместо csslint - jslint и jshint соответственно.

6. Настройка проверки ошибок синтаксиса PHP
6.1. Не для php в сборке Denwera!
6.2. (UPDATE) Дело в том, что многие (в том числе и я) в качестве локального сервера ставят себе Denwer. И черт его знает почему (не вдавался в подробности), но PHP денвера не воспринимается ST3, хоть убей. Он может выводить ошибки PHP в консоль ST3, но подсветки синтаксиса так и не будет.
P.S. Я специально добавил этот пункт, т.к. на многих форумах пишут, что ставим PHP, настраиваем пакеты ST3 и будет вам счастье. Но счастья не происходит, т.к. пункт с установкой PHP обычно сразу опускается из-за надежды на работоспособность(пригодность) denwer-a.
6.3. Поэтому, сразу идем сюды и скачиваем PHP. Установка PHP - просто разархивируйте архив в любую папку и пропишите путь до этой папки в PATH (пункт 3.2.)
6.4. Если у вас был прописан в PATH путь до папки с PHP денвера, то обязательно удалите его.
7. Файл конфигурации SublimeLinter.sublime.settings

НЕОБХОДИМО ПОПРАВИТЬ ПУТИ К 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
Бывает что некоторые забывают про режим debug mode у Sublimelinter. Чтобы его включить, жмем правой кнопкой мыши в любое место области редактирования ST3 -> SublimeLinter -> Debug Mode

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>

Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

Если вы собираетесь установить SublimeText3 то эта самая полная инструкция для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

Часть 1. Установка и настройка Sublime Text 3

Скачиваем и устанавливаем Sublime Text 3

Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt , Guard , и Less.app . Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

1. Устанавливаем Node.js
2. Устанавливаем NPM (устанавливается вместе с Node.js)
3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
4. Установим плагин Less2Css и SublimeOnSaveBuild

Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

"lesscCommand": "/usr/local/share/npm/bin/lessc"

Откроем любой.less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

Npm install -g less-plugin-clean-css

SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

• Устанавливаем Ruby
• Запускаем консоль, и ставим Ruby Gem gem install sass
• Устанавливаем плагин Sass для Sublime Text
• Устанавливаем плагин Sass Build для Sublime Text
• Устанавливаем плагин SublimeOnSave для Sublime Text
  (мы же говорили о этом плагине в инструкции выше)

Теперь добавим настройки в Sublime Text Settings – Default:

{ "filename_filter": ".(sass|scss)$", "build_on_save": 1 }

Также не забудьте при открытом.sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении.sass файла будет компилироваться.css.

Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

• Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
• Заходим в консоль и устанавливаем jade командой npm install jade --global
• В Sublime Text устанавливаем плагин Jade Build
• В Sublime Text открываем.jade файл и выбираем Jade build system
• Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так "filename_filter": ".(sass|scss|jade)$",
• Устанавливаем в Sublime плагин Jade

После этих манипуляций происходит компилирование jade файлов.

Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

Идем на официальный сайт 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 Control

Package 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 Text - это современный текстовый редактор с закрытым исходным кодом. Чаще всего он используется веб-разработчиками для редактирования html или php кода. Редактор имеет красивый, современный внешний вид и несколько интересных функций, таких как быстрая навигация, одновременное редактирование и ввод команд.

Несмотря на то что программа по умолчанию поставляется множеством возможностей, которые очень помогут вашей работе, всегда есть место для усовершенствования. Кроме всего прочего, здесь поддерживаются плагины, написанные на Python. В этой статье вы найдете лучшие плагины Sublime Text 3. Они подойдут также и для свободной альтернативы этой программы Lime Text. С помощью этих плагинов вы сможете очень сильно расширить возможности программы. А теперь перейдем к списку.

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

2. Emmet

Плагин Emmet есть не только для Sublime. Это довольно популярная вещь. Он позволяет писать css и html код намного быстрее с помощью аббревиатур и ярлыков, которые потом разворачиваются в полноценные html теги. Например:

((h4>a)+p>img)*12

Будет создано 12 элементов заголовков, после каждого из которых идет изображение. Затем вы можете просто заполнить полученный шаблон, уже без надобности набирать теги по одному.

Это плагин для проверки ошибок в вашем коде. Он был недавно переработан и теперь включает несколько новых функций. Он не поддерживает все языки программирования, а просто создает API, затем вы можете устанавливать плагины для тех языков, которыми пользуетесь чаще всего.

4. SublimeEnhancements

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

С помощью плагина PackageResourceViewer вы можете просматривать и редактировать пакеты, которые вы устанавливаете в Sublime Text 3. Есть возможность извлечь пакет в отдельную папку, исправить там то, что нужно и вернуть в программу.

6. Git

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

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

CSSComb - это плагин для сортировки свойств CSS. Если вы хотите, чтобы ваш код выглядел аккуратно и был расположен в правильном порядке, этот плагин поможет вам настроить порядок свойств. Это также полезно, когда вы работаете в команде разработчиков, у каждого из которых есть свои предпочтения по написанию кода.

С помощью этого плагина вы можете проверить поддержку браузером свойств CSS или HTML элементов, которые используете. Для того чтобы это сделать просто выделите свойство CSS или элемент HTML, после этого вы будете перенаправлены на соответствующую страницу caniuse.com.

Плагин Alignment позволяет выровнять код, включая PHP, JavaScript и CSS. Это делает его аккуратным и более удобным для чтения. Пример вы можете увидеть на этом скриншоте:

С помощью этого плагина вы можете удалить ненужные пробелы, а также лишние завершающие пробелы, которые могут вызвать ошибки JavaScript.

С помощью этого плагина вы можете выбрать и добавить в Sublime Text 3 любой цвет и вашей операционной системы просто кликнув на нем мышкой. Также можно выбрать цвет из цветового круга.

13. MarkDown Editing

Несмотря на то что Sublime Text 3 позволяет просматривать и редактировать файлы с разметкой MarkDown, он открывает их как обычные текстовые файлы с очень плохим форматированием. Этот плагин поможет улучшить форматирование и добавить цвет текста в файлы, написанные с помощью Markdown.

14. FileDiffs

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

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

16. Сторонние темы

Одинаковый внешний вид каждый день со временем надоедает. Новая тема может дать вам даже новые идеи для работы. Вы можете попробовать несколько интересных тем, например: