Що таке футеровка і як це може заощадити ваш час?

Однією з найбільших проблем у розробці програмного забезпечення є час. Це те, чого ми не можемо легко отримати, але підкладки можуть допомогти нам максимально використати час, який ми маємо.

Отже, що таке обшивка?

lint або linter - це інструмент, який аналізує вихідний код для позначення помилок програмування, помилок, стилістичних помилок та підозрілих конструкцій. //en.wikipedia.org/wiki/Lint(software)

Простіше кажучи, лінтер - це інструмент, який програмно сканує ваш код з метою виявлення проблем, які можуть призвести до помилок або невідповідності стану та стилю коду. Деякі можуть навіть допомогти їх виправити!

Візьмемо, наприклад, такий приклад:

const test = 'I am a test'; console.log(`Test: ${test}`); const test = 'Another one.';

Ми оголошуємо константу testдвічі, чому наш механізм JavaScript не буде задоволений. Завдяки правильним налаштуванням linter та конфігурації годинника, замість того, щоб пізніше потрапляти як помилка під час запуску коду, ви одразу отримаєте помилку через ваш linter, що працює у фоновому режимі:

 10:9 error Parsing error: Identifier 'test' has already been declared 8 | const test = 'I am a test'; 9 | console.log(`Test: ${2}`); > 10 | const test = 'Another one.'; | ^

Можливо, цілком очевидно, що у вас є 2 однакові constдекларації, оскільки це лише 3 рядки, але в більш складному додатку це може заощадити багато часу, щоб вишукувати докучливу помилку, яка не завжди очевидна.

У чому все може допомогти лінтування?

Багато речей, включаючи, але не обмежуючись ними:

  • Позначення помилок у коді через синтаксичні помилки
  • Попередження, коли код може бути не інтуїтивно зрозумілим
  • Надання пропозицій щодо поширених передових практик
  • Відстеження TODO та FIXME
  • Зберігаючи послідовний стиль коду

Більшість речей, про які ви можете думати, вже існують в тій чи іншій формі, а якщо ні, ви навіть можете створити власні правила, які відповідають вашим потребам!

Як це насправді допомагає, чи чому мені це потрібно?

Мабуть, найбільшою головною темою у наведеному вище списку є той факт, що ці питання будуть негайно оголошені. Більше ці проблеми не з’являться перед вами під час запуску програми або не викликають занепокоєння під час перегляду коду. Більше ви та ваш рецензент нескінченно будете активно пасивно боротися через коментарі щодо того, чи включати крапку з комою в кінець висловлювань JS (чи слід?).

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

Отже, як мені насправді розпочати?

Незважаючи на те, що є посилання для більшості, якщо не для всіх інших основних мов, для цілей цього допису я зупинюсь на Javascript. Застосовуються ті самі принципи, але оснащення може бути дещо іншим.

Я збираюся описати, як ви можете налаштувати базовий підключення в програмі React. Ви можете легко піти далі, закрутивши власний додаток React або скориставшись моїм стартером Gatsby: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Ваш Лінтер

Для початку нам спочатку потрібен лінт. Ймовірно, найпопулярнішим у світі Javascript є ESLint. Ваш linter насправді буде двигуном для визначення правил та аналізу ваших файлів для тестування. ESLint доступний як пакет npm сам по собі, і після встановлення він дозволяє вам встановити базовий файл конфігурації та вдатися до місця роботи за допомогою деяких інструментів командного рядка.

Спочатку додамо нашу залежність ESLint:

yarn add eslint -D

Ми встановлюємо це як devDependency(отже, -Dпрапор), оскільки це не те, що потрібно запускати нашій програмі. Після успішного встановлення додамо його до нашого package.jsonяк сценарію:

... "scripts": { ... "lint": "eslint . --ext .js" ... }, ...

У наведеному вище ми запускаємо наш лінтер у всьому каталозі проекту на будь-якому файлі з розширенням .js. Якщо ви працюєте з великим проектом із багатьма типами файлів, можливо, навіть з тими, які вам не потрібні, ви можете змінити цей прапор або бути більш конкретними з іншими параметрами.

