Hvad er fnug, og hvordan kan det spare dig tid?

En af de største udfordringer inden for softwareudvikling er tid. Det er noget, vi ikke let kan få mere af, men fnug kan hjælpe os med at få mest muligt ud af den tid, vi har.

Så hvad er fnug?

fnug eller en linter er et værktøj, der analyserer kildekoden for at markere programmeringsfejl, bugs, stilistiske fejl og mistænkelige konstruktioner. //da.wikipedia.org/wiki/Lint(software)

Kort sagt, en linter er et værktøj, der programmatisk scanner din kode med det formål at finde problemer, der kan føre til fejl eller uoverensstemmelser med kodesundhed og stil. Nogle kan endda hjælpe med at ordne dem for dig!

Tag for eksempel følgende eksempel:

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

Vi erklærer konstanten testto gange, som vores javascript-motor ikke vil være glad for. Med de korrekte linterindstillinger og urkonfiguration, i stedet for at blive fanget senere som en fejl, når koden kører, får du straks en fejl gennem din linter, der kører i baggrunden:

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

Det kan være ret åbenlyst, at du har 2 af de samme consterklæringer, da dette kun er 3 linjer, men i en mere kompleks applikation kan dette spare masser af tid at skulle jage efter en irriterende fejl, der ikke altid er indlysende.

Hvad kan alt fnug hjælpe med?

Masser af ting, herunder men ikke begrænset til:

  • Markering af fejl i din kode fra syntaksfejl
  • Giver dig advarsler, når kode måske ikke er intuitiv
  • Tilvejebringelse af forslag til almindelig bedste praksis
  • Holde styr på TODO'er og FIXME'er
  • Holde en ensartet kodestil

De fleste ting, du kan tænke på, findes sandsynligvis allerede i en eller anden form, og hvis ikke, kan du endda oprette brugerdefinerede regler, der passer til dine behov!

Hvordan hjælper dette faktisk, eller hvorfor skal jeg bryde mig?

Sandsynligvis det største overliggende tema på listen ovenfor er det faktum, at disse spørgsmål vil blive kaldt op med det samme. Disse problemer kryber ikke længere op i midten af ​​at køre din app eller giver nogen angst under en kodevurdering. Ikke længere vil du og din anmelder uendeligt kæmpe passivt aggressivt gennem kommentarerne om, hvorvidt der skal medtages et semikolon i slutningen af ​​JS-udsagn (skal du?).

Alle de øjeblikke, der forhindrer dig i at være produktive på grund af en fjollet syntaksfejl eller de mikrointeraktioner, du og dine holdkammerater har under en gennemgang, tager tid. De tilføjer og ender med at fjerne den tid, du kan bruge til at rette en anden fejl eller udvikle den næste fantastiske funktion i dit produkt.

Så hvordan kommer jeg faktisk i gang?

Selvom der er linters til de fleste, hvis ikke alle, andre almindelige sprog, med henblik på dette indlæg, vil jeg fokusere på Javascript. De samme principper gælder, men værktøjet kan være lidt anderledes.

Jeg vil køre igennem, hvordan du kan blive klar til grundlæggende fnug i en React-app. Du kan nemt følge med ved at spinde din egen React-app eller bruge min Gatsby-starter: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Din Linter

For at komme i gang har vi først brug for en linter. Sandsynligvis den mest populære i Javascript-verdenen er ESLint. Din linter vil faktisk være motoren til at definere regler og parsere dine filer til at teste mod. ESLint er tilgængelig som en npm-pakke i sig selv og når den er installeret, giver den dig ud af boksen mulighed for at oprette en grundlæggende konfigurationsfil og slå jorden i gang med nogle kommandolinjeværktøjer.

Lad os først tilføje vores ESLint-afhængighed:

yarn add eslint -D

Vi installerer dette som en devDependency(deraf -Dflag), fordi dette ikke er noget, vores applikation skal køre. Når det er installeret, lad os tilføje det til vores package.jsonsom et script:

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

I ovenstående kører vi vores linter på hele projektmappen på enhver fil, der har en udvidelse af .js. Hvis du arbejder med et stort projekt med mange filtyper, måske endda nogle, du ikke vil have fnugget, kan du ændre dette flag eller være mere specifik med andre muligheder.

For at støtte ESLint er vi nødt til at gøre en ting mere. Lad os tilføje en fil ved roden af ​​vores projekt (sandsynligvis hvor din package.jsoner) kaldes .eslintrc.jsog gøre indholdet af filen simpelthen:

module.exports = {};

Når du er klar, kan du løbe yarn lintog ... få en fejl.

Dette er okay og forventes i vores projekt, så lad os gå videre.

Din parser

Et almindeligt værktøj i kæden for Javascript-udviklere er Babel, som giver dig mulighed for at skrive kode med funktioner, der muligvis ikke understøttes i alle browsere, såsom brug af pilefunktioner, der er tilgængelige i ES6 og andre konventioner som import af filer via import.

Koden, du skriver, kører muligvis allerede gennem Babel for at arbejde i en browser, men det gælder som standard ikke for ESLint, så ESLint giver dig mulighed for at specificere en parser, der gør det muligt for linting-behandlingen at se på den samme kode, som din browser ser. I dette tilfælde vil vi bruge Babels ESLint-parser, der er tilgængelig for os.

For at indstille det, vil vi først installere vores afhængighed:

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

Følg mig for mere Javascript, UX og andre interessante ting!

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

Oprindeligt offentliggjort på //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time