Как да преодолеете проблемите си в Sublime

Sublime е лек текстов редактор и е доста популярен сред много уеб разработчици. Сега знам, че на пазара има много усъвършенствани IDE с intellisense, завършване на код и какво ли още не. Но тази публикация е за тези, които са останали верни на любимите си текстови редактори! Така че, ако използвате 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 е доста страхотен инструмент за откриване на грешки във вашия код. Той гарантира, че винаги следвате указанията за кода и пишете чист код. Надявам се, че всички сте намерили тази публикация за полезна и както винаги щастливо кодиране!