Javascript in actie

Het is geweldig om te zien waar Javascript tegenwoordig is en hoeveel het is geëvolueerd sindsES2015, de dagen van var en $(.submitBtn) liggen ver achter ons. Naarmate javascript
evolueert, de tools (formatter, linter, bundler) eromheen steeds beter worden, gaan we in dit artikel zien hoe ESLint (linter), Mooier (formatteerder) en Husky (Git hooks) kunnen de ervaring van je ontwikkelaar verbeteren en een grote impact hebben op je applicatie. Omwille van dit artikel gaan we een React app, maar onthoud dat deze tools gebruikt kunnen worden met elke Javascript/Node toepassing. We beginnen met het genereren van een React project met ite met deze stappen:

npm maak vite@laatste
Projectnaam: js-tools
Selecteer een framework: react
Selecteer een variant: react
cd js-tools
npm installeren

ESLint voor codekwaliteit

ESLint is een hulpprogramma waarmee je problemen in je JavaScript kunt vinden en oplossen code. Om het toe te voegen aan onze
app volgen we deze stappen:

cd js-tools
npm init @eslint/config
# we moeten deze vragen beantwoorden om de configuratie te initialiseren
Hoe wil je ESLint gebruiken? Om syntax te controleren en problemen te vinden
Wat voor soort modules gebruikt uw project? JavaScript modules (import/export)
Welk framework gebruikt uw project? React
Gebruikt uw project TypeScript? Geen
Waar draait uw code? Browser
In welk formaat moet je configuratiebestand zijn? Javascript
Wil je deze nu installeren? Ja
Welke pakketbeheerder wil je gebruiken? npm
# we gaan extra plugins installeren
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Dit creëert een .eslintrc.cjs bestand met onze ESLint config in de root van onze app, laten we
het configuratiebestand bijwerken met onze geïnstalleerde plugins en een regel:

const error = 2;

module.exports = {
  env: {
    browser: true,
    es2021: waar,
  },
  uitbreidt: [
    "eslint:aanbevolen",
    plugin:react/aanbevolen
    plugin:react/jsx-runtime",
    plugin:react-hooks/recommended",
    plugin:jsx-a11y/aanbevolen
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    bronType: 'module',
  },
  plugins: ['react'],
  regels: {
    'no-unused-vars': error,
  },
  instellingen: {
    reageren: {
      versie: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

We gebruiken de aanbevolen instellingen voor elke plugin en hebben de niet-gebruikte-vars een fout geeft, is een extra stap het toevoegen van een pluis commando naar onze pakket.json bestand als volgt:

{
  ...,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "lint": "eslint --ext js,jsx ."
    },
  ...
}

Nu onze ESLint instelling klaar is, gaan we onze app bijwerken om wat testen uit te voeren en te zien
hoe het werkt. Het eerste wat je moet doen is de App.jsx bestand in de src map, bevat dit component een afbeelding, een basis videospeler en een knop waarmee de videospeler kan worden omgeschakeld
afspeel/pauzetoestanden wanneer erop wordt geklikt:

importeer { useEffect, useRef, useState } van 'react';

exportstandaard functie () {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const heading = 'Hallo ESLint + Prettier + Husky';

  useEffect() => {
    als (!isPlaying) {
      videoRef.current.play();
    } anders {
      videoRef.current.pause();
    }
  }, []);

  const togglePlay = () => setIsPlaying(!isPlaying);

  return (
    <div>
      <button type="button" onclick="{togglePlay}">
        {isPlaying ? 'Pauze' : 'Afspelen'}
      </button>

      <div>
        <video
          loop
 playsinline
 ref="{videoRef}"          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        />
      </div>

      <div>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      </div>
    </div>
  );
}

importeer { useEffect, useRef, useState } van 'react';

exportstandaard functie () {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hallo ESLint + Prettier + Husky';

useEffect() => {
als (!isPlaying) {
videoRef.current.play();
} anders {
videoRef.current.pause();
}
}, []);

const togglePlay = () => setIsPlaying(!isPlaying);

return (

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
  </div>
</div>
);
}

