Strumenti Javascript in azione

È fantastico vedere dove Javascript è al giorno d'oggi e quanto si è evoluta da quandoES2015, i giorni di var e $(.submitBtn) sono molto lontani da noi. Mentre javascript continua a
in evoluzione, gli strumenti (formattatore, linter, bundler) che lo circondano continuano a migliorare, in questo articolo vedremo come ESLint (linter), Più bella (formattatore) e Husky (Git hooks) possono migliorare l'esperienza dello sviluppatore e avere un grande impatto sull'applicazione. Per il bene di questo articolo, utilizzeremo un React ma ricordate che questi strumenti possono essere utilizzati con qualsiasi applicazione Javascript/Node. Inizieremo con la generazione di un React progetto utilizzando vite con questi passaggi:

npm create vite@latest
Nome del progetto: js-tools
Selezionare un framework: react
Selezionare una variante: react
cd js-tools
npm installare

ESLint per la qualità del codice

ESLint è uno strumento che aiuta a trovare e risolvere i problemi dell'JavaScript codice. Per aggiungerlo al nostro
seguiremo questi passaggi:

cd js-tools
npm init @eslint/config
# dovremo rispondere a queste domande per inizializzare la configurazione
Come si desidera utilizzare ESLint? Per controllare la sintassi e trovare problemi
Che tipo di moduli utilizza il progetto? Moduli JavaScript (importazione/esportazione)
Quale framework utilizza il progetto? React
Il progetto utilizza l'TypeScript? No
Dove viene eseguito il codice? Browser
In che formato si desidera che il file di configurazione sia disponibile? Javascript
Volete installarli ora? Sì
Quale gestore di pacchetti si desidera utilizzare? npm
# installeremo i plugin aggiuntivi
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

In questo modo si creerà un .eslintrc.cjs contenente il nostro file ESLint nella radice della nostra applicazione, facciamo
aggiorniamo il file di configurazione con i plugin installati e aggiungiamo un'opzione regola:

