Готуємо Sublime Text 2 для front-end
Ні для одного досвідченого програміста або верстальника не секрет, що налаштована під себе середовище розробки (не в сенсі IDE, а в більш загальному) - життєва необхідність. Був час, коли я робив чергову верстку в практично голом Notepad ++ на єдиному моніторі, по черзі відкриваючи Photoshop, браузер і редактор. Сьогодні, в епоху «автоматизації всього», мені складно уявити, як взагалі можна було так працювати.
Sublime Text 2 - популярний розширюваний багатоплатформовий текстовий редактор, для якого написано безліч плагінів якщо і не на всі випадки життя, то на багато. У цьому пості я спробую розповісти як з цього конструктора скласти зручний інструмент front-end розробника для роботи з HTML, CSS і JavaScript. Невеликий дисклеймер: я працюю на Mac OS X, тому в якихось «кроссплатформенних моментах» можу що-небудь не договорити, але постараюся представити повну інформацію. І ще: на істину в останній інстанції не претендую і чекаю ваші варіанти.
Live reload і підтримка CSS-препроцесорів
Чому дві такі різні речі я об'єднав в один розділ? Все через специфіку деякого софта, про який я розповім пізніше. Live reload (або live preview), якщо раптом хтось не знає, це перегляд в браузері того, що ви зробили в редакторі, без необхідності оновлення сторінки, т. Е. Автоматично. Під підтримкою CSS-препроцесорів я маю на увазі додавання в Sublime Text 2 підтримки синтаксису SASS / SCSS, LESS, Stylus або чого б то не було ще з того, що ви віддаєте перевагу використовувати, а також організація автоматичної компіляції всього цього добра (build / watch system) . Насправді, все це об'єднано в один розділ не тільки через описаної вище причини, але ще й тому, що моєї (думаю, вашій теж) метою було зробити так, щоб можна було змінити щось, наприклад, в scss- файлі, зберегти його і тут же подивитися результат в браузері, т. е. автоматизувати процес компіляції і оновлення сторінки. А значить ми маємо ланцюжок «зберегти файл»> «скомпілювати»> «оновити», що цілком логічно укладає все це в один розділ статті.
Вступ
Для того щоб комфортно встановлювати, видаляти і оновлювати плагіни використовується Sublime Package Control , його установка дуже проста і описана на цій сторінці . Практично всі плагіни, які можуть вам знадобитися, є в Package Control, тому їх зручно шукати тут . Я не раджу ігнорувати цей плагін і ставити щось вручну, хіба що у вас буде на це особлива причина. Можна сказати, що Package Control зараз стандарт де-факто для Sublime Text 2.
Всі представлені плагіни розміщуються на GitHub, практично у всіх є readme, яке краще читати. Описувати всі тонкощі тут не має сенсу, адже все змінюється, тому в цій статті я буду давати невеликий опис, а подробиці прекрасно описують самі автори плагінів.
Основні плагіни
ZenCoding
ZenCoding навряд чи потребує коментарів, чи не так? Започаткований у 2008 році pepelsbey, цей «прискорювач написання коду» заощадив страшне кількість часу розробників. З тих пір реалізований у вигляді плагінів для багатьох редакторів і IDE.
Не так давно у плагіна ZenCoding з'явився спадкоємець - Emmet . Як підказали, він вже досить стабільний, щоб його використовувати.
SublimeLinter
Цей плагін додає підтримку lint для багатьох мов, в тому числі HTML, CSS і JavaScript. Для кращої роботи встановіть node.js , докладніше про це читайте в readme на GitHub . Взагалі, це один з полігонів, readme до яких краще читати повністю.
SublimeCodeIntel
Наближає можливості Sublime Text 2 до можливостей IDE, додаючи «code intelligence» і «розумний autocomplete», зокрема додає можливість швидкого переходу до оголошення, autocomplete для import'ов і відображення інформації про функції в статусному рядку.
Alignment
Цей плагін від автора Sublime Package Control робить простим вирівнювання багаторядкових і множинних виділених ділянок коду.
CSSComb
Про CSSComb докладно можна прочитати на Хабре . Цей корисний інструмент зачеше ваш CSS, розташувавши властивості в заданому порядку і розбивши їх на групи.
HTML5 і jQuery
Це набори фрагментів тегів HTML5 і методів jQuery, повний список яких можна подивитися в Tools> Snippets.
JsFormat
Плагін для форматування JS / JSON-коду, який використовує сервіс jsbeautifier.org і має досить гнучкі настройки. Форматує виділену ділянку коду або весь файл, якщо виділення немає. Перевірку на те, чи є у файлу розширення * .js, не здійснює, так що використовувати потрібно з обережністю.
Minifier
Minifier вміє мініфіціровать JavaScript ( Google Closure Compiler або UglifyJS ) і CSS ( Reducisaurus ). Весь плагін полягає в двох комбінаціях клавіш, одна зберігає результат в поточному файлі, а друга в окремому з ім'ям name.min.ext.
Prefixr
Однозначну must have для тих, хто не користується препроцесорів, та й всім іншим теж стане в нагоді. Додає там, де потрібно, Вендорний префікси (і навіть в правильному порядку) за допомогою сервісу prefixr.com . Працює просто - пишете властивість без префіксів, натискаєте комбінацію клавіш і готово.
SideBarEnhancement
Як зрозуміло з назви, додає деякі корисні поліпшення в сайдбар, наприклад, пункт контекстного меню сайдбара «Open with ...», що дозволяє відкрити файл в сторонньої програмою.
додаткові плагіни
Clipboard History
Можливо, цей функціонал краще мати в усій ОС, але мені вистачає його в редакторі. Плагін запам'ятовує історію буфера обміну, завдяки чому ви можете вставити не тільки останній скопійований фрагмент, але і будь-який з попередніх.
EncodingHelper
Крім іншого, отобржает кодування відкритого файлу в рядку статусу. В общем-то це єдина причина, по якій я встановив цей плагін, але у нього є й інші можливості, наприклад, він вміє попереджати про те, що файл, відкритий в неправильному кодуванні, може бути пошкоджений.
Placeholders
Чи часто вам доводиться вставляти в код риби? Всім любителям lorem ipsum цей набір фрагментів однозначно стане в нагоді. Крім простого тексту, вміє вставляти параграфи, списки, картинки і т. Д.
Theme - Soda
Це моя суб'єктивна рекомендація власникам Mac OS X. Тема Soda оформляє інтерфейс Sublime Text 2 в нативному стилі. Є дві колірні варіації - Light і Dark, а також підтримка Retina-дисплеїв. Втім, тема доступна для трьох ОС.
Live reload і підтримка CSS-препроцесорів
Тут все досить неоднозначно. З одного боку, є підтримка live reload і watch / build system за допомогою плагінів (перше у мене так і не запрацювало), а є кілька окремих програм, які, крім live reload, вміють стежити і компілювати файли всіляких препроцесорів. При цьому функціонал у них (в плані можливостей, що надаються GUI), зовсім різний, а ще різна вартість. Хтось уміє все аж до оптимізації зображень, а хтось не вміє і половини, зате безкоштовно. В цілому ж все зводиться до того, щоб підібрати для себе оптимальний варіант, в чому я і постараюся вам допомогти нижче.
підтримка синтаксису
Для початку забудемо про складнощі і просто зробимо підсвічування синтаксису для потрібних нам препроцесорів. Для кожного є свій плагін, так що все, що потрібно зробити, це вибрати потрібну: LESS , SASS і SCSS , Stylus (тут ще й build system в комплекті).
Модулі Sublime Text 2
автоматична компіляція
Почати краще не з безпосереднього додавання тих чи інших build systems в редактор, а з плагіна SublimeOnSaveBuild. Все, що він робить, полягає в автоматичному запуску Build (в меню це Tools> Build) для обраної вами Build System в момент збереження файлу.
Що ж стосується додавання Build Systems, тут все аналогічно підтримки синтаксису, вибирайте потрібне: LESS-build , SASS Build (і, звичайно, Compass ).
Live reload
З цим в плані плагінів до Sublime Text 2 не так райдужно, точніше є тільки один LiveReload (не плутати з програмою нижче), який у мене благополучно не працює. Точніше не працює розширення для Chrome (розширення для Safari, не пройшло перевірку, а підтримки інших браузерів немає), ну і в цілому він вже давно не оновлювався. Можливо, хто-небудь знає, як його готувати і підкаже в коментарях, але особисто мені було лінь розбиратися докладніше, тому я прийшов до використання окремої програми для «живого перегляду» і компіляції.
Окремі програми
LiveReload
Можливості: LiveReload, по-перше і як випливає з назви, вміє стежити за змінами файлів і оновлювати їх в браузері, а по-друге, автоматично компілювати якщо і не все, то багато що: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript , Eco, SLIM, HAML, Jade. Для самого live reload необхідно встановити додається розширення в браузер , є версії для Safari, Chrome і Firefox.
Кросплатформеність: В цілому програма для Mac OS X. Є версія для Windows, але сьогодні вона вдає із себе pre-alpha версію. Для Linux пропонується використовувати guard-livereload .
Ціна: Версія для Mac OS X коштує $ 9.99 в App Store, є і безкоштовний тріал. Версії для Linux і Windows безкоштовні.
CodeKit
Можливості: Ця програма надає найширші можливості і, в общем-то, самий зручний і функціональний GUI. Вміє live reload без розширень для браузера, автоматично компілювати Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript і Compass; об'єднувати і мініфіціровать скрипти, оптимізувати зображення і т. д.
Кросплатформеність: Її немає, програма тільки для Mac OS X.
Ціна: $ 25. Є безкоштовний тріал.
Scout
Можливості: На відміну від інших програм, Scout вміє тільки компілювати SASS і Compass, зате в його GUI можна задати Output Modes, і він безкоштовний.
Кросплатформеність: Є версії для Windows і Mac OS X, на цей раз версія для Windows повноцінна. Для Linux, на жаль, версії немає.
Ціна: Безкоштовно.
наостанок
LiveCSS . Додає візуальне відображення задаються в CSS квітів.
SublimeFileDiffs . Додає функцію порівняння файлів.
YUI-Compressor . Ще один плагін для мініфікаціі JS і CSS, який використовує для цього однойменний інструмент від Yahoo !.
SublimeTODO . Стане в нагоді використовують замітки в коментарях.
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.