Javascript-verktyg i aktion

Det är fantastiskt att se var Javascript är idag och hur mycket det har utvecklats sedanES2015, dagarna av var och $(.submitBtn) är långt borta bakom oss. Eftersom javascript håller
utvecklas, verktygen (formatter, linter, bundler) runt omkring blir bara bättre och bättre, och i den här artikeln ska vi se hur ESLint (linter), Snyggare (formaterare) och Husky (Git hooks) kan förbättra din utvecklarupplevelse och ha stor inverkan på din applikation. I den här artikeln kommer vi att använda en React app, men kom ihåg att dessa verktyg kan användas med alla Javascript/Node-applikationer. Vi börjar med att generera en React projekt med hjälp av vite med dessa steg:

npm skapa vite@latest
Projektnamn: js-tools
Välj ett ramverk: react
Välj en variant: react
cd js-tools
npm installera

ESLint för kodkvalitet

ESLint är ett verktyg som hjälper dig att hitta och åtgärda problem i din JavaScript kod. För att lägga till det i vår
app följer vi dessa steg:

cd js-verktyg
npm init @eslint/konfig
# måste vi svara på dessa frågor för att initiera konfigurationen
Hur skulle du vilja använda ESLint? För att kontrollera syntax och hitta problem
Vilken typ av moduler använder ditt projekt? JavaScript moduler (import/export)
Vilket ramverk använder ditt projekt? React
Använder ditt projekt TypeScript? Nej, inte alls
Var körs din kod? Webbläsare
Vilket format vill du att din konfigurationsfil ska vara i? Javascript
Vill du installera dem nu? Ja, det vill jag
Vilken pakethanterare vill du använda? npm
# vi kommer att installera ytterligare plugins
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Detta kommer att skapa en .eslintrc.cjs fil som innehåller vår ESLint config i roten av vår app, låt oss
uppdatera konfigurationsfilen med våra installerade plugins och lägga till en Regel:

konst fel = 2;

