10 найбільш корисних пакунків для веб-розробників

Ви пробували Atom? Хоча це зовсім нове, багато хто закохався в Atom, текстовий редактор, створений GitHub, який пропонує багато переваг і, перш за все, безкоштовний для використання. Atom поставляється з декількома вбудованими пакетами, такими як інтеграція з Git і деревоподібним. Однак для цілей розвитку вам обов'язково потрібні інші пакети.

У цьому пості ми вибрали кілька пакетів, які повинен мати веб-розробник. Деякі з них допомагають організувати свій брудний код, інші допоможуть вам отримати кращий доступ до файлів, не залишаючи Atom. Ось ваші 10 обов'язкових пакунків Atom.

Вибір кольору

Як випливає з назви, цей пакет дозволяє вибрати кольори, і це так само просто, як правою кнопкою миші та вибором пункту "Вибір кольору". Альтернативно, це можна зробити, натиснувши CMD / CTRL + SHIFT + C. Палітра кольорів працює, якщо курсор знаходиться на тексті на файлах CSS / SASS / LESS, які містять один з наступних форматів кольорів: HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 і VEC4, або змінна кольору SASS або LESS. Вона також має можливість конвертувати між форматами.

Еммет

Еммет мабуть, це плагін, який потрібно встановити, незалежно від того, в якому середовищі є текстовий редактор. Основні особливості Emmet, такі як розширення абревіатур і перенесення скорочень, дозволяють швидко працювати при написанні синтаксисів HTML, CSS, Sass / SCSS і LESS. Наприклад, в HTML, введіть p> a потім натисніть клавішу TAB, щоб отримати повний HTML-тег

. Cheat Sheet допоможе вам швидко вивчити абревіатурний синтаксис Emmet.

Мінімап

Якщо ви звикли до Sublime Text, ви можете бути знайомі з міні-переглядом на правому вікні. Ця функція корисна для швидкого прокручування вихідних кодів занадто довго для висоти вікна. С Мінімап, Ви отримуєте це для Atom. Ви навіть можете встановити позицію ліворуч або праворуч, увімкнути / вимкнути підсвічування коду та багато іншого. Minimap навіть поставляється з деякими плагінами, щоб розширити його функціональність, наприклад, кольоровий маркер.

Прикраси

Прикраси перетворить ваш брудний код більш акуратним і читабельним. Він має велику підтримку для мов програмування, таких як HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C + +, C #, Objective-C, CoffeeScript, рукописний текст і SQL. Після установки цього пакета, щоб запустити його, просто клацніть правою кнопкою миші та виберіть "Впорядкувати вміст редактора", або через Пакети> Atom Beautify> Beautify.

Атом Лінтер

Атом Лінтер поставляється як "будинок" з плагінів для основних мов, що надає API верхнього рівня для лінтер. Є доступні linters для JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, Python. На одній мові може бути більше одного плагіна, наприклад JSHint, JSCS і JSXHint для JavaScript.

Після установки цього основного пакета потрібно інсталюйте конкретний linter для мови, на якій ви працюєте, наприклад, якщо ви перебуваєте на JavaScript і вибираєте JSHint для linter, то ви можете встановити його, запустивши $ apm встановити linter-jshint на терміналі.

Піктограми файлів

Піктограми файлів додайте іконки до імені файлу на основі відповідного типу файлу. Це додасть візуальні покращення, коли ви відкриваєте файл на вкладці або на дереві. Піктограми файлів налаштовуються: ви можете додати власну піктограму та змінити колір за допомогою файлів LESS у форматі packages / file-icons / styles каталог. Значок за замовчуванням поставляється в 8 кольорах і 3 варіантах (світлий, середній і темний).

Фрагменти JavaScript

Фрагменти JavaScript дозволяє швидко написати частину вихідного коду JS. З певною абревіатурою вам не потрібно писати кодове слово для слова, наприклад, просто введіть тип cl робити console.log і gi для getElementById. Ця функція подібна до Emmet, але вона працює на JavaScript коді. Цей пакунок Atom надає багато синтаксису JavaScript, таких як функція, консоль і цикл.

CSS Гребінець

CSS Гребінець робить ваш код стилів послідовно відформатованим, виглядаючи акуратно і красиво. Ви можете використовувати попередньо налаштовані налаштування сортування на основі Yandex, Zen або CSSComb себе, або навіть можете використовувати власні уподобання для створення правил сортування. Після встановлення цього пакета завдання сортування можна здійснити, натиснувши CTRL + ALT + C або доступ до нього з контекстного меню через Пакети> Гребінець CSS> Гребінець.

Git Plus

Git Plus дозволяє працювати з Git, не виходячи з редактора Atom. У редакторі ви можете зробити Git Commit, Checkout, push / pull, diff та інші команди git. Вам потрібно налаштувати user.name і user.email на вашому конфігураційному файлі git, щоб всі функції працювали. Щоб отримати доступ до всіх команд git, відкрийте палітру з CMD + SHIFT + H або виберіть Пакет> Git Plus.

Віддалене редагування

Віддалене редагування допомагає вам бачити і редагувати віддалені файли, не виходячи з редактора або з іншими програмами ftp. Для початку спочатку створіть новий хост, а потім додайте через меню Пакети> Віддалене редагування> Додати новий хост і ввести свою реєстраційну інформацію. Тепер ви можете перейти до віддалених файлів, використовувати CTRL + ALT + B для перегляду зареєстрованих хостів і перегляду файлів.