Što je povezivanje i kako vam može uštedjeti vrijeme?

Jedan od najvećih izazova u razvoju softvera je vrijeme. To je nešto od čega ne možemo lako dobiti više, ali povezivanje nam može pomoći da što bolje iskoristimo vrijeme koje imamo.

Pa, što je povezivanje?

lint ili linter alat je koji analizira izvorni kod kako bi označio programske pogreške, greške, stilske pogreške i sumnjive konstrukcije. //en.wikipedia.org/wiki/Lint(software)

Jednostavno rečeno, linter je alat koji programski skenira vaš kôd s ciljem pronalaska problema koji mogu dovesti do grešaka ili nedosljednosti sa zdravljem i stilom koda. Neki vam čak mogu pomoći da ih popravite!

Uzmimo za primjer sljedeći primjer:

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

testDvaput izjavljujemo konstantu , što našem javascript mehanizmu neće biti drago. Uz pravilne postavke lintera i konfiguraciju sata, umjesto da vas kasnije uhvate kao pogrešku kada se kôd pokrene, odmah ćete dobiti pogrešku kroz svoj linter koji radi u pozadini:

 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.'; | ^

Moglo bi biti prilično očito da imate 2 iste constizjave s obzirom da su ovo samo 3 retka, no u složenijoj aplikaciji to može uštedjeti tone vremena da biste lovili dosadnu bubu koja nije uvijek očita.

U čemu sve može povezivanje pomoći?

Puno stvari, uključujući, ali ne ograničavajući se na:

  • Označavanje programskih pogrešaka u kodu zbog sintaksnih pogrešaka
  • Upozoravajući vas kada kôd možda nije intuitivan
  • Davanje prijedloga za uobičajene najbolje prakse
  • Praćenje TODO-a i FIXME-a
  • Održavanje dosljednog stila koda

Većina stvari kojih se možete sjetiti vjerojatno već postoje u jednom ili drugom obliku, a ako ne, možete čak stvoriti prilagođena pravila koja odgovaraju vašim potrebama!

Kako ovo zapravo pomaže ili zašto bih se brinuo?

Vjerojatno najveća glavna tema gornjeg popisa jest činjenica da će se ti problemi odmah prozvati. Ti vam se problemi više neće prikradati usred pokretanja aplikacije ili nekome zadavati tjeskobu tijekom pregleda koda. Više se nećete vi i vaš recenzent beskonačno agresivno boriti pasivno kroz komentare hoćete li na kraju JS izjava uključiti točku ili zarez (trebali biste?).

Svi oni trenuci koji vas sprječavaju da budete produktivni zbog glupe sintaksne pogreške ili mikro-interakcija koje vi i vaši suigrači imate tijekom pregleda trebaju vremena. Oni se zbrajaju i na kraju oduzimaju vrijeme koje možete potrošiti na popravljanje još jedne pogreške ili na razvijanje sljedeće izvrsne značajke vašeg proizvoda.

Pa kako zapravo započeti?

Iako postoje linteri za većinu, ako ne i za sve ostale uobičajene jezike, u svrhu ovog posta usredotočit ću se na Javascript. Primjenjuju se isti principi, ali alat može biti malo drugačiji.

Provest ću kroz način na koji se možete postaviti za osnovno povezivanje u aplikaciji React. To možete lako pratiti okretanjem vlastite React aplikacije ili korištenjem mog Gatsby startera: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Tvoj Linter

Za početak prvo trebamo linter. Vjerojatno najpopularniji u svijetu Javascripta je ESLint. Vaš linter zapravo će biti pokretač definiranja pravila i raščlanjivanja datoteka radi testiranja. ESLint je dostupan kao npm paket sam po sebi i jednom instaliran, izvan okvira omogućuje vam postavljanje osnovne konfiguracijske datoteke i pokretanje uz pomoć nekih alata naredbenog retka.

Dodajmo prvo našu ovisnost o ESLint-u:

yarn add eslint -D

Instaliramo ovo kao devDependency(dakle -Dzastavu), jer to nije nešto što naša aplikacija treba pokrenuti. Nakon što je uspješno instaliran, dodajte ga u naš package.jsonskriptu:

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

U gore navedenom pokrećemo naš linter na cijelom direktoriju projekta na bilo kojoj datoteci koja ima ekstenziju .js. Ako radite s velikim projektom s mnogo vrsta datoteka, možda čak i neke koje ne želite obložiti, možete promijeniti tu zastavicu ili biti precizniji s drugim opcijama.

Da bismo podržali ESLint, morat ćemo učiniti još jednu stvar. Dodajmo datoteku u korijen našeg projekta (vjerojatno tamo gdje package.jsonse .eslintrc.jsi zove) i jednostavno napravimo sadržaj datoteke:

module.exports = {};

Kad budete spremni, možete pokrenuti yarn linti ... dobiti pogrešku.

Ovo je u redu i očekuje se u našem projektu, pa krenimo dalje.

Vaš parser

Uobičajeni alat u lancu za programere Javascripta je Babel, koji vam omogućuje pisanje koda sa značajkama koje možda nisu podržane u svim preglednicima, poput korištenja funkcija strelica, dostupnih u ES6, i drugih konvencija poput uvoza datoteka putem import.

Kôd koji napišete možda se već provodi kroz Babel za rad u pregledniku, ali to se prema zadanim postavkama ne odnosi na ESLint, pa vam ESLint omogućuje da odredite parser koji omogućuje obradi povezivanja da gleda isti kôd koji vidi vaš preglednik. U ovom ćemo slučaju htjeti koristiti Babelov ESLint parser koji nam je dostupan.

Da bismo to postavili, prvo ćemo htjeti instalirati našu ovisnost:

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