Щоб підтримати ESLint, нам потрібно зробити ще одну справу. Давайте додамо файл у кореневій частині нашого проекту (мабуть, де package.jsonзнаходиться ваш ) .eslintrc.jsі зробимо вміст файлу просто:

module.exports = {};

Коли ви будете готові, ви зможете запустити yarn lintі… отримати повідомлення про помилку.

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

Ваш парсер

Поширеним інструментом ланцюжка для розробників Javascript є Babel, який дозволяє писати код із функціями, які можуть підтримуватися не у всіх браузерах, наприклад, за допомогою функцій стрілок, доступних у ES6, та інших конвенцій, таких як імпорт файлів через import.

Код, який ви пишете, може вже запускатися через Babel для роботи в браузері, але це не стосується ESLint за замовчуванням, тому ESLint дозволяє вказати синтаксичний аналізатор, який дозволяє обробці посилань переглядати той самий код, який бачить ваш браузер. У цьому випадку ми хочемо використовувати синтаксичний аналізатор Babel ESLint, який нам доступний.

Щоб це налаштувати, спочатку ми хочемо встановити нашу залежність:

yarn add babel-eslint -D

Typically if you're using babel-eslint you'll want to make sure babel is installed next to it, but in our case, Gatsby already uses babel, so we don’t necessarily need to add it. After that’s set up, we’ll want to update our .eslintrc.js config file with some new options:

module.exports = { "env": { "browser": true, "node": true, "es6": true }, "parser": "babel-eslint" };

Here, we’re letting ESLint know that our environment will be run in node (Gatsby’s precompiling), inside the browser (the app), and it will use ES6. This helps ESLint know how to run your code. Additionally, we want to set up our parser to be babel-eslint.

Once we’re ready to go, run yarn lint again and… well nothing really happened.

This is still expected, as we don’t have any rules set up!

Plugins for your code

Writing a React app? The Babel parser may help you transform your code, but you might have a hard time being productive, as ESLint needs to understand how it should work to lint your React files.

Part of the beauty of ESLint is that it allows you to configure plugins that have the opportunity to create and set rules for you. Luckily, along with our Babel parser above that does some of the heavy lifting, we have a React plugin available that does just that and takes care of linting the JSX for us.

Let’s first install our dependency:

yarn add eslint-plugin-react -D

Further, let’s update our .eslintrc.js file again:

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "parser": "babel-eslint" };

What we’re adding here is a setting that automatically detects what React version you’re using, which is helpful to let your linting get parsed properly, and then set up our react plugin that we installed above.

For one last final time, we will run our lint script and get nothing:

Rules defined by others’s opinions

If you’re not really sure where to get started or just want to quickly get up and running, it’s recommend that you enable ESLint’s own recommended rules. Let’s add this to our .eslintrc.js config file:

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "extends": [ "eslint:recommended" ], "parser": "babel-eslint" };

And let’s run our yarn lint.

Woah! This will immediately give you a lot errors, it seems like something’s wrong.

Since we’re running a React app, we also want to make sure our linter understands the rules it should follow, so let’s also add our React plugin to the .eslintrc.js config setup:

 "extends": [ "eslint:recommended", "plugin:react/recommended" ],

Now if you run yarn lint, you get something a little more logical.

If you’re following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! ?

Going further, if those don’t seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.

Some popular ones include:

  • Airbnb’s config
  • Semistandard
  • Google’s JS Style Guide

Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.

Let it do the work (most of it)

You don’t think I’m going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let’s try to get ESLint to fix some of it for us.

If you noticed after we ran the command above, ESLint gave us an extra message:

So let’s give it a try! Let’s run:

yarn lint --fix

And what do you know, it now only gives us 1 linting error.

Turns out ESLint was able to fix our semicolon issue automatically, but we’ll still have to add pageName to our Layout’s propTypes manually, not too much of a lift.

Running one more time and finally nothing again! But this time because everything's looking good.

Go forth and write messy code!

Kidding ? The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it’s nice to have all of your code neat and tidy.

This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it’s not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.

Other linting tools to check out

  • JSHint: an alternative to ESLint
  • Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass
  • Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game
  • Webhint: linting tool for accessibility, speed, and more website best practices
  • A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter

Originally published at //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time