Як згладити свої проблеми в Sublime

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

Почнемо з визначення поняття «обшивка».

Обмежування - це процес перевірки коду на наявність потенційних помилок. Це може бути як синтаксис, так і стиль коду.

Процес облицювання може здійснюватися протягом трьох етапів розробки:

  1. Через ваш редактор (підключення)
  2. В процесі побудови
  3. Використання гачка перед фіксацією у контролі версій

У цій публікації ми розглянемо прямі переклади в редакторі. Існує багато популярних посилань для JavaScript, таких як JSHint, JSCS та ESLint. Я буду використовувати ESLint, оскільки ESLint підтримує код ES6, є дуже розширюваним і дуже простим у використанні. Якщо вам цікаво, ви можете подивитися порівняння між різними лінтерами тут!

Крок 1

Спочатку потрібно встановити пакет ESLint npm. Команда така:

npm install -g eslint

Опція '-g' полягає у встановленні пакету на глобальному. Встановіть 'npm', якщо він ще не встановлений. У Sublime відкриється файл із проханням завантажити ще два плагіни. Вам потрібно встановити ці плагіни за допомогою управління пакетами Sublime.

Відкрийте елемент керування пакетом, використовуючи команду / ctrl + shift + P і виберіть опцію «Керування пакетом: Встановити пакет». Потім завантажте два плагіни.

  1. SublimeLinter-eslint
  2. SublimeLinter-contrib-eslint

SublimeLinter - це структура, яка забезпечує підключення. Він не постачається з підтримкою різних мов. Мовний Linter повинен бути встановлений окремо.

Плагін Sublime-contrib-eslint діє як інтерфейс між ESLint і SublimeLinter. Ви можете перевірити процедуру встановлення на їх головному веб-сайті, якщо ви десь застрягли.

Після успішної установки плагінів вам потрібно скинути налаштування редактора, щоб зміни набрали чинності. Тепер ми побачимо ESLint в дії!

Крок 2

Фу! Це було багато інсталяцій. Тепер, нарешті, ви можете перевірити дивовижність Linting! Відкрийте файл у Sublime і подивіться на силу ... але зачекайте, що нічого не сталося. Чому так? Не хвилюйся. Ви встановили все правильно, але ESLint сам по собі нічого не робить. Вам потрібно надати базову конфігурацію, і це дуже простий процес. Ось як:

  1. Запустіть програму терміналу в домашньому каталозі вашого проекту
  2. Введіть цю команду
eslint --init

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

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

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