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

Ако искате да допринесете за проекти с отворен код като freeCodeCamp, първо ще трябва да настроите свързване.

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

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

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

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

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

Свързването е процес на стартиране на програма, която ще анализира кода за потенциални грешки.“ - Oded при преливане на стека

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

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

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

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

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

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

Ръководството за стил на Airbnb за JavaScript е едно от най-популярните за разработчиците на 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's е добра, за да се запознаете с нея, тъй като по време на писането на тази книга тя има над 45 000 звезди в GitHub и все повече се използва.

Настройване на свързване за freeCodeCamp

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

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

2: В терминала cd(променете директорията) към вашата директория за безплатен код

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

4: В текстовия редактор на Atom отидете на Preferences > ;> Insta ll> & g t; и въведете li nter-eslint в полето за търсене на пакети за търсене

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

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

6: В директорията на Free Code Camp затворете всяка gt;.js files and and then re-open

And now the next time you write JavaScript you should see ESLint working!

Original text


Note: I’ve left out an important step: configuring ESLint, that is, the part where you customize ESLint and tell it about your linting rules. I did so because when you clone Free Code Camp’s repository, it already comes with ESLint configuration files, for example, see eslintrc and package.json. And so you don’t need to do any configuration of your own.

In the event you work on a project where you need to configure ESLint, I point you to the following links:

  • Configuring ESLint.
  • Get Started with ESLint v1.0
  • npm, eslint
  • Airbnb’s extensible shared ESLint config

To wrap up:

  1. Linting is the process of checking for problematic code.
  2. ESLint is one such tool that performs linting.
  3. ESLint can be a great learning tool because it forces you to write clean, consistent code and develop good coding habits.
  4. Many open source projects ask you to run ESLint.
  5. You should have ESLint set up in your text editor to contribute to Free Code Camp.
  6. If you’re not using Atom, check your text editor’s docs for how to install ESLint.
  7. Stay the course.

If you have questions, you can tweet me at @gilbertginsberg or find me at GilbertIndex.