Как да настроите ESLint в Atom, за да можете да допринесете за Open Source

Тук не става въпрос за вятъра, който получавате от вълна.

Ако искате да допринесете за проекти с отворен код като Free Code Camp, първо трябва да настроите връзки.

Повечето проекти имат свои собствени стандарти за стил на JavaScript и те ще бъдат автоматично наложени чрез свързване на инструменти като ESLint.

Нека да настроим ESLint да работи в Atom, един от най-популярните редактори на кодове.

Преди да започнем, ето бърза подправка, която правя няколко предположения:

  • Следвате указанията за принос на Free Code Camp до частта, която гласи Setup Linting.
  • И така сте инсталирали необходимите предпоставки (особено Node.js и npm).
  • Имате поне основно разбиране за използването на командния ред и git.
  • Използвате Atom като текстов редактор (въпреки че тази статия трябва да е полезна, дори и да не сте - просто трябва да проверите документацията на текстовия редактор за инструкции относно ESLint)

Какво точно е облицовка?

„Линдингът е процесът на стартиране на програма, която ще анализира код за потенциални грешки.“ - Oded on Stack Overflow

И ESLint е свързващ инструмент, специфичен за JavaScript код. Използвате ESLint, за да намерите проблемния код („грешки“), написан на JavaScript.

Между другото, „ES“ в името на ESLint идва от „ECMAScript“, което е официалното име на основния език на JavaScript.

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

Тези „грешки“ могат да бъдат обективни, което означава, че са причинени от код, който не съответства, да речем, на синтаксиса на JavaScript (или какъвто и език на програмиране да свързвате). По този начин бихте казали, че връзката събира грешки в синтаксиса.

Казвам „обективни грешки“, защото тези грешки са присъщи на самия JavaScript. Ако оставите полу-двоеточие в края на декларация с променлива, това обективно е грешка според писателите на JavaScript - дори ако това не спира програмата ви да се стартира (вижте автоматично вмъкване на запетая).

Или тези грешки могат да бъдат субективни, което означава, че вие ​​(не Технически комитет 39, органът по стандарти на ECMAScript) определяте набор от правила, които вашият код трябва да следва. Тези правила за кодиране обикновено се обобщават в ръководство за стил на JavaScript, което е документ, деклариращ вид кодиране на най-добрите практики. Безплатни Code Camp сред много други софтуерни проекти използват ръководства за стил.

Ръководството за стила на JavaScript на Airbnb е едно от най-популярните за разработчиците на JavaScript, а ръководството за стила на Free Code Camp се основава на него.

Целта на следването на ръководство за стил е да има "стандарт за писане", който разработчиците на вашия проект следват, за да поддържат код чист, прост и последователен. Това е подобно на концепцията, която следват журналистите от AP Stylebook. Единствената разлика е, че AP Stylebook е стилен справочник за английска граматика, докато Airbnb ръководството за стил е за JavaScript.

След като разясните как трябва да се пише код за вашия софтуерен проект (което означава, че сте избрали ръководство за стил или сте създали свой собствен), вие сте готови да настроите вашите правила за свързване на ESLint.

Начинът, по който работи ESLint, е да му кажете какви правила (т.е. вземете правилата си за ръководство за стил и ги преобразувате в правила за свързване), за които трябва да знаете и за какво трябва да внимавате, така че ESLint да ви докосне по рамото и да ви уведоми когато пишете проблематичен код.

За да кажете на ESLint за вашите правила за свързване, вие ги конфигурирате в конфигурационен файл наречен.eslintrc или eslintConfig или package.json, който ESLint ще търси и чете автоматично. И докато разработвате, ESLint ще ви предупреждава за код на проблем, който не се подчинява на тези правила, за да можете да правите ревизии - както кодирате. Което е все едно да имаш програма с баба двойка с теб.

Там, където ESLint свети, той е „предназначен да бъде напълно конфигурируем, което означава, че можете да изключите всяко правило и да стартирате само с основна проверка на синтаксиса или да смесвате и съпоставяте пакетните правила и вашите персонализирани правила, за да направите ESLint перфектен за вашия проект.“ В други думи, които можете да смесвате и съответствате както на обективни, така и на субективни правила.

Имате опции, когато става въпрос за инструменти за свързване на JavaScript, но в тази статия се съсредоточаваме върху ESLint, защото Free Code Camp го посочва в своите насоки за принос. И се използва широко другаде.

Имате и опции, когато става дума за ръководства за стил в JavaScript. Airbnb е добре да се запознаете, тъй като към момента на писането има над 45 000 звезди в GitHub и нараства.

Настройка на обшивка за безплатен код лагер

Има два начина за инсталиране на ESLint: глобално и локално. Ще се съсредоточим върху инсталирането му локално, което означава за вашата локална работна директория, т.е. вашето клонирано хранилище на Free Code Camp.

1: Отворете своя клон Free Code Camp в текстовия си редактор (това предполага, че наистина сте клонирали Free Code Camp на вашия компютър)

2: В Терминал, cd (промяна на директория) към вашата директория Free Code Camp

3: Въведете npm инсталиране eslint --save-dev в терминал

4: Във вашия текстов редактор на Atom отидете на Предпочитания >> Инсталиране >> и въведете linter-eslint в полето за търсене на пакети за търсене

Забележка: Можете също да инсталирате Atom пакетите от командния ред, като използвате командата apm. Вижте тези инструкции за пример.

5: Инсталирайте linter-eslint и linter.

6: В директорията на Free Code Camp затворете всички файлове .js и след това отворете отново

И сега следващия път, когато пишете JavaScript, трябва да видите ESLint да работи!

Забележка: Оставих една важна стъпка: конфигуриране на ESLint, тоест частта, в която персонализирате ESLint и му казвате за вашите правила за свързване. Направих това, защото когато клонирате хранилището на Free Code Camp, той вече идва с конфигурационни файлове на ESLint, например вижте eslintrc и package.json. И така не е нужно да правите никаква конфигурация.

В случай, че работите по проект, при който трябва да конфигурирате ESLint, ви насочвам към следните връзки:

  • Конфигуриране на ESLint.
  • Започнете с ESLint v1.0
  • npm, eslint
  • Разширяемата конфигурация на ESLint на Airbnb

За да приключите:

  1. Линдингът е процесът на проверка за проблемен код.
  2. ESLint е един такъв инструмент, който извършва облицовка.
  3. ESLint може да бъде чудесно средство за обучение, защото ви принуждава да пишете чист, постоянен код и да развивате добри навици за кодиране.
  4. Много проекти с отворен код ви молят да стартирате ESLint.
  5. Трябва да имате ESLint, настроен в текстовия си редактор, за да допринесете за Free Code Camp.
  6. Ако не използвате Atom, проверете документите на текстовия редактор за това как да инсталирате ESLint.
  7. Останете курса.

Ако имате въпроси, можете да ме чукате на @gilbertginsberg или да ме намерите в GilbertIndex.