Какво е свързване и как може да ви спести време?

Едно от най-големите предизвикателства при разработването на софтуер е времето. Това е нещо, от което не можем лесно да се възползваме повече, но свързването може да ни помогне да се възползваме максимално от времето, което имаме.

И така, какво е свързване?

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

Най-просто казано, линтърът е инструмент, който програмно сканира вашия код с цел намиране на проблеми, които могат да доведат до грешки или несъответствия със здравето и стила на кода. Някои дори могат да ви помогнат да ги поправите вместо вас!

Вземете например следния пример:

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

Декларираме константата testдва пъти, от което нашият javascript двигател няма да бъде доволен. С правилните настройки на линтер и конфигурацията на часовника, вместо да бъдете уловени по-късно като грешка, когато кодът се изпълнява, веднага ще получите грешка чрез вашия линтер, работещ във фонов режим:

 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. Вашият линтър всъщност ще бъде двигателят за определяне на правила и анализ на вашите файлове, за да тествате. 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