Javascript-verktøy i aksjon

Det er fantastisk å se hvor Javascript er i dag, og hvor mye det har utviklet seg sidenES2015, dagene av var og $(.submitBtn) er langt bak oss. Ettersom javascript holder
verktøyene (formatter, linter, bundler) rundt det blir stadig bedre, og i denne artikkelen skal vi se hvordan ESLint (linter), Penere (formaterer) og Husky (Git-hooks) kan forbedre utvikleropplevelsen og ha stor innvirkning på applikasjonen din. I denne artikkelen skal vi bruke en React app, men husk at disse verktøyene kan brukes med alle Javascript/Node-applikasjoner. Vi begynner med å generere en React prosjekt ved hjelp av vite med disse trinnene:

npm opprette vite@latest
Prosjektnavn: js-tools
Velg et rammeverk: react
Velg en variant: react
cd js-tools
npm installer

ESLint for kodekvalitet

ESLint er et verktøy som hjelper deg med å finne og løse problemer i din JavaScript kode. For å legge den til vår
app følger vi disse trinnene:

cd js-tools
npm init @eslint/config
# må vi svare på disse spørsmålene for å initialisere konfigurasjonen
Hvordan ønsker du å bruke ESLint? For å sjekke syntaks og finne problemer
Hvilken type moduler bruker prosjektet ditt? JavaScript-moduler (import/eksport)
Hvilket rammeverk bruker prosjektet ditt? React
Bruker prosjektet ditt TypeScript? Nei
Hvor kjører koden din? Nettleser
Hvilket format vil du at konfigurasjonsfilen skal være i? Javascript
Vil du installere dem nå? ja
Hvilken pakkebehandler vil du bruke? npm
# vi kommer til å installere flere plugins
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Dette vil skape en .eslintrc.cjs filen som inneholder vår ESLint config i roten av appen vår, la oss
oppdatere konfigurasjonsfilen med våre installerte plugins og legge til en styre:

