Як налаштувати ESLint в Atom, щоб ви могли брати участь у відкритому коді

Якщо ви хочете взяти участь у таких проектах з відкритим кодом, як freeCodeCamp, спочатку потрібно налаштувати підключення.

У більшості проектів існують власні стандарти стилів для JavaScript, і вони автоматично застосовуватимуться за допомогою таких інструментів, як ESLint .

Давайте налаштуємо ESLint для роботи в Atom, одному з найпопулярніших редакторів коду.

Перш ніж ми почнемо, ось короткий огляд, і я роблю кілька припущень:

  • Ви дотримуєтесь рекомендацій щодо внеску Free Code Camp аж до частини, де читається Налаштування підключення.
  • Отже, ви встановили необхідні передумови (зокрема Node.js та npm).
  • Ви маєте принаймні базове розуміння використання командного рядка та git .
  • Ви використовуєте Atom як текстовий редактор (хоча ця стаття має бути корисною, навіть якщо ви не користуєтесь - вам просто потрібно перевірити документацію вашого текстового редактора, щоб отримати вказівки щодо ESLint)

Що саме таке обшивка?

" Посилання - це процес запуску програми, яка буде аналізувати код на наявність потенційних помилок". - Готовий до переповнення стека

А ESLint - це інструмент підключення , специфічний для коду JavaScript. Ви використовуєте ESLint для пошуку проблемного коду ("помилки"), написаного на JavaScript.

До речі, “ES” в назві ESLint походить від “ECMAScript”, що є офіційною назвою основної мови JavaScript.

Уявіть ESLint, як ваша бабуся розповідає вам, як жити своїм життям. Вона вказує на ваші помилки і пропонує вам їх очистити. Ви слухаєте бабусю, бо бабуся знає.

Ці "помилки" можуть бути об'єктивними , що означає, що вони спричинені кодом, який не відповідає, скажімо, синтаксису JavaScript (або будь-якою мовою програмування, яку ви посилаєте). Таким чином, ви б сказали, що лінтер виявляє синтаксичні помилки.

Я кажу «об’єктивні помилки», оскільки ці помилки притаманні самому JavaScript. Якщо ви залишаєте крапку з комою в кінці оголошення змінної, це об’єктивно помилка на думку авторів JavaScript - навіть якщо це не заважає вашій програмі працювати (див. Автоматичне вставлення крапки з комою).

Або ці помилки можуть бути суб’єктивними , а це означає, що ви (не Технічний комітет 39, орган зі стандартів ECMAScript) визначили набір правил, яким повинен керуватися ваш код. Ці правила кодування зазвичай узагальнені в посібнику стилю JavaScript , який є документом, що декларує своєрідні найкращі практики кодування. Free 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's - це добре ознайомитись, оскільки на момент написання статті на GitHub він налічував понад 45 000 зірок, і він постійно збільшується у використанні.

Налаштування Linting для freeCodeCamp

Є два способи встановлення ESLint: глобально та локально. Ми зосередимося на встановленні його локально , що означає для вашого локального робочого каталогу, тобто вашого клонованого сховища Free Code Camp.

1: Відкрийте свій клон Free Code Camp у своєму текстовому редакторі (це передбачає, що ви дійсно клонували Free Code Camp на свій комп’ютер)

2: У терміналі cd((змінити каталог) на ваш каталог Free Code Camp

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

4: У текстовому редакторі Atom перейдіть до Налаштування > ;> Insta ll> & g t; і введіть li nter-eslint у вікні пошуку Пакети пошуку

Примітка: Ви також можете встановити пакети Atom із командного рядка за допомогою apmкоманди. Для прикладу див. Ці інструкції.

5: Встановіть лінт-еслінт та лінтер .

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.