Javascript-værktøjer i aktion

Det er fantastisk at se, hvor Javascript er i dag, og hvor meget det har udviklet sig siden.ES2015, dagene med var og $(.submitBtn) er langt væk bag os. Som javascript holder
udvikler sig, bliver værktøjerne (formatter, linter, bundler) omkring det stadig bedre, og vi vil i denne artikel se, hvordan ESLint (linter), Smukkere (formaterer) og Husky (Git hooks) kan forbedre din udvikleroplevelse og have stor indflydelse på din applikation. I denne artikel vil vi bruge en React app, men husk, at disse værktøjer kan bruges med enhver Javascript/Node-applikation. Vi starter med at generere en React projekt ved hjælp af vite med disse trin:

npm skaber vite@latest
Projektnavn: js-tools
Vælg en ramme: react
Vælg en variant: react
cd js-tools
npm installer

ESLint til kodekvalitet

ESLint er et værktøj, der hjælper dig med at finde og løse problemer i din JavaScript Kode. For at tilføje det til vores
app følger vi disse trin:

cd js-tools
npm init @eslint/config
# skal vi besvare disse spørgsmål for at initialisere konfigurationen
Hvordan vil du gerne bruge ESLint? Til at tjekke syntaks og finde problemer
Hvilken type moduler bruger dit projekt? JavaScript-moduler (import/eksport)
Hvilket framework bruger dit projekt? React
Bruger dit projekt TypeScript? nej
Hvor kører din kode? Browser
Hvilket format skal din konfigurationsfil være i? Javascript
Vil du gerne installere dem nu? Ja, gerne.
Hvilken pakkehåndtering vil du bruge? npm
# vi skal installere yderligere plugins
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Dette vil skabe en .eslintrc.cjs fil, der indeholder vores ESLint config i roden af vores app, så lad os
opdater konfigurationsfilen med vores installerede plugins og tilføj en Regel:

const fejl = 2;

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

Vi bruger de anbefalede indstillinger for hvert plugin og har lavet no-unused-vars giver en fejl, er et yderligere trin at tilføje en Fnuller kommando til vores pakke.json fil på følgende måde:

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

Nu hvor vores ESLint-opsætning er klar, vil vi opdatere vores app for at lave nogle tests og se
Sådan fungerer det. Det første, du skal gøre, er at opdatere App.jsx fil inde i src indeholder denne komponent et billede, en grundlæggende videoafspiller og en knap, der skifter videoafspilleren.
play/pause-tilstand, når der klikkes på den:

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

export default function () {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const heading = 'Hej 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 = 'Hej 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>
);
}

Lad os prøve at se, hvad det vil sige at køre Fnuller kommando vil rapportere om vores App.jsx kode:

Vi har 4 fejl, gode eller ikke så gode skulle jeg sige, vi har lige fanget flere typer fejl, nogle er relateret til React, nogle til a11y, og en skyldes den regel, vi har tilføjet for at forbyde ubrugte variabler. Det gode ved ESLint er, at den fanger fejl for dig og giver os en indikation på løsningen, og alle reglerne er meget veldokumenterede. Så for at rette vores kode skal vi:

- Giv vores komponent et navn

- Brug variablen `overskrift`, eller slet den bare, hvis den er ubrugelig

- Tilføj et `track`-tag til undertekster i videoafspilleren

- Tilføj en `alt`-attribut med meningsfuld tekst til billedelementet

Efter at have anvendt disse rettelser og kørt kommandoen `lint`, får vi ingen fejl, og vores 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 = 'Hej 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="Grapefrugtskive oven på en bunke af andre skiver"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Det er lidt irriterende at skulle bruge Fnuller kommando før hver commit, og man kan glemme at gøre det, så det kan være nyttigt at opsætte en git-krog til at automatisere denne opgave og løse dette problem, og det er det, vi skal tale om i Husky afsnit.

Smukkere til kodeformatering

Smukkere er en meningsfuld kodeformaterer, der understøtter mange sprog og kan integreres med mange kodeditorer. Lad os tilføje Prettier til vores app:

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

