Mis on kiud ja kuidas see aitab teie aega kokku hoida?

Tarkvaraarenduse üks suuremaid väljakutseid on aeg. See on asi, millest me lihtsalt ei saa rohkemat, kuid kiud võib aidata meil olemasolevast ajast maksimumi võtta.

Mis on siis lintimine?

lint ehk linter on tööriist, mis analüüsib lähtekoodi programmeerimisvigade, vigade, stiilivigade ja kahtlaste konstruktsioonide märgistamiseks. //et.wikipedia.org/wiki/Lint(tarkvara)

Lihtsamalt öeldes on linter tööriist, mis skannib teie koodi programmiliselt eesmärgiga leida probleeme, mis võivad põhjustada vigu või vastuolusid koodi tervise ja stiiliga. Mõni aitab neid isegi teie jaoks parandada!

Võtame näiteks järgmise näite:

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

Deklareerime konstandi testkaks korda, mille üle meie javascripti mootor ei rõõmusta. Nõuetekohaste paagiseadete ja kella konfigureerimise asemel saate koodi käivitamisel hiljem veana vahele jäämise asemel kohe taustal töötava paagis tõrke:

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

Võib olla üsna ilmne, et teil on kaks sama constdeklaratsiooni, kuna see on ainult 3 rida, kuid keerukamas rakenduses võib see säästa palju aega, kui peate jälitama ebameeldivat viga, mis pole alati ilmne.

Milles kõigis võib kiudmine aidata?

Palju asju, sealhulgas, kuid mitte ainult:

  • Vigade märkimine koodis süntaksivigadest
  • Hoiatuste esitamine, kui kood ei pruugi olla intuitiivne
  • Parimate tavade kohta soovituste esitamine
  • TODO ja FIXME jälgimine
  • Järjepideva koodistiili säilitamine

Enamik asju, mida võite mõelda, on tõenäoliselt juba ühel või teisel kujul olemas ja kui ei, saate isegi luua teie vajadustele vastavad kohandatud reeglid!

Kuidas see tegelikult aitab või miks peaksin sellest hoolima?

Tõenäoliselt on ülaltoodud loetelu suurim ülekaalukas teema asjaolu, et need probleemid kutsutakse kohe välja. Enam ei hakka need probleemid teie rakenduse käitamise ajal pähe tulema ega tekita kellegi ülevaatuse ajal ärevust. Enam ei võitle teie ja teie arvustaja lõputult agressiivselt passiivse agressiivsusega kommentaaride kaudu, kas lisada semikoolon JS-i avalduste lõppu (peaksite?)

Kõik need hetked, mis takistavad teid rumala süntaksi vea või teie ja tiimikaaslastega läbivaatamise käigus tekkinud mikrotoimingute tõttu produktiivsena, võtavad aega. Need liidavad kokku ja võtavad lõpuks ära aja, mille saate kulutada mõne muu vea parandamiseks või oma toote järgmise suurepärase funktsiooni väljatöötamiseks.

Kuidas siis tegelikult alustada?

Kuigi selle postituse jaoks on olemas enamiku, kui mitte kõigi teiste tavakeelte kiud, keskendun Javascriptile. Kehtib samad põhimõtted, kuid tööriistad võivad olla veidi erinevad.

Ma uurin, kuidas saate Reacti rakenduses põhilise kiilumise seadistada. Saate hõlpsalt kaasa minna, keerates oma rakenduse React või keerates minu Gatsby starterit: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Teie Linter

Alustuseks vajame kõigepealt linti. Tõenäoliselt on Javascripti maailmas kõige populaarsem ESLint. Teie linter on tegelikult eeskirjade määratlemise ja failide parsimise mootor, mille vastu testida. ESLint on iseenesest saadaval npm-paketina ja kui see on installitud, võimaldab see kastist välja seadistada põhikonfiguratsioonifaili ja mõne käsurea tööriista abil käivitada.

Lisame kõigepealt oma ESLinti sõltuvuse:

yarn add eslint -D

Paigaldame selle devDependency(sellest -Dlipuna), sest see pole midagi, mida meie rakendus peab käivitama. Kui see on edukalt installitud, lisame selle package.jsonskriptiks:

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

Eespool kirjeldame, et käivitame oma linteri kogu projektikataloogis mis tahes failis, millel on laiendus .js. Kui töötate suure projektiga, millel on palju failitüüpe, võib-olla isegi mõni, mida te ei soovi kiiluda, saate seda lippu muuta või täpsustada teiste võimalustega.

ESLinti toetamiseks peame tegema veel ühe asja. Lisame faili projekti juure (tõenäoliselt seal, kus teie olete package.json) kutsutud .eslintrc.jsja tehke faili sisu lihtsalt:

module.exports = {};

Kui olete valmis, saate joosta yarn lintja ... saada vea.

See on okei ja meie projektis oodatud, nii et lähme edasi.

Teie parser

Javascripti arendajate ahela levinud tööriist on Babel, mis võimaldab teil kirjutada koodi funktsioonidega, mida kõik brauserid ei pruugi toetada, näiteks ES6-s saadaval olevate noolefunktsioonide kasutamine ja muud kokkulepped, näiteks failide importimine läbi import.

Teie kirjutatud kood võib juba töötada läbi Babeli, et see brauseris töötaks, kuid see ei kehti vaikimisi ESLinti kohta, nii et ESLint võimaldab teil määrata parseri, mis võimaldab kiudude töötlemisel vaadata sama koodi, mida teie brauser näeb. Sel juhul soovime kasutada Babeli ESLinti parserit, mis on meile kättesaadavaks tehtud.

Selle seadistamiseks tahame kõigepealt oma sõltuvuse installida:

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

Järgige mind, et saada rohkem Javascripti, UX-i ja muud huvitavat!

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

Algselt avaldatud aadressil //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time