Javascript-Tools in Aktion

Es ist großartig zu sehen, wo Javascript heute ist und wie sehr sie sich seit dem letzten Jahr weiterentwickelt hat.ES2015, die Tage der var und $(.submitBtn) liegen weit hinter uns. Da Javascript weiterhin
entwickeln, werden die Werkzeuge (Formatter, Linter, Bundler) immer besser, und wir werden in diesem Artikel sehen, wie ESLint (Linter), Hübscher (Formatierer) und Husky (Git-Hooks) können die Erfahrung der Entwickler verbessern und einen großen Einfluss auf Ihre Anwendung haben. Für diesen Artikel verwenden wir eine React Anwendung, aber bedenken Sie, dass diese Tools mit jeder Javascript/Node-Anwendung verwendet werden können. Wir beginnen mit der Erzeugung eines React Projekt mit vite mit diesen Schritten:

npm erstellen vite@latest
Projektname: js-tools
Wählen Sie ein Framework: react
Wählen Sie eine Variante: react
cd js-tools
npm installieren

ESLint für Code-Qualität

ESLint ist ein Werkzeug, das Ihnen hilft, Probleme in Ihrem JavaScript zu finden und zu beheben Code. Um es zu unserem
App werden wir diese Schritte befolgen:

cd js-tools
npm init @eslint/config
# wir müssen diese Fragen beantworten, um die Konfiguration zu initialisieren
Wie möchten Sie ESLint verwenden? Um die Syntax zu überprüfen und Probleme zu finden
Welche Art von Modulen verwendet Ihr Projekt? JavaScript Module (Import/Export)
Welches Framework verwendet Ihr Projekt? React
Verwendet Ihr Projekt TypeScript? Nein
Wo wird Ihr Code ausgeführt? Browser
In welchem Format soll Ihre Konfigurationsdatei vorliegen? Javascript
Möchten Sie sie jetzt installieren? Ja
Welchen Paketmanager möchten Sie verwenden? npm
# werden wir zusätzliche Plugins installieren
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Dadurch wird eine .eslintrc.cjs Datei, die unsere ESLint config im Stammverzeichnis unserer Anwendung, lassen Sie uns
aktualisieren Sie die Konfigurationsdatei mit unseren installierten Plugins und fügen Sie eine Regel:

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: 'neueste',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'no-unused-vars': error,
  },
  Einstellungen: {
    react: {
      Version: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Wir verwenden die empfohlenen Einstellungen für jedes Plugin und haben die nicht-unbenutzte-vars einen Fehler auslösen, ist ein zusätzlicher Schritt das Hinzufügen einer Fussel Befehl an unser paket.json Datei wie folgt:

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

Nun, da unser ESLint-Einrichtung fertig ist, werden wir unsere Anwendung aktualisieren, um einige Tests durchzuführen und zu sehen
wie es funktioniert. Als Erstes müssen Sie die App.jsx Datei innerhalb der src Diese Komponente enthält ein Bild, einen einfachen Videoplayer und eine Schaltfläche, mit der der Videoplayer umgeschaltet werden kann.
Abspiel-/Pausenstatus beim Anklicken:

importiere { useEffect, useRef, useState } von 'react';

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

importiere { useEffect, useRef, useState } von 'react';

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

Versuchen wir mal zu sehen, was mit dem Fussel Befehl wird über unsere App.jsx Code:

Wir haben 4 Fehler groß oder nicht so groß sollte ich sagen, wir haben gerade mehrere Arten von Fehlern gefangen einige sind im Zusammenhang mit React, einige zu a11y, und einer ist aufgrund der Regel, die wir hinzugefügt haben, um unbenutzte Variablen zu verbieten. Das Tolle an ESLint ist, dass es Fehler für uns aufspürt und uns einen Hinweis auf die Lösung gibt, und alle Regeln sind sehr gut dokumentiert. Um unseren Code zu korrigieren, müssen wir das also tun:

- Unserer Komponente einen Namen geben

- Verwenden Sie die Variable `heading` oder löschen Sie sie einfach, wenn sie nutzlos ist

- Hinzufügen eines "Track"-Tags für Untertitel im Videoplayer

- Hinzufügen eines Attributs "alt" mit aussagekräftigem Text zum Bildelement

Nach der Anwendung dieser Korrekturen und dem Ausführen des `lint`-Befehls erhalten wir keine Fehler, unser korrigierter Code ist wie folgt:

  importiere { useEffect, useRef, useState } von 'react';

export default function App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hallo 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="Grapefruit-Scheibe auf einem Stapel von anderen Scheiben"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Es ist ein wenig ärgerlich, dass man die Fussel Befehl vor jeder Übergabe und man könnte dies vergessen. Die Einrichtung eines Git-Hooks könnte hilfreich sein, um diese Aufgabe zu automatisieren und dieses Problem zu lösen, und genau darüber werden wir in der Husky Abschnitt.

Hübscher für Code-Formatierung

Hübscher ist ein meinungsstarker Code-Formatierer, der viele Sprachen unterstützt und sich in viele Code-Editoren integrieren lässt. Fügen wir prettier zu unserer App hinzu:

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

Wir müssen zwei Dateien im Stammverzeichnis unserer Anwendung erstellen a .prettierignore um Dateien oder Ordner, die nicht formatiert werden sollen, zu ignorieren:

node_modules/
dist/
public/

Und eine .prettierrc.json Datei, die unsere schönere Konfiguration enthalten wird:

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

Die Prettier-Konfiguration ist anpassbar, Sie können mit der Prettier-Spielwiese spielen, um die Einstellungen zu finden, die Ihnen am meisten zusagen. Ein zusätzlicher Schritt, damit Prettier gut funktioniert mit ESLint ist es, ein zusätzliches ESLint-Plugin zu installieren:

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

Wir müssen auch die .eslintrc.cjs Datei durch Hinzufügen von hübscher zum erweitert Array, müssen wir sicherstellen, dass wir es in das zuletzt Position, um andere Konfigurationen außer Kraft zu setzen:

const error = 2;

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

Das Ausführen von prettier ist einfach und unkompliziert, eine Möglichkeit ist die Ausführung des npx prettier --write . Befehl, der den gesamten Code Ihrer Anwendung formatiert. Eine zweite Möglichkeit ist die Verwendung in Ihrem Editor, um Prettier optimal zu nutzen, entweder über eine Tastenkombination oder automatisch, wenn Sie eine Datei speichern. Wenn eine Zeile beim Codieren so lang geworden ist, dass sie nicht mehr auf den Bildschirm passt, drücken Sie einfach eine Taste und sehen Sie zu, wie sie auf magische Weise in mehrere Zeilen aufgeteilt wird! Oder wenn Sie Code einfügen und die Einrückung durcheinander gerät, lassen Sie Prettier das für Sie korrigieren, ohne Ihren Editor zu verlassen.

Aber was ist, wenn einer der Entwickler einen Editor verwendet, der Prettier nicht unterstützt und vergisst, die hübscher Befehls gibt es eine Möglichkeit, dieses Problem zu beheben, und das ist das Thema des Husky Abschnitt unten.

Husky für Git-Haken

Husky hilft Ihnen, Git-Hooks einzurichten, um Ihre Commit-Nachrichten zu linsen, Tests auszuführen, Code zu linsen usw., wenn Sie committen oder pushen. Wir werden es zusammen mit lint-staged verwenden, um das Linting und die Formatierung des Codes zu automatisieren, bevor wir den Code committen.

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

Dadurch wird eine .husky Ordner mit einer Vorabüberweisung Datei. Der nächste Schritt ist die Aktualisierung der paket.json Datei zur Einrichtung stromlinienförmig und sagen Sie ihm, dass er jede geänderte Datei in der aktuellen Übertragung formatieren soll:

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

Der letzte Schritt ist die Aktualisierung der Vorabüberweisung Datei, um unseren Hook zur Ausführung der Fussel für alle Anwendungen und formatieren Sie die geänderten Dateien mit dem Befehl stromlinienförmig Befehl:

!/usr/bin/env sh

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

npm lint ausführen
npx lint-staged
```

Um zu sehen, wie das alles funktioniert, werden wir eine Komponente VideoPlayer.jsx erstellen und sie in App.jsx verwenden:

```javascript
importiere { useEffect, useRef } von 'react';

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

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

zurück (

);
}

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

export default function App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hallo 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="Grapefruit-Scheibe auf einem Stapel von anderen Scheiben"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Da wir nun mit unserem Code zufrieden sind, können wir unsere Änderungen übertragen und sehen, wie es läuft.

Fehler wieder dieses Mal ist es schreien wegen der fehlenden props Validierung und wie Sie sehen können unsere Übertragung war nicht erfolgreich. Beheben wir dies, indem wir zuerst PropTypes installieren npm i prop-types und die Aktualisierung der VideoPlayer Komponente:

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

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

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

zurück (

);
}

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

