Nástroje Javascript v akci

Je úžasné vidět, kde Javascript je v dnešní době a jak moc se od té doby vyvinula.ES2015, dny var a $(.submitBtn) jsou daleko za nás. Protože javascript stále
vyvíjí, nástroje (formátovač, linter, bundler) kolem něj se stále zlepšují, v tomto článku se podíváme, jak ESLint (linter), Hezčí (formátovač) a Husky (háčky Git) mohou zlepšit zkušenosti vývojářů a mít velký vliv na vaši aplikaci. Pro účely tohoto článku budeme používat tzv. React aplikace, ale mějte na paměti, že tyto nástroje lze použít s jakoukoli aplikací Javascript/Node. Začneme tím, že vygenerujeme React projekt pomocí vite pomocí těchto kroků:

npm create vite@latest
Název projektu: js-tools
Vyberte framework: react
Vyberte variantu: react
cd js-tools
npm install

ESLint pro kvalitu kódu

ESLint je nástroj, který vám pomůže najít a opravit problémy ve vašem zařízení JavaScript. kód. Chcete-li ji přidat do našeho
aplikace budeme postupovat podle následujících kroků:

cd js-tools
npm init @eslint/config
# budeme muset odpovědět na tyto otázky, abychom inicializovali konfiguraci
Jak chcete používat ESLint? Pro kontrolu syntaxe a vyhledávání problémů
Jaký typ modulů váš projekt používá? JavaScript moduly (import/export)
Jaký framework váš projekt používá? React
Používá váš projekt TypeScript? Ne
Kde běží váš kód? Prohlížeč
V jakém formátu má být váš konfigurační soubor? Javascript
Chcete je nainstalovat nyní? Ano
Kterého správce balíčků chcete použít? npm
# budeme instalovat další pluginy
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Tím se vytvoří .eslintrc.cjs soubor obsahující náš ESLint v kořenovém adresáři naší aplikace.
aktualizovat konfigurační soubor s nainstalovanými zásuvnými moduly a přidat položku pravidlo:

const error = 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: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    "no-unused-vars": error,
  },
  settings: {
    react: {
      verze: 'detect',
    },
  },
  ignorePatterns: [node_modules', '.eslintrc.cjs', 'dist'],
};

Používáme doporučená nastavení pro jednotlivé zásuvné moduly a provedli jsme. no-unused-vars vyhodit chybu, je dalším krokem přidání příkazu lint příkaz k našemu package.json takto:

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

Nyní, když naše Nastavení ESLint je připravena, aktualizujeme naši aplikaci, abychom provedli testování a zjistili.
jak to funguje. Nejprve je třeba aktualizovat App.jsx soubor uvnitř src Tato komponenta obsahuje obrázek, základní přehrávač videa a tlačítko, které přepíná přehrávač videa.
stavy přehrávání/pauzy po kliknutí:

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

exportovat výchozí funkci () {
  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 } z 'react';

exportovat výchozí funkci () {
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>
);
}

Zkusme se podívat, co běží lint příkaz bude informovat o našich App.jsx kód:

Máme 4 chyby skvělé nebo ne tak skvělé bych měl říct, jsme právě zachytili více typů chyb některé se týkají React, některé a11y, a jeden je kvůli pravidlu, které jsme přidali zakázat nepoužívané proměnné. Na ESLintu je skvělé, že chyby zachytí za vás a dá nám návod na řešení a všechna pravidla jsou velmi dobře zdokumentována. Abychom tedy mohli náš kód opravit, budeme muset:

- Pojmenujte naši komponentu

- Použijte proměnnou `heading` nebo ji prostě vymažte, pokud je zbytečná.

- Přidání značky `track` pro titulky v přehrávači videa

- Přidání atributu `alt` se smysluplným textem do prvku image

Po použití těchto oprav při spuštění příkazu `lint` neobdržíme žádné chyby, náš opravený kód je následující:

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