Laten we eens kijken wat het uitvoeren van de pluis commando rapporteert over onze App.jsx code:

We hebben 4 fouten, geweldig of niet zo geweldig moet ik zeggen, we hebben net meerdere soorten fouten gevangen, sommige zijn gerelateerd aan React, sommige aan a11y, en een is te wijten aan de regel die we hebben toegevoegd om ongebruikte variabelen te verbieden. Wat zo geweldig is aan ESLint is dat het fouten voor je opvangt en ons een indicatie geeft van de oplossing en alle regels zijn erg goed gedocumenteerd. Dus om onze code te repareren moeten we:

- Geef een naam aan ons component

- Gebruik de `heading` variabele of verwijder het als het nutteloos is

- Een `track` tag toevoegen voor bijschriften in de videospeler

- Voeg een `alt` attribuut met betekenisvolle tekst toe aan het afbeeldingselement

Na het toepassen van deze fixes met het `lint` commando krijgen we geen fouten, onze gerepareerde code is als volgt:

  importeer { useEffect, useRef, useState } van 'react';

exportstandaard functie App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hallo ESLint + Prettier + Husky';

useEffect() => {
als (!isPlaying) {
videoRef.current.play();
} anders {
videoRef.current.pause();
}
}, [isPlaying]);

const togglePlay = () => setIsPlaying(!isPlaying);