Vi skal oprette to filer i roden af vores app - en .prettierignore fil for at ignorere filer eller mapper, vi ikke vil formatere:

node_modules/
dist/
public/

Og en .prettierrc.json fil, der vil indeholde vores pænere konfiguration:

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

Prettier-konfigurationen kan tilpasses, og du kan lege med prettier-legepladsen for at finde de indstillinger, der passer dig bedst. Et ekstra trin for at få prettier til at fungere godt med ESLint er at installere et ekstra ESLint-plugin:

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

Vi bliver også nødt til at opdatere .eslintrc.cjs fil ved at tilføje smukkere til strækker sig array, skal vi sørge for at placere det i sidste position for at tilsidesætte andre konfigurationer:

const fejl = 2;

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

Det er nemt og ligetil at køre prettier, en måde er at køre npx prettier --write . kommandoen, der formaterer al din app-kode, en anden måde er at bruge den fra din editor, så får du mest muligt ud af Prettier, enten via en tastaturgenvej eller automatisk, når du gemmer en fil. Når en linje er blevet så lang under kodningen, at den ikke kan være på skærmen, skal du bare trykke på en tast og se, hvordan den på magisk vis bliver pakket ind i flere linjer! Eller når du indsætter noget kode, og der går kludder i indrykningen, så lad Prettier ordne det for dig uden at forlade din editor.

Men hvad nu, hvis en af udviklerne bruger en editor, der ikke understøtter prettier, og glemmer at bruge smukkere kommando, er der en måde at løse dette problem på, og det er emnet for Husky afsnit nedenfor.

Husky til Git-kroge

Husky hjælper dig med at opsætte git-hooks til at lint'e dine commit-beskeder, køre tests, lint'e kode osv... når du committer eller pusher. Vi vil bruge det sammen med lint-staged til at automatisere linting af kode og formatering, før vi committer koden.

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

Dette vil skabe en .husky mappe med en forudgående forpligtelse fil. Næste skridt er at opdatere pakke.json fil til opsætning lint-iscenesat og fortælle den, at den skal formatere alle ændrede filer i den aktuelle commit:

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

Sidste skridt er at opdatere forudgående forpligtelse fil for at konfigurere vores hook til at køre Fnuller på alle apps og formater de ændrede filer med kommandoen lint-iscenesat kommando:

!/usr/bin/env sh

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

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

Lad os lave lidt refaktorering af vores app for at se, hvordan alt dette fungerer. Vi vil oprette en VideoPlayer.jsx-komponent og bruge den 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 = 'Hej 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="Grapefrugtskive oven på en bunke af andre skiver"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nu, hvor vi er tilfredse med vores kode, kan vi overføre vores ændringer og se, hvordan det går.

Fejl igen, denne gang er det på grund af manglende validering af rekvisitter, og som du kan se, var vores commit ikke vellykket. Lad os løse dette ved først at installere PropTypes npm i prop-types og opdatering af Videoafspiller 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,
};

Efter at have rettet disse fejl var vores commit vellykket efter at have kørt linting- og kodeformateringskommandoerne. Som du kan se, har vi med Husky grundlæggende automatiseret linting og formatering med denne pre-commit hook, og det vil undgå uønsket kode i vores kodebase og løse problemer som inkompatibilitet mellem editorer og at glemme at køre disse kommandoer.

Sammenfatning

ESLint, Smukkere og Husky er gode værktøjer, der hjælper os med at vedligeholde vores kode. Tilsammen giver de os en god udvikleroplevelse og gør det lettere at vedligeholde vores kode.

Vi har talt om linting og formatering i denne artikel, men de tilgængelige værktøjer og muligheder er meget bredere, du kan opsætte nogle tests til at køre på en pre-commit hook, eller hvis du bruger Typescript, kan du tilføje en typekontrolkommando med Husky for at springe enhver utypet kode over i din app.

Læs mere om det:

Fordele og ulemper ved Vue

Sådan dræber du et projekt med dårlig kodningspraksis

React: Tips og tricks