Čo je to podšívka a ako vám môže ušetriť čas?

Jednou z najväčších výziev pri vývoji softvéru je čas. Je to niečo, z čoho nemôžeme ľahko získať viac, ale podšívka nám môže pomôcť vyťažiť maximum z času, ktorý máme.

Čo je to teda podšívka?

lint alebo linter je nástroj, ktorý analyzuje zdrojový kód na označenie programovacích chýb, chýb, štylistických chýb a podozrivých konštrukcií. //en.wikipedia.org/wiki/Lint(software)

Jednoducho povedané, linter je nástroj, ktorý programovo skenuje váš kód s cieľom nájsť problémy, ktoré môžu viesť k chybám alebo nesúladom so zdravím a štýlom kódu. Niektoré vám môžu pomôcť opraviť ich!

Vezmime si napríklad nasledujúci príklad:

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

Konštantu deklarujeme testdvakrát, z čoho náš javascriptový engine nebude mať radosť. So správnym nastavením lintera a konfiguráciou hodiniek namiesto toho, aby ste sa pri spustení kódu neskôr zachytili ako chyba, okamžite sa vám zobrazí chyba prostredníctvom lintera bežiaceho na pozadí:

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

Môže byť celkom zrejmé, že máte 2 rovnaké constvyhlásenia, pretože ide iba o 3 riadky, ale v zložitejšej aplikácii to môže ušetriť veľa času na hľadanie otravnej chyby, ktorá nie je vždy zrejmá.

S čím všetkým môže podšívka pomôcť?

Veľa vecí, okrem iného:

  • Nahlasovanie chýb vo vašom kóde z dôvodu chýb syntaxe
  • Varovanie, keď kód nemusí byť intuitívny
  • Poskytovanie návrhov spoločných osvedčených postupov
  • Sledovanie úloh TODO a FIXME
  • Dodržiavanie konzistentného štýlu kódu

Väčšina vecí, na ktoré si spomeniete, už pravdepodobne existuje v tej či onej podobe, a ak nie, môžete si dokonca vytvoriť vlastné pravidlá, ktoré vyhovujú vašim potrebám!

Ako to vlastne pomáha alebo prečo by ma to malo zaujímať?

Pravdepodobne najväčšou prevládajúcou témou vyššie uvedeného zoznamu je skutočnosť, že tieto problémy budú okamžite vyvolané. Tieto problémy sa už na vás nebudú plaziť počas používania vašej aplikácie alebo nebudú mať pri kontrole kódu obavy. Už nebudete a váš recenzent donekonečna agresívne bojovať s komentármi o tom, či na konci vyhlásení JS zahrnúť bodkočiarku (mali by ste?).

Všetky tie okamihy, ktoré vám bránia v produktivite kvôli hlúpej syntaktickej chybe alebo mikrointerakciám, ktoré máte vy a vaši spoluhráči počas kontroly, istý čas trvajú. Sčítajú sa a nakoniec vám odoberú čas, ktorý môžete venovať opraveniu ďalšej chyby alebo vývoju ďalšej skvelej vlastnosti vášho produktu.

Ako teda vlastne začať?

Aj napriek tomu, že pre väčšinu, ak nie pre všetky ostatné bežné jazyky, existujú interinterty, pre účely tohto príspevku sa zameriam na Javascript. Platia rovnaké princípy, ale vybavenie môže byť trochu odlišné.

Prejdem si, ako môžete nastaviť základné lintingovanie v aplikácii React. Môžete jednoducho nasledovať roztočením svojej vlastnej aplikácie React alebo použitím môjho Gatsbyho štartéra: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Váš Linter

Na začiatok potrebujeme najskôr kuchynský riad. Pravdepodobne najpopulárnejšia vo svete Javascript je ESLint. Váš linter bude v skutočnosti motorom pre definovanie pravidiel a analýzu vašich súborov, aby sa dali otestovať. ESLint je k dispozícii ako balíček npm sám o sebe a po inštalácii vám hneď po vybalení umožní nastaviť základný konfiguračný súbor a spustiť prácu pomocou niektorých nástrojov príkazového riadku.

Najprv pridajme našu závislosť ESLint:

yarn add eslint -D

Inštalujeme to ako devDependency(odtiaľ -Dpríznak), pretože to nie je niečo, čo musí naša aplikácia bežať. Po úspešnej inštalácii ho pridáme do nášho package.jsonako skript:

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

Vo vyššie uvedenom texte spúšťame náš linter na celý adresár projektu na akomkoľvek súbore, ktorý má príponu .js. Ak pracujete s veľkým projektom s mnohými typmi súborov, možno aj s niektorými, ktoré nechcete prekladať, môžete tento príznak zmeniť alebo konkrétnejšie pomocou ďalších možností.

Na podporu ESLint budeme musieť urobiť ešte jednu vec. Poďme pridať súbor v koreňovom adresári nášho projektu (pravdepodobne tam, kde je váš package.json), ktorý sa volá, .eslintrc.jsa urobme obsah súboru jednoducho:

module.exports = {};

Keď budete pripravení, môžete spustiť yarn linta ... zobraziť chybu.

To je v poriadku a v našom projekte sa to očakáva, takže poďme ďalej.

Váš syntaktický analyzátor

Bežným nástrojom v reťazci pre vývojárov Javascriptov je Babel, ktorý vám umožňuje písať kód s funkciami, ktoré nemusia byť podporované vo všetkých prehliadačoch, napríklad pomocou funkcií so šípkami, ktoré sú k dispozícii v ES6, a ďalších konvencií, ako je import súborov cez import.

Kód, ktorý napíšete, už môže bežať cez Babel, aby fungoval v prehliadači, ale to sa na ESLint predvolene nevzťahuje, takže ESLint vám umožní určiť syntaktický analyzátor, ktorý umožní, aby sa pri spracovaní lintingu pozrel na rovnaký kód, aký vidí váš prehliadač. V takom prípade budeme chcieť použiť analyzátor ESLint spoločnosti Babel, ktorý je nám k dispozícii.

Aby sme to nastavili, najskôr si chceme nainštalovať našu závislosť:

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

Choďte za mnou a získate ďalšie Javascript, UX a ďalšie zaujímavé veci!

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

Pôvodne publikované na //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time