return (

{kop}

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    >
      <track kind="captions" src="flower-en.vtt" srclang="en" />
    </video>
  </div>

  <div>
    <img
      alt="Grapefruitschijfje bovenop een stapel andere schijfjes"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Het is een beetje vervelend om de pluis commando voor elke commit en men zou kunnen vergeten om dat te doen, het opzetten van een git hook zou handig kunnen zijn om deze taak te automatiseren en dit probleem op te lossen en dat is waar we het over gaan hebben in de Husky sectie.

Mooier voor codeopmaak

Mooier is een opiniërende codeformatter die veel talen ondersteunt en integreert met veel code-editors. Laten we prettier toevoegen aan onze app:

npm install --save-dev --save-exact prettier

We moeten twee bestanden maken in de root van onze app, een .prettierignore bestand om bestanden of mappen te negeren die we niet willen formatteren:

node_modules/
dist/
openbaar/

En een .prettierrc.json bestand dat onze mooiere configuratie zal bevatten:

{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "always",
"quoteProps": "as-need",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": true
}

Prettier config is aanpasbaar, je kunt spelen met de prettier speeltuin om de instellingen te vinden die het beste bij je passen. Een extra stap om prettier goed te laten werken met ESLint is om een extra ESLint plugin te installeren:

npm i --save-dev eslint-config-prettier

We moeten ook de .eslintrc.cjs bestand door het volgende toe te voegen mooier naar de breidt uit array, moeten we ervoor zorgen dat deze in de laatste positie om andere instellingen te overschrijven:

const error = 2;

module.exports = {
...,
uitbreidt: [
"eslint:aanbevolen",
"plugin:react/aanbevolen",
plugin:react/jsx-runtime",
plugin:react-hooks/recommended",
plugin:jsx-a11y/aanbevolen',
mooier',
],
...

Het uitvoeren van prettier is eenvoudig en rechttoe rechtaan, één manier is om de npx prettier --write . commando dat al je app code formatteert, een tweede manier is om het te gebruiken vanuit je editor, dit haalt het meeste uit Prettier, via een sneltoets of automatisch wanneer je een bestand opslaat. Als een regel tijdens het coderen zo lang is geworden dat hij niet meer op je scherm past, druk je op een toets en zie je hoe hij op magische wijze in meerdere regels wordt verpakt! Of wanneer je code plakt en de inspringing is helemaal verkeerd, laat Prettier het voor je oplossen zonder je editor te verlaten.

Maar toch, wat als een van de ontwikkelaars een editor gebruikt die prettier niet ondersteunt en vergeet om de mooier commando, is er een manier om dit probleem op te lossen en dat is het onderwerp van de Husky sectie hieronder.

Husky voor Git haken

Husky helpt je om git hooks in te stellen om je commit berichten te linten, tests uit te voeren, code te linten, etc... wanneer je commit of pusht. We gaan het samen met lint-staged gebruiken om het linten en formatteren van code te automatiseren voordat je de code commit.

npx husky-init && npm install
npm i --save-dev lint-staged

Dit creëert een .husky map met een pre-commit bestand. De volgende stap is het bijwerken van de pakket.json bestand om in te stellen lint-getrapt commando en vertel het om ieder gewijzigd bestand in de huidige commit te formatteren:

{
...,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --ext js,jsx .",
"prepare": "husky install".
},
"lint-staged": {
"**/*.+(js|jsx|json|css)": "prettier --write --ignore-unknown".
},
...
}

De laatste stap is het bijwerken van de pre-commit bestand om onze haak in te stellen om de pluis commando op alle app en formatteer gewijzigde bestanden met de lint-getrapt commando:

/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm lint uitvoeren
npx lint-staged
```

Laten we onze app wat refactoren om te zien hoe dit allemaal werkt, we gaan een VideoPlayer.jsx component maken en deze gebruiken in App.jsx:

javascript
importeer { useEffect, useRef } van 'react';

exportstandaard functie VideoPlayer({isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect() => {
als (!isPlaying) {
videoRef.current.play();
} anders {
videoRef.current.pause();
}
}, [isPlaying]);

return (

);
}

import { useState } van 'react';
importeer VideoPlayer uit './VideoPlayer';

exportstandaard functie App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hallo ESLint + Prettier + Husky';

const togglePlay = () => setIsPlaying(!isPlaying);

return (
 
{kop}
 <div>
    <videoplayer
      isplaying="{isPlaying}"      tracksrc="flower-en.vtt"
      videosrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img
      alt="Grapefruitschijfje bovenop een stapel andere schijfjes"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nu we tevreden zijn met onze code, laten we onze wijzigingen vastleggen en kijken hoe het gaat.

Weer fouten, deze keer schreeuwt het vanwege ontbrekende props validatie en zoals je kunt zien was onze commit niet succesvol. Laten we dit oplossen, door eerst PropTypes te installeren npm i prop-types en het bijwerken van de VideoPlayer component:

import { useEffect, useRef } van 'react';
importeer PropTypes van 'prop-types';

exportstandaard functie VideoPlayer({isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect() => {
als (!isPlaying) {
videoRef.current.play();
} anders {
videoRef.current.pause();
}
}, [isPlaying]);

return (

);
}

VideoPlayer.propTypes = {
isSpeelt: PropTypes.bool.isRequired,
videoSrc: PropTypes.string.isvereist,
trackSrc: PropTypes.string.isRequired,
};

Na het herstellen van deze fouten was onze commit succesvol na het uitvoeren van de linting en code opmaak commando's. Zoals je kunt zien met Husky hebben we in principe het linten en formatteren geautomatiseerd met deze pre-commit hook en dit voorkomt ongewenste code in onze codebase en lost problemen op als editors incompatibiliteiten en het vergeten om deze commando's uit te voeren.

Samenvatting

ESLint, Mooier en Husky zijn geweldige hulpmiddelen die ons helpen onze code te onderhouden. Samen bieden ze ons een geweldige ontwikkelaarservaring en maken ze het onderhouden van onze code eenvoudiger.

We hebben het in dit artikel gehad over linting en formatteren, maar de beschikbare tools en mogelijkheden zijn veel uitgebreider. Je zou een aantal tests kunnen instellen om te draaien op een pre-commit hook of als je Typescript gebruikt, een typecontrole commando toevoegen met Husky om ongetypte code in je app over te slaan.

Lees meer:

Voor- en nadelen van Vue

Hoe een project om zeep helpen met slechte codeerpraktijken

React: tips en trucs