errore costante = 2;

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  estende: [
    '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',
  },
  plugin: ['react'],
  regole: {
    no-unused-vars': error,
  },
  impostazioni: {
    reagire: {
      version: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Stiamo utilizzando le impostazioni consigliate per ogni plugin e abbiamo fatto il senza vettori inutilizzati lanciare un errore, un ulteriore passo è quello di aggiungere un'opzione lanugine al nostro comando pacchetto.json come segue:

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

Ora che il nostro Configurazione di ESLint è pronto, aggiorneremo la nostra applicazione per eseguire alcuni test e vedere
come funziona. La prima cosa da fare è aggiornare il file App.jsx all'interno del file src Questo componente contiene un'immagine, un lettore video di base e un pulsante che attiva il lettore video.
stati di riproduzione/pausa quando si fa clic:

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

esportare la funzione predefinita () {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const heading = 'Ciao 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 } da 'react';

esportare la funzione predefinita () {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Ciao 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>
);
}

Proviamo a vedere cosa comporta l'esecuzione del lanugine Il comando riporta i dati relativi al nostro App.jsx codice:

Abbiamo 4 errori, grandi o meno grandi che dir si voglia, abbiamo appena colto diversi tipi di errori, alcuni legati a React, altri a11y e uno dovuto alla regola che abbiamo aggiunto per vietare le variabili inutilizzate. Il bello di ESLint è che cattura gli errori e ci dà un'indicazione sulla soluzione e tutte le regole sono ben documentate. Quindi, per correggere il nostro codice dovremo:

- Dare un nome al nostro componente

- Utilizzare la variabile `heading` o eliminarla se è inutile.

- Aggiungere un tag `track` per le didascalie nel lettore video

- Aggiungere un attributo `alt` con un testo significativo all'elemento immagine

Dopo aver applicato queste correzioni eseguendo il comando `lint`, non riceviamo errori, il nostro codice corretto è il seguente:

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

Esportare la funzione predefinita App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Ciao ESLint + Prettier + Husky';

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

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

return (

{heading}

<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="Fetta di pompelmo in cima a un mucchio di altre fette"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

È un po' fastidioso dover usare il tasto lanugine prima di ogni commit e ci si potrebbe dimenticare di farlo; l'impostazione di un git hook potrebbe essere utile per automatizzare questo compito e risolvere questo problema ed è di questo che parleremo nel corso di Husky sezione.

Più elegante per la formattazione del codice

Più bella è un formattatore di codice che supporta molti linguaggi e si integra con molti editor di codice. Aggiungiamo prettier alla nostra applicazione:

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

Avremo bisogno di creare due file nella radice della nostra applicazione, un file di tipo .prettierignore per ignorare i file o le cartelle che non si desidera formattare:

node_modules/
dist/
pubblico/

E un .prettierrc.json che conterrà la nostra configurazione più bella:

{
"arrowParens": "sempre",
"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
}

La configurazione di prettier è personalizzabile, si può giocare con l'area di gioco di prettier per trovare le impostazioni più adatte alle proprie esigenze. Un passo aggiuntivo per far funzionare bene prettier con ESLint è installare un plugin ESLint aggiuntivo:

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

Sarà inoltre necessario aggiornare il file .eslintrc.cjs aggiungendo il file più bello alla si estende dobbiamo assicurarci di inserirlo nell'array ultimo per sovrascrivere altre configurazioni:

errore costante = 2;

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

L'esecuzione di prettier è semplice e diretta, un modo è quello di eseguire il metodo npx prettier --write . che formatterà tutto il codice dell'applicazione; un secondo modo è quello di usarlo dall'editor, in modo da ottenere il massimo da Prettier, tramite una scorciatoia da tastiera o automaticamente ogni volta che si salva un file. Quando durante la codifica una riga è diventata così lunga da non riuscire a stare sullo schermo, basta premere un tasto per vederla magicamente racchiusa in più righe! Oppure, quando incollate del codice e l'indentazione è tutta sbagliata, lasciate che Prettier la sistemi per voi senza lasciare il vostro editor.

Ma comunque, cosa succede se uno degli sviluppatori usa un editor che non supporta prettier e si dimentica di usare il parametro più bello c'è un modo per risolvere questo problema ed è l'argomento di questo articolo. Husky sezione sottostante.

Husky per i ganci Git

Husky aiuta a configurare gli hook di git per lincare i messaggi di commit, eseguire test, lincare il codice, ecc. quando si esegue il commit o il push. Lo useremo insieme a lint-staged per automatizzare il linting e la formattazione del codice prima del commit.

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

In questo modo si creerà un .husky con una cartella pre-commit file. Il passo successivo è aggiornare il file pacchetto.json per impostare in scena e dirgli di formattare qualsiasi file modificato nel commit corrente:

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

L'ultimo passo consiste nell'aggiornare il file pre-commit per impostare il nostro hook per eseguire il file lanugine su tutte le applicazioni e formattare i file modificati con il comando in scena comando:

!/usr/bin/env sh

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

npm eseguire lint
npx lint-staged
```

Facciamo un po' di refactoring alla nostra applicazione per vedere come funziona tutto questo: creeremo un componente VideoPlayer.jsx e lo useremo in App.jsx:

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

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

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

return (

);
}

importare { useState } da 'react';
importare VideoPlayer da './VideoPlayer';

esportare la funzione predefinita App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Ciao ESLint + Prettier + Husky';

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

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

  <div>
    <img
      alt="Fetta di pompelmo in cima a un mucchio di altre fette"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Ora che siamo soddisfatti del nostro codice, facciamo il commit delle nostre modifiche e vediamo come va.

Anche questa volta l'errore è dovuto alla mancanza della validazione dei props e come si può vedere il nostro commit non è andato a buon fine. Risolviamo questo problema, installando prima PropTypes npm i prop-type e l'aggiornamento del VideoPlayer componente:

importare { useEffect, useRef } da 'react';
import PropTypes da '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,
};

Dopo aver corretto questi errori, il nostro commit è andato a buon fine dopo aver eseguito i comandi di linting e formattazione del codice. Come si può vedere, con Husky abbiamo automatizzato il linting e la formattazione con questo hook pre-commit, che evita la presenza di codice indesiderato nella nostra base di codice e risolve problemi come l'incompatibilità degli editor e la dimenticanza dell'esecuzione di questi comandi.

Sintesi

ESLint, Più bella e Husky sono ottimi strumenti che ci aiutano a mantenere il nostro codice. Combinati insieme, ci offrono un'ottima esperienza di sviluppo e facilitano la manutenzione del codice.

In questo articolo abbiamo parlato di linting e formattazione, ma gli strumenti disponibili e le possibilità sono molto più ampie: si potrebbero impostare alcuni test da eseguire su un hook pre-commit o, se si usa Typescript, aggiungere un comando di controllo del tipo con Husky per saltare qualsiasi codice non tipizzato nella vostra applicazione.

Per saperne di più:

Pro e contro dell'Vue

Come uccidere un progetto con cattive pratiche di codifica

React: suggerimenti e trucchi