export výchozí funkce 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 (

{head}

<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="Plátek grapefruitu na hromadě dalších plátků"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Je trochu nepříjemné, že musíte používat tlačítko lint před každou revizí a někdo by na to mohl zapomenout, mohlo by být užitečné nastavit háček git hook, který by tuto úlohu automatizoval a vyřešil tento problém, a právě o tom budeme mluvit v článku. Husky sekce.

Hezčí formátování kódu

Hezčí je názorově orientovaný formátovač kódu, který podporuje mnoho jazyků a integruje se s mnoha editory kódu. Přidejme do naší aplikace nástroj Prettier:

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

V kořenovém adresáři naší aplikace budeme muset vytvořit dva soubory a .prettierignore ignorovat soubory nebo složky, které nechceme formátovat:

node_modules/
dist/
public/

A .prettierrc.json který bude obsahovat náš hezčí konfigurák:

{
"arrowParens": "vždy",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "always": "vždy",
"quoteProps": "podle potřeby",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all": "all",
"useTabs": true
}

Hezčí konfigurace je přizpůsobitelná, můžete si hrát s hezčím hřištěm a najít nastavení, které vám nejvíce vyhovuje. Další krok k tomu, aby prettier dobře fungoval s ESLint je nainstalovat další zásuvný modul ESLint:

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

Budeme také muset aktualizovat .eslintrc.cjs přidáním hezčí na rozšiřuje pole, musíme se ujistit, že je umístíme do pole poslední pozice pro přepsání ostatních konfigurací:

const error = 2;

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

Spuštění programu Prettier je snadné a přímočaré, jedním ze způsobů je spuštění příkazu npx prettier --write . který zformátuje celý kód aplikace, druhým způsobem je použití z editoru, čímž získáte z Prettieru maximum, a to buď pomocí klávesové zkratky, nebo automaticky při každém uložení souboru. Když se vám při kódování řádek prodlouží natolik, že se nevejde na obrazovku, stačí stisknout klávesu a sledovat, jak se zázračně zabalí do více řádků! Nebo když vložíte nějaký kód a odsazení se rozsype, nechte Prettier, aby to opravil za vás, aniž byste museli opustit editor.

Ale co když některý z vývojářů používá editor, který nepodporuje Prettier, a zapomene použít příkaz. hezčí příkaz, existuje způsob, jak tento problém vyřešit, a to je předmětem tohoto článku. Husky níže uvedené části.

Husky pro háčky Git

Husky vám pomůže nastavit háčky gitu, které budou při revizi nebo odeslání kódu lintovat zprávy o revizi, spouštět testy, lintovat kód atd... Budeme jej používat spolu s funkcí lint-staged k automatizaci lintování a formátování kódu před jeho odevzdáním.

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

Tím se vytvoří .husky složku s pre-commit soubor. Dalším krokem je aktualizace package.json soubor pro nastavení Řadové stupňování a řekněte mu, aby zformátoval všechny změněné soubory v aktuální revizi:

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

Posledním krokem je aktualizace pre-commit nastavit náš háček pro spuštění příkazu lint na všech aplikacích a naformátujte změněné soubory pomocí příkazu Řadové stupňování příkaz:

!/usr/bin/env sh

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

npm run lint
npx lint-staged
```

Provedeme v naší aplikaci refaktorizaci, abychom viděli, jak to všechno funguje, vytvoříme komponentu VideoPlayer.jsx a použijeme ji v souboru App.jsx:

```javascript
import { useEffect, useRef } z '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 } z 'react';
import VideoPlayer z './VideoPlayer';

exportovat výchozí funkci App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

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

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

  <div>
    <img
      alt="Plátek grapefruitu na hromadě dalších plátků"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nyní, když jsme s naším kódem spokojeni, odevzdejme změny a podívejme se, jak to jde.

Chyby i tentokrát křičí kvůli chybějící validaci rekvizit a jak vidíte, naše revize nebyla úspěšná. Napravme to tak, že nejprve nainstalujeme PropTypes npm i prop-types a aktualizace VideoPlayer součást:

import { useEffect, useRef } z 'react';
import PropTypes z '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: isRequired,
videoSrc: isRequired: PropTypes.string.isRequired,
trackSrc: isRequired: PropTypes.string.isRequired,
};

Po opravě těchto chyb byla naše revize úspěšná po spuštění příkazů linting a formátování kódu. Jak vidíte, pomocí Huskyho jsme v podstatě automatizovali lintování a formátování pomocí tohoto háčku před odevzdáním, čímž jsme se vyhnuli nežádoucímu kódu v naší kódové základně a vyřešili problémy, jako je nekompatibilita editorů a zapomenutí spuštění těchto příkazů.

Souhrn

ESLint, Hezčí a Husky jsou skvělé nástroje, které nám pomáhají udržovat náš kód. Společně nám poskytují skvělý vývojářský zážitek a usnadňují údržbu našeho kódu.

V tomto článku jsme hovořili o lintování a formátování, ale dostupné nástroje a možnosti jsou mnohem širší, můžete nastavit některé testy, které se spustí na háček před odesláním, nebo pokud používáte Typescript, přidat příkaz pro kontrolu typu pomocí příkazu Husky abyste mohli v aplikaci přeskočit netypovaný kód.

Přečtěte si více:

Výhody a nevýhody modelu Vue

Jak zničit projekt špatnými kódovacími postupy

React: Tipy a triky