Плагины. Плагины Sublime text 3 настройка под javascript

// 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 3 Package Ccontrol , мы настоятельно рекомендуем внимательно ознакомиться с рассмотренными в этой статье плагинами:

  • Package Control ;
  • HTMLPrettify ;
  • Emmet ;
  • Bracket Highlighter ;
  • jQuery ;
  • Case Conversion .

Package Control

Это плагин позволяет легко находить, устанавливать и обновлять другие пакеты. Его нужно установить первым. Это упростит работу со всеми другими плагинами.

Как установить

  1. Перейдите по ссылке https://packagecontrol.io/installation и скопируйте команду, которая будет выглядеть примерно так:
  1. Нажмите Ctrl — обратный апостроф (; `), чтобы открыть Sublime Text Console :
  1. Вставьте команду и нажмите Enter .
  1. После запуска команды вы увидите небольшое всплывающее окно с предупреждением:
  1. Нажмите «ОК ».
  2. Закройте и перезапустите Sublime Text .
  3. Введите команду Package Control , чтобы просмотреть все команды:

Мы будем использовать Package Control Sublime Text для остальных плагинов.

HTMLPrettify

Принимает длинные строки HTML , CSS , JavaScript и JSON и форматирует их так, чтобы вы могли их прочитать, а не пытались разобраться в сплошном наборе текста.

Как установить

  1. Нажмите Ctrl-Shift-P в Windows , чтобы открыть «Панель команд ».
  2. Введите команду Package Control , чтобы просмотреть все команды. Выберите Package Control: Install Package . На экране появится меню доступных плагинов:
  1. Введите HTMLPrettify :
  1. Нажмите на HTML-CSS-JS Prettify . Данное название немного отличается, но это тот же плагин.

Emmet

Это плагин раньше назывался Zen Coding . Он позволяет писать сокращенные коды HTML и CSS . Например, набрав следующее:

#page>div.logo+ul#navigation>li*5>a{Item $}

И нажав клавишу tab , вы получите:

После установки Emmet с помощью Sublime Text Package Control перезапустите Sublime Text .

Чтобы Emmet работал, необходимо установить синтаксис для документа. Иначе он работать не будет:

Теперь проверьте. Введите следующее:

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

И нажмите tab . Вы получите:

Чтобы изучить все доступные сокращения, уйдет много времени. Это позволит писать HTML-код намного быстрее.

BracketHighlighter

Плагин подсвечивает скобки и теги. После установки с помощью Sublime Text Package Control install можно щелкнуть в любом месте JavaScript или HTML-кода , и увидеть в левом столбце открытие и закрытие скобок:

JQuery

Плагин jQuery подсвечивает корректный синтаксис методов jQuery и предоставляет фрагменты кода для его завершения:

Case Conversion

Позволяет переключаться между snake_case , camelCase , PascalCase и т. д. После установки плагина с помощью Package Control (введите «pic » для быстрого доступа к Install Package ), попробуйте.

Идем на официальный сайт 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 и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)

Будем рассматривать его для Вёрстки на 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

mob_info