const feil = 2;

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', 'plugin:react/jsx-runtime',
    'plugin:react-hooks/anbefalt',
    'plugin:jsx-a11y/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'no-unused-vars': error,
  },
  innstillinger: {
    react: {
      versjon: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Vi bruker de anbefalte innstillingene for hver plugin og har gjort no-unused-vars en feil, er et ekstra trinn å legge til en lo kommandoen til vår package.json filen på følgende måte:

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

Nå som vår Oppsett av ESLint er klar, skal vi oppdatere appen vår for å gjøre noen tester og se
hvordan det fungerer. Det første du må gjøre er å oppdatere App.jsx filen inne i src inneholder denne komponenten et bilde, en enkel videospiller og en knapp som veksler mellom videoavspilleren
avspillings-/pausetilstand når du klikker på den:

import { useEffect, useRef, useState } fra 'react';

export default function () {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const heading = 'Hello ESLint + Prettier + Husky';

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

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

  return (
    <div>
      <button type="button" onclick="{togglePlay}">
        {isPlaying ? 'Pause' : 'Play'}
      </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>
  );
}

import { useEffect, useRef, useState } fra 'react';

export default function () {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

useEffect(() => {
if (!isPlaying) {
videoRef.current.play();
} else {
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>
);
}

La oss prøve å se hva det vil si å kjøre lo kommandoen vil rapportere om vår App.jsx kode:

Vi har 4 feil, flotte eller ikke så flotte skal jeg si, vi har nettopp fanget flere typer feil, noen er relatert til React, noen til a11y, og en skyldes regelen som vi har lagt til for å forby ubrukte variabler. Det som er bra med ESLint er at det fanger opp feil for deg og gir oss en indikasjon på løsningen, og alle reglene er veldig godt dokumentert. Så for å fikse koden vår må vi gjøre følgende:

- Gi et navn til komponenten vår

- Bruk variabelen `heading` eller slett den hvis den er ubrukelig

- Legg til en `track`-tag for teksting i videospilleren

- Legg til et `alt`-attributt med meningsfull tekst i bildeelementet

Etter å ha brukt disse rettelsene og kjørt `lint`-kommandoen, får vi ingen feil, og vår rettede kode er som følger:

  import { useEffect, useRef, useState } fra 'react';

export default function App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

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

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

return (

{overskrift}

<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="Grapefruktskive på toppen av en haug med andre skiver"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Det er litt irriterende å måtte bruke lo kommandoen før hver commit og man kan glemme å gjøre det, kan det være nyttig å sette opp en git-krok for å automatisere denne oppgaven og løse dette problemet, og det er det vi skal snakke om i Husky seksjon.

Penere for kodeformatering

Penere er en meningsfull kodeformaterer som støtter mange språk og kan integreres med mange kodeditorer. La oss legge til Prettier i appen vår:

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

Vi må opprette to filer i roten av appen vår a .prettierignore filen for å ignorere filer eller mapper vi ikke ønsker å formatere:

node_modules/
dist/
public/

Og en .prettierrc.json filen som vil inneholde den penere konfigurasjonen vår:

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

Prettier-konfigurasjonen kan tilpasses, og du kan leke med Prettier-lekeplassen for å finne de innstillingene som passer best for deg. Et ekstra trinn for å få prettier til å fungere godt med ESLint er å installere en ekstra ESLint-plugin:

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

Vi må også oppdatere .eslintrc.cjs filen ved å legge til penere til strekker seg må vi sørge for å plassere den i siste posisjon for å overstyre andre konfigurasjoner:

const feil = 2;

module.exports = {
...,
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/anbefalt',
'plugin:jsx-a11y/recommended',
'prettier',
],
...

Det er enkelt og greit å kjøre prettier, en måte er å kjøre npx prettier --write . kommandoen som formaterer all app-koden din, en annen måte er å bruke den fra redigeringsprogrammet, slik at du får mest mulig ut av Prettier, enten via en tastatursnarvei eller automatisk når du lagrer en fil. Når en linje har blitt så lang under kodingen at den ikke får plass på skjermen, er det bare å trykke på en tast og se hvordan den på magisk vis blir pakket inn i flere linjer! Eller når du limer inn kode og innrykk blir helt feil, kan du la Prettier fikse det for deg uten å forlate redigeringsprogrammet.

Men hva om en av utviklerne bruker en editor som ikke støtter "prettier" og glemmer å bruke penere kommando, finnes det en måte å løse dette problemet på, og det er temaet for Husky avsnittet nedenfor.

Husky for Git-kroker

Husky hjelper deg med å sette opp git-hooks for å linting av commit-meldinger, kjøre tester, linting av kode osv... når du committerer eller pusher. Vi kommer til å bruke den sammen med lint-staged for å automatisere linting og formatering av kode før du committerer koden.

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

Dette vil skape en .husky mappe med en pre-commit filen. Neste trinn er å oppdatere package.json fil for å sette opp lint-iscenesatt kommandoen og be den om å formatere alle endrede filer i den gjeldende overføringen:

{
...,
"skript": {
"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"
},
...
}

Siste trinn er å oppdatere pre-commit filen for å konfigurere kroken vår til å kjøre lo kommandoen på alle appene og formater de endrede filene med lint-iscenesatt kommando:

!/usr/bin/env sh

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

npm kjør lint
npx lint-staged
```

La oss gjøre noen refactoring til vår app for å se hvordan alt dette fungerer, vi kommer til å lage en VideoPlayer.jsx komponent og bruke det i App.jsx:

```javascript
import { useEffect, useRef } fra 'react';

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

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

return (

);
}

import { useState } fra 'react';
import VideoPlayer fra './VideoPlayer';

export default function App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

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

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

  <div>
    <img
      alt="Grapefruktskive på toppen av en haug med andre skiver"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nå som vi er fornøyde med koden vår, kan vi legge inn endringene og se hvordan det går.

Feil igjen, denne gangen er det på grunn av manglende validering av rekvisitter, og som du kan se, var vår commit ikke vellykket. La oss fikse dette ved først å installere PropTypes npm i prop-types og oppdatering av VideoPlayer komponent:

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

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

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

return (

);
}

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

Etter å ha rettet disse feilene ble commitingen vår vellykket etter å ha kjørt linting- og kodeformateringskommandoene. Som du kan se, har vi med Husky i utgangspunktet automatisert linting og formatering med denne pre-commit-kroken, og dette vil unngå uønsket kode i kodebasen vår og løse problemer som inkompatibilitet med redaktører og å glemme å kjøre disse kommandoene.

Sammendrag

ESLint, Penere og Husky er gode verktøy som hjelper oss med å vedlikeholde koden vår. Sammen gir de oss en god utvikleropplevelse og gjør det enklere å vedlikeholde koden vår.

Vi har snakket om linting og formatering i denne artikkelen, men de tilgjengelige verktøyene og mulighetene er mye større. Du kan sette opp noen tester som skal kjøres på en pre-commit hook, eller hvis du bruker Typescript, kan du legge til en kommando for typesjekking med Husky for å hoppe over ikke-typet kode i appen din.

Les mer om dette:

Fordeler og ulemper med Vue

Slik dreper du et prosjekt med dårlig kodingspraksis

React: Tips og triks