Nachdem diese Fehler behoben waren, war unser Commit erfolgreich, nachdem die Befehle für das Linting und die Codeformatierung ausgeführt wurden. Wie Sie sehen, haben wir mit Husky das Linting und die Formatierung mit diesem Pre-Commit-Hook im Wesentlichen automatisiert. Dadurch wird unerwünschter Code in unserer Codebasis vermieden und Probleme wie Inkompatibilitäten mit Editoren und das Vergessen der Ausführung dieser Befehle werden gelöst.

Zusammenfassung

ESLint, Hübscher und Husky sind großartige Werkzeuge, die uns bei der Pflege unseres Codes helfen. Zusammengenommen bieten sie uns ein großartiges Entwicklererlebnis und erleichtern die Pflege unseres Codes.

Wir haben in diesem Artikel über Linting und Formatierung gesprochen, aber die verfügbaren Werkzeuge und Möglichkeiten sind viel breiter Sie könnten einige Tests einrichten, die an einem Pre-Commit-Hook ausgeführt werden, oder wenn Sie Typescript verwenden, einen Befehl zur Typüberprüfung mit Husky um jeglichen nicht typisierten Code in Ihrer Anwendung zu überspringen.

Lesen Sie mehr:

Vor- und Nachteile von Vue

Wie man ein Projekt mit schlechten Kodierungspraktiken zerstört

React: Tipps und Tricks