modul.export = {
  env: {
    webbläsare: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    "plugin:react/recommended",
    "plugin:react/jsx-runtime", "plugin:react-hooks/recommended
    "plugin:react-hooks/recommended",
    'plugin:jsx-a11y/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "senaste",
    sourceType: 'module',
  },
  plugins: ['react'],
  regler: {
    'no-unused-vars': fel,
  },
  inställningar: {
    react: {
      version: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Vi använder de rekommenderade inställningarna för varje plugin och har gjort inga oanvända var ett fel, är ett ytterligare steg att lägga till en ludd kommando till vår paket.json fil enligt följande:

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

Nu när vår ESLint-installation är klar kommer vi att uppdatera vår app för att göra några tester och se
hur det fungerar. Det första du ska göra är att uppdatera App.jsx filen inuti src innehåller den här komponenten en bild, en enkel videospelare och en knapp som växlar videospelaren
play/pause-tillstånd när du klickar på den:

import { useEffect, useRef, useState } från 'react';

export standardfunktion () {
  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 } från 'react';

export standardfunktion () {
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>
);
}

Låt oss försöka och se vad som kör ludd kommando kommer att rapportera om vår App.jsx kod:

Vi har 4 fel bra eller inte så bra borde jag säga, vi har just fångat flera typer av fel några är relaterade till React, några till a11y, och en beror på den regel som vi har lagt till för att förbjuda oanvända variabler. Det som är bra med ESLint är att det fångar fel åt dig och ger oss en indikation på lösningen och alla regler är mycket väl dokumenterade. Så för att fixa vår kod behöver vi:

- Ge ett namn åt vår komponent

- Använd variabeln `heading` eller ta bara bort den om den är värdelös

- Lägg till en `track`-tagg för bildtexter i videospelaren

- Lägg till ett `alt`-attribut med meningsfull text i bildelementet

Efter att ha tillämpat dessa korrigeringar och kört kommandot `lint` får vi inga fel, vår korrigerade kod är som följer:

  import { useEffect, useRef, useState } från 'react';

export standardfunktion 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 (

{rubrik}

<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="Grapefruktskiva ovanpå en hög med andra skivor"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Det är lite irriterande att behöva använda ludd kommandot före varje commit och man kan glömma att göra det, att sätta upp en git-krok kan vara till hjälp för att automatisera denna uppgift och lösa detta problem och det är vad vi kommer att prata om i Husky avsnitt.

Snyggare för kodformatering

Snyggare är en meningsfull kodformaterare som stöder många språk och integreras med många kodredigerare. Låt oss lägga till prettier i vår app:

npm installera --save-dev --save-exakt prettier

Vi måste skapa två filer i roten av vår app: en .prettierignore filen för att ignorera filer eller mappar som vi inte vill formatera:

node_moduler/
dist/
allmän/

Och en .prettierrc.json fil som kommer att innehålla vår snyggare konfiguration:

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

Prettier config är anpassningsbar, du kan leka med prettier playground för att hitta de inställningar som passar dig bäst. Ett ytterligare steg för att få prettier att fungera bra med ESLint är att installera ytterligare ett ESLint-tillägg:

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

Vi behöver också uppdatera .eslintrc.cjs fil genom att lägga till sötare till förlänger måste vi se till att placera den i arrayen sista position för att åsidosätta andra konfigurationer:

konst fel = 2;

module.exports = {
...,
utökar: [
'eslint:recommended',
'plugin:react/recommended',
"plugin:react/jsx-runtime", "plugin:react-hooks/recommended
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
'snyggare',
],
...

Att köra prettier är enkelt och okomplicerat, ett sätt är att köra npx snyggare --write . kommandot som formaterar all din appkod, ett annat sätt är att använda det från din editor, detta kommer att få ut det mesta av Prettier, antingen via en tangentbordsgenväg eller automatiskt när du sparar en fil. När en rad har blivit så lång under kodningen att den inte får plats på skärmen, tryck bara på en tangent och se hur den magiskt lindas in i flera rader! Eller när du klistrar in lite kod och indraget blir helt fel, låt Prettier fixa det åt dig utan att lämna din editor.

Men ändå, tänk om en av utvecklarna använder en editor som inte stöder prettier och glömmer att använda sötare finns det ett sätt att lösa detta problem och det är ämnet för Husky avsnittet nedan.

Husky för Git-krokar

Husky hjälper dig att ställa in git-krokar för att loda dina åtagandemeddelanden, köra tester, loda kod etc ... när du begår eller skjuter. Vi kommer att använda det tillsammans med lint-staged för att automatisera kodlinting och formatering innan vi begår koden.

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

Detta kommer att skapa en .husky mapp med en för-kommando fil. Nästa steg är att uppdatera paket.json fil för att konfigurera lint-staged kommandot och be det formatera alla ändrade filer i den aktuella överfö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"
},
...
}

Sista steget är att uppdatera för-kommando filen för att konfigurera vår krok för att köra ludd på alla app- och formatändringsfiler med kommandot lint-staged kommando:

!/usr/bin/env sh

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

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

Låt oss göra några refactoring till vår app för att se hur allt detta fungerar, vi kommer att skapa en VideoPlayer.jsx komponent och använda den i App.jsx:

```javascript
import { useEffect, useRef } från 'react';

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

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

returnera (

);
}

importera { useState } från 'react';
import VideoPlayer från './VideoPlayer';

export standardfunktion App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = "Hej ESLint + Prettier + Husky";

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

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

  <div>
    <img
      alt="Grapefruktskiva ovanpå en hög med andra skivor"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nu när vi är nöjda med vår kod, låt oss överföra våra ändringar och se hur det går.

Fel igen, den här gången är det på grund av saknad props-validering och som du kan se var vår commit inte framgångsrik. Låt oss fixa detta genom att först installera PropTypes npm i prop-types och uppdatering av Videospelare komponent:

importera { useEffect, useRef } från 'react';
import PropTypes från 'prop-types';

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

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

returnera (

);
}

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

Efter att ha åtgärdat dessa fel var vår commit framgångsrik efter att ha kört linting- och kodformateringskommandona. Som du kan se med Husky automatiserade vi i princip linting och formatering med denna pre-commit-krok och detta kommer att undvika oönskad kod i vår kodbas och lösa problem som inkompatibilitet med redigerare och att glömma att köra dessa kommandon.

Sammanfattning

ESLint, Snyggare och Husky är bra verktyg som hjälper oss att underhålla vår kod. Tillsammans ger de oss en bra utvecklarupplevelse och gör det enklare att underhålla vår kod.

Vi har pratat om linting och formatering i den här artikeln, men de tillgängliga verktygen och möjligheterna är mycket större. Du kan ställa in några tester så att de körs på en pre-commit hook eller om du använder Typescript kan du lägga till ett typkontrollkommando med Husky för att hoppa över otypad kod i din app.

Läs mer om detta:

För- och nackdelar med Vue

Hur man dödar ett projekt med dålig kodningspraxis

React: Tips och tricks