Головна  /  Windows 7  /  Розширення для sublime text 3. Плагіни

Розширення для sublime text 3. Плагіни

Windows 7
02.09.2023

Правильний набір плагінів може підвищити ефективність роботи у будь-якому додатку. Якщо ви є веб-розробником, який працює з 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. Натисніть "OK".
  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 раз на пів години - годину).

Давайте встановимо русифікатор

Розпаковуємо завантажений архів і копіюємо всі файли з розширенням.

Якщо папки "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. Теми.Нічого не можу сказати з цього приводу. Просто знайдіть те, що подобається (бажано використовувати темну схему). Я використовую „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

Плагіни для Sublime Text пишуться мовою Python. Сама по собі мова дуже проста і якщо ви програміст, то вам не важко його вивчити. Якщо ні, то теж не біда, тому що швидше за все під Ваше завдання плагін вже написаний.

Встановлення плагінів у Sublime Text

На даний момент існує два методи встановлення плагінів у програму:

  1. Варварський. Достатньо просто завантажити з інтернету необхідний плагін та закинути його у відповідну папку. Але це не коректний метод, тому ми на ньому зупинятися не будемо.
  2. Через Sublime Package Control

Перед тим, як почати інсталювати плагіни, потрібно встановити Sublime Package Control, про це читаємо .

Для встановлення плагінів потрібно:

  1. відкрити командний рядок, натиснувши комбінацію клавіш: ctrl+shift+p;
  2. у рядку вводимо Install Package і тиснемо ентер;
  3. знизу в полі, що відкрилося, вводимо назву плагіна, наприклад: emmet;
  4. натискаємо enter і чекаємо кінця установки, там з'явиться екран із купою рядків;
  5. Готово.

(див. інструкцію на 3 скрін)

Розповідати про те, які плагіни популярні, а які немає особливого сенсу немає, тому що в Sublime пишуть кількома десятками мов програмування і під кожну мову є свої плагіни.

Але оскільки основна маса людей, що вибирає цей редактор пише на php ми все ж таки розглянемо кілька.

Sublime Text Emmet

Трохи раніше у прикладі ми встановили цей плагін. Він дуже прискорює розробку сайтів. Для того, щоб зрозуміти, що він робить у правому нижньому кутку замість Plain Text виберемо PHP. Тепер у редакторі ставимо! та натискаємо TAB.

Ще можна ввести: .wrapper натискаємо tab, як бачимо у нас з'явився div.

Для того, щоб зробити меню на 10 посилань можна написати наступне, після чого натиснути tab: .menu>ul>li*10>a(menu_$)

У лівій частині «! + tab», в центральній частині «. wrapper + tab», а в правій частині «menu> ul> li * 10> a (menu_$) + tab» Думаю, що суть вловили.

Advanced New File

Дозволяє створювати нові файли. Встановлюємо плагін, відкриваємо правий сайд бар, далі натискаємо комбінацію клавіш ctrl+alt+n і пишемо index.php, як бачимо файл створився, і це дуже швидко і зручно.

Brackethighlighter

За замовчуванням якщо ми стоїмо, наприклад на якомусь div, то дуже важко помітити тег, що закриває, так як він підкреслять занадто блідо. Brackethighlighter.


Помітно, що підкреслено яскравою білою лінією.

Color Highlighter

Підказує колір коду, тобто за умовчанням нам не ясно, якого кольору буде код #224f43, а плагін підкреслює код тим кольором, яким він є. Більше того, якщо ми клікнемо по коду, то він виділить його цим кольором.

Gotocss Declaration

Допомагає знайти та перейти на потрібний елемент css прямо з html коду. Потрібно просто правою кнопкою миші натиснути на елемент, до якого застосовується цей стиль і вибрати Go To CSS Declaration