Як вибрати найкращий редактор JavaScript для веб-розробки

Існує ряд варіантів для розробників, які шукають хороший редактор JavaScript, який забезпечує більш ефективне та приємне робоче середовище.

Провідні редактори коду JavaScript мають багато таких самих чудових основних функцій, яких ви могли б очікувати, включаючи автозаповнення (заповнення коду), інтеграцію git та підтримку плагінів. Але саме дрібниці можуть зробити один редактор кращим, ніж інший для даного розробника.

Як тільки ви влаштуєтесь з редактором коду та ознайомитесь із робочим процесом, який робить вас більш ефективними, може бути важко змінити редактори, оскільки вам доведеться повторно вивчати ярлики, щоб оптимізувати ваші процеси розробки.

Навіть якщо ви станете більш ефективними в довгостроковій перспективі, все одно існує великий бар’єр для входу при переході, тому варто інвестувати трохи часу, щоб вибрати найкращий редактор для своїх потреб.

Давайте розглянемо деякі найпопулярніші варіанти редактора зараз.

Код Visual Studio

VSCode від Microsoft є безкоштовним, з відкритим кодом і досить легким при установці. Це фактичний редактор для початківців розробників JavaScript, частково тому, що він попередньо завантажений хорошим набором функціональних можливостей, які не потребують додаткових плагінів. VSCode також популярний і може бути ідеальним для більш досвідчених користувачів, яким потрібно швидко розпочати роботу.

Унікальною особливістю VSCode є те, що його можна використовувати через браузер. Тож саме те саме середовище, яке ви отримуєте на робочому столі, можливе в дорозі за допомогою планшета. Код-сервер повинен бути налаштований у мережі, до якої ви можете отримати доступ, щоб ця функція працювала, але це дуже зручно після її налаштування.

Порада . Працюючи над великим проектом в іншій IDE, де процес збірки може зайняти деякий час, я часто відкриваю величезний вихідний файл JS у VSCode і налаштовую його, щоб миттєво перевірити зміни у браузері, перш ніж застосовувати його. VSCode обробляє ці великі файли плавно.

Git вбудований в IDE, але інтеграція не така надійна, як деякі інші редактори. Наприклад, користувачі WebStorm віддають перевагу функції push / merge перед функцією VSCode.

Ви можете встановити багато додаткових функцій, які можуть вам знадобитися як розширення, яких тисячі. Але не всі з них є реальними особливостями. Фрагменти коду змішуються з функціями та доповненнями, що може зайняти час для перегляду та пошуку найкращих варіантів додавання. Якщо ви коли-небудь зіткнетеся з проблемою, VSCode має величезну спільноту користувачів; хтось, ймовірно, мав те саме питання і вирішив його.

Якщо ви не готові до повноцінної платної IDE з усіма приємними висновками і недостатньо знайомі з усіма плагінами та функціями, які можуть вам знадобитися, це логічна відправна точка.

Атом

Безкоштовний редактор Atom був розроблений GitHub. Це насправді спеціалізована версія браузера Chrome, перетворена в редактор тексту та вихідного коду. Внутрішньо він використовує Node.js для підтримки плагіна.

Безліч плагінів доступні для будь-яких функцій, які ви можете побажати, проте це не так сильно з коробки. Ви повинні зібрати декілька плагінів, щоб створити середовище для розробників настільки ефективно, наскільки це можливо. Якщо ви працюєте з JavaScript, ось кілька основних плагінів Atom для початку:

  • атом-машинопис
  • file-icons - для розфарбовування та призначення піктограм для різних типів файлів
  • атом-прикрашати
  • лінт

Порада . Увімкніть пакет автоматичного збереження, який буде зберігати зміни, коли фокус буде втрачено. Він вимкнений за замовчуванням.

Кілька користувачів можуть одночасно працювати з одним файлом, кожен із декількома курсорами на екрані, за допомогою плагіна teletype. Ви можете використовувати це для наставництва, парного кодування або співпраці. Ця функція відрізняє Atom від інших редакторів.

Інтеграція git добре реалізована, як і слід було очікувати від програмного забезпечення GitHub. Також корисним є плагін git-plus, який дозволяє запускати команди git за допомогою комбінацій клавіш, не використовуючи термінал git.

Atom можна налаштувати до такої міри, що ви можете редагувати файл .less, щоб налаштувати кольори IDE, що приємно, якщо ви хочете налаштувати кожну деталь свого середовища. Ви можете запустити скрипт .coffe під час запуску, який можна використовувати для швидкої зміни поведінки редактора.

Ви можете писати плагіни в JavaScript на основі добре задокументованого API редактора. Можливість створення власних функціональних можливостей та поведінки приємна у разі потреби.

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

Спочатку мені сподобалася ідея редагування стилів CSS для налаштування середовища IDE або, принаймні, можливості, якщо я коли-небудь захочу придумати власні теми. Це звучить весело, але на практиці розробка тем, які включають багато змінних, не є тривіальними проектами. На щастя, є безліч полірованих плагінів для завантаження.

Atom - надійний редактор, і він ідеально підходить для багатьох розробників.

Піднесений текст

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

Подібно до Atom, це може зайняти трохи часу, щоб все налаштувати. Але після запуску досвід стає дуже гладким. Також доступна економія на втраченому фокусі.

Sublime Text приємний, оскільки він легкий, що дозволяє дуже швидко завантажувати та працювати з великими проектами або файлами. Реалізація функції "перейти до чого завгодно" виділяється, оскільки її можна використовувати з іменами файлів, символами та номерами рядків. Більшість середовищ розробленої середовища надають подібні функції в тій чи іншій формі, але можливість поєднувати їх та здійснювати пошук за запитами типу "fileName @ functionName" цілком приємна.

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

Багато в чому Sublime Text дуже схожий на Atom. Але Sublime Text має перевагу з кращою загальною продуктивністю та чуйністю, що є чудовим.

VIM

Vim також є безкоштовним текстовим редактором і дуже налаштовується. Спочатку названий vi та перший текстовий редактор, розроблений для Unix, пізніше він був розширений до більш багатофункціонального редактора на ім'я Vim. Він доступний у більшості дистрибутивів Linux.

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

Графічний інтерфейс доступний, але це не інтерфейс за замовчуванням для Vim. Навіть увімкнення підтримки миші вимагає певних дій, щоб вона працювала. За замовчуванням використовується режим клавіатури, де деякі можуть віддавати перевагу доступу до кожного елемента керування та функції за допомогою ярликів.

З огляду на це, Vim може стати вашим ідеальним IDE, якщо ви витратите якийсь час на вивчення тонкощів програмного забезпечення та налаштування всіх способів поведінки та функцій, які ви хочете в ньому. Якщо ви стиснуті часом і не можете зробити початкові інвестиції, щоб щось набрати, Vim, можливо, не найкращий вибір для вас.

WebStorm

WebStorm був розроблений JetBrains і виділяється серед решти як справжній IDE JavaScript, оскільки він має всі функції, інтегровані безпосередньо з коробки. Середовище розробки для різних платформ, таких як React, Angular, Vue.js тощо, є бездоганним. Ви можете налагоджувати сценарії вузлів та запускати тести на вбудованому сервері. Ви також можете виконувати та налагоджувати сценарії npm через інтерфейс дерева. І для цього не потрібні ніякі плагіни.

Однак плагіни доступні для деяких рідкісних функцій, які не вбудовані в програмне забезпечення безпосередньо. Одним із плагінів, який не був включений за замовчуванням, було вікно редагування / попереднього перегляду із розділеною націнкою. Але здебільшого все, що вам може знадобитися, вже є. Найприємніше в цьому полягає те, що ви виявите функції, про які ви не знали, і як приємно їх мати.

За замовчуванням файли зберігаються автоматично під час роботи з ними. Коли ви використовуєте інший додаток, який цього не робить, ручне збереження здається дуже примітивним у порівнянні. Хоча це не властиво WebStorm, реалізація трохи приємніша.

Деякі люди не завжди можуть довіряти цілісності стеку відміни ctrl-z, але в WebStorm вбудована система VSC, яка в основному робить коміт кожного разу, коли файл зберігається. Це внутрішнє рішення і є окремим від ваших git-комітів. Файли зберігаються принаймні щоразу, коли вікно вмісту файлу втрачає фокус. Отже, якщо ви пройдете деякий час, не виконуючи git і вам доведеться повернутися назад або побачити попередній стан після останнього коміту, це не проблема.

Порада. Стрілка Ctrl-Shift-Up / Down дозволяє переміщати рядки або блоки коду вгору або вниз, поки редактор автоматично обробляє коми / дужки блоків.

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

Пара мінусів полягає в тому, що це не безкоштовно. І часом це може бути свиня пам'яті з дуже великими проектами. З роками він покращувався, а вміст файлів індексується всередині, так що пошук великих проектів відбувається дуже швидко. Останнє оновлення також включає значне покращення швидкості запуску.

Загальні поради щодо продуктивності редактора

Ярлик повторюваного рядка / виділення (у WebStorm: ctrl-d, в Atom: ctrl-shift-d, але всі вони можуть це зробити) є одним із моїх улюблених і може заощадити багато часу у багатьох сценаріях кодування.

Це час від часу з’являється там, де у вас є список елементів, і вам доведеться змінити перший (або якийсь) символ у кожному рядку, сказавши '.' to ',' але find-replace не практично використовувати. WebStorm дозволяє клацнути клавішу Alt, щоб розмістити кілька курсорів, щоб зробити однакові зміни в декількох місцях. Тим не менше, я в деяких сценаріях виявляю такий підхід швидше:

  • Помістіть курсор після першої крапки і починайте вносити зміни вручну.
  • Натисніть клавішу Backspace, кома, стрілка вниз. Покладіть палець на кожну клавішу і повторюйте натискання, починаючи повільно, а потім пришвидшуючи її. Отримавши шаблон, ви можете пришвидшити його до того місця, де ви швидко пройдете список із 200 рядків.

Це майже як грати мелодію на фортепіано (якомога швидше). Ви можете зробити це за допомогою списків нумерації. Напишіть перший рядок без номера, продублюйте рядок 9 разів і виконайте той самий процес, за винятком того, що кожен раз натискаєте одним пальцем наступне число. Почніть наступні 10 рядків з "1" і виконайте той самий процес, додаючи цифру після кожного "1".

Якщо ви погуглите таблицю "[ім'я редактора]", ви можете отримати короткий підсумок від користувачів щодо важливої ​​конфігурації або ярликів для редактора, який ви намагаєтесь. Роздрукуйте його та прочитайте всі ярлики, щоб ознайомитись із новими функціями та функціональними можливостями, яким ви не могли б піддатися.

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

Я доходжу до пошуку версії PDF, друку та ламінування сторінки для подальшого використання, але для деяких закладка чи знімок екрана також може працювати.

Висновок

Якщо ви новачок, який сподівається вивчити JavaScript і скористатися полірованим середовищем розробки для початку, VSCode є очевидним вибором, оскільки він простий у використанні з безліччю вбудованих сильних функцій.

Для більш досвідчених розробників, які точно знають, чого хочуть, Sublime і Atom можуть бути кращими, оскільки вони дадуть вам повний контроль над робочим середовищем. Ви можете вибрати серед тисяч функцій (пакетів) для встановлення та збереження запуску програми та використання ресурсів без додаткових можливостей, які вам не потрібні чи потрібні. Провівши трохи часу з кожним, ви допоможете зробити правильний вибір.

Для завзятих досвідчених користувачів, які почуваються як вдома, використовуючи лише клавіатуру, яка працює над проектами, ви можете бути ефективнішими за допомогою Vim, ніж будь-який інший редактор. Економія часу, необхідного для переміщення вашої руки між клавіатурою та мишею, складеться, але для засвоєння цього процесу знадобиться деякий час!

Нарешті, якщо ви не проти підтримати платну підписку і вас не турбують обмеження пам’яті чи центрального процесора вашої машини для розробки, WebStorm швидко запустить вас і працює незалежно від платформ розробки JavaScript, компіляторів або процесів побудови, з якими ви працюєте. Це забезпечує дуже зручне середовище для роботи.

Я особисто використовую WebStorm як свою основну IDE, але все одно регулярно використовую VSCode для редагування окремих або дуже великих файлів, коли продуктивність є пріоритетом.

Якщо вам сподобалась ця стаття, будь ласка, перегляньте JSCharting, бібліотеку діаграм JavaScript для розробників. Ви також можете переглянути додаткові повідомлення в блозі тут.