Narzędzia Javascript w akcji

Wspaniale jest zobaczyć, gdzie Javascript jest obecnie i jak bardzo ewoluował od czasówES2015dni var i $(.submitBtn) są już daleko za nami. Ponieważ javascript wciąż
Ewoluując, narzędzia (formatter, linter, bundler) wokół niego stają się coraz lepsze, w tym artykule zobaczymy, jak ESLint (linter), Ładniejszy (formatyzator) i Husky (haki Git) mogą poprawić doświadczenie programisty i mieć ogromny wpływ na aplikację. Na potrzeby tego artykułu zamierzamy użyć pliku React ale należy pamiętać, że narzędzia te mogą być używane z dowolną aplikacją Javascript/Node. Zaczniemy od wygenerowania układu React projekt przy użyciu vite wykonując następujące kroki:

npm create vite@latest
Nazwa projektu: js-tools
Wybierz framework: react
Wybierz wariant: react
cd js-tools
npm install

ESLint dla jakości kodu

ESLint to narzędzie, które pomaga znaleźć i naprawić problemy w urządzeniu JavaScript kod. Aby dodać go do naszego
Będziemy postępować zgodnie z poniższymi krokami:

cd js-tools
npm init @eslint/config
# będziemy musieli odpowiedzieć na te pytania, aby zainicjować konfigurację
Jak chciałbyś używać ESLint? Do sprawdzania składni i znajdowania problemów
Jakiego typu modułów używa twój projekt? Moduły JavaScript (import/eksport)
Jakiego frameworka używa twój projekt? React
Czy twój projekt używa TypeScript? Nie
Gdzie uruchamiany jest kod? Przeglądarka
W jakim formacie ma być plik konfiguracyjny? Javascript
Czy chcesz je teraz zainstalować? Tak
Którego menedżera pakietów chcesz użyć? npm
# zamierzamy zainstalować dodatkowe wtyczki
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Spowoduje to utworzenie .eslintrc.cjs zawierający nasz plik ESLint config w katalogu głównym naszej aplikacji, zróbmy tak
zaktualizować plik konfiguracyjny o zainstalowane przez nas wtyczki i dodać plik reguła:

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: {
      version: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Używamy zalecanych ustawień dla każdej wtyczki i dokonaliśmy następujących zmian no-unused-vars rzucić błąd, dodatkowym krokiem jest dodanie pliku kłaczki polecenie do naszego package.json w następujący sposób:

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

Teraz, gdy nasz Konfiguracja ESLint jest gotowa, zamierzamy zaktualizować naszą aplikację, aby przeprowadzić testy i zobaczyć
jak to działa. Pierwszą rzeczą do zrobienia jest aktualizacja App.jsx wewnątrz pliku src Folder ten zawiera obraz, podstawowy odtwarzacz wideo i przycisk, który przełącza odtwarzacz wideo
stany odtwarzania/pauzy po kliknięciu:

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

export default function () {
  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 } from 'react';

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

Spróbujmy zobaczyć, jak działa kłaczki polecenie będzie informować o naszych App.jsx kod:

Mamy 4 błędy świetne lub nie tak świetne, powinienem powiedzieć, że właśnie złapaliśmy wiele rodzajów błędów, niektóre są związane z React, niektóre z a11y, a jeden jest spowodowany regułą, którą dodaliśmy, aby zabronić nieużywanych zmiennych. Wspaniałe w ESLint jest to, że wyłapuje on błędy i daje nam wskazówki dotyczące rozwiązania, a wszystkie reguły są bardzo dobrze udokumentowane. Aby poprawić nasz kod, będziemy musieli:

- Nadaj nazwę naszemu komponentowi

- Użyj zmiennej `heading` lub po prostu usuń ją, jeśli jest bezużyteczna

- Dodanie tagu `track` dla napisów w odtwarzaczu wideo

- Dodaj atrybut `alt` ze znaczącym tekstem do elementu obrazu

Po zastosowaniu tych poprawek, uruchamiając polecenie `lint`, nie otrzymujemy żadnych błędów, nasz poprawiony kod wygląda następująco:

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

export default function 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 (

{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="Plasterek grejpfruta na stosie innych plasterków"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Trochę irytujące jest to, że trzeba używać kłaczki przed każdym zatwierdzeniem i można o tym zapomnieć, skonfigurowanie haka git może być pomocne w zautomatyzowaniu tego zadania i rozwiązaniu tego problemu i właśnie o tym będziemy mówić w sekcji Husky sekcja.

Ładniejsze formatowanie kodu

Ładniejszy to opiniotwórczy formatator kodu, który obsługuje wiele języków i integruje się z wieloma edytorami kodu. Dodajmy prettier do naszej aplikacji:

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

Będziemy musieli utworzyć dwa pliki w katalogu głównym naszej aplikacji a .prettierignore aby ignorować pliki lub foldery, których nie chcemy formatować:

node_modules/
dist/
public/

A .prettierrc.json który będzie zawierał naszą ładniejszą konfigurację:

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

Konfiguracja Prettier jest konfigurowalna, możesz bawić się placem zabaw Prettier, aby znaleźć ustawienia, które najbardziej Ci odpowiadają. Dodatkowym krokiem, który sprawi, że Prettier będzie dobrze współpracować z ESLint jest zainstalowanie dodatkowej wtyczki ESLint:

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

Musimy również zaktualizować .eslintrc.cjs dodając ładniejszy do rozciąga się musimy upewnić się, że umieściliśmy ją w tablicy ostatni aby zastąpić inne konfiguracje:

const error = 2;

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

Uruchamianie prettier jest łatwe i proste, jednym ze sposobów jest uruchomienie npx prettier --write . komenda, która sformatuje cały kod aplikacji, drugim sposobem jest użycie go z edytora, co pozwoli uzyskać jak najwięcej z Prettier, albo za pomocą skrótu klawiaturowego, albo automatycznie za każdym razem, gdy zapisujesz plik. Gdy linia stała się tak długa podczas kodowania, że nie mieści się na ekranie, wystarczy nacisnąć klawisz i obserwować, jak magicznie zawija się w wiele linii! Lub gdy wklejasz kod, a wcięcia są zepsute, pozwól Prettier naprawić to za Ciebie bez opuszczania edytora.

Ale co, jeśli jeden z deweloperów używa edytora, który nie obsługuje ładniejszych i zapomni użyć opcji ładniejszy istnieje sposób na naprawienie tego problemu i jest to tematem tego artykułu. Husky sekcja poniżej.

Husky dla haków Git

Husky pomaga skonfigurować haki git do lintowania wiadomości commit, uruchamiania testów, lintowania kodu itp... podczas zatwierdzania lub wypychania. Będziemy go używać wraz z lint-staged, aby zautomatyzować lintowanie i formatowanie kodu przed jego zatwierdzeniem.

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

Spowoduje to utworzenie .husky folder z rozszerzeniem pre-commit plik. Następnym krokiem jest aktualizacja pliku package.json plik do konfiguracji etapowy i nakazać mu sformatowanie każdego zmienionego pliku w bieżącym zatwierdzeniu:

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

Ostatnim krokiem jest aktualizacja pre-commit aby skonfigurować nasz hak do uruchamiania kłaczki na wszystkich aplikacjach i sformatuj zmienione pliki za pomocą etapowy polecenie:

/usr/bin/env sh

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

npm run lint
npx lint-staged
```

Zróbmy trochę refaktoryzacji w naszej aplikacji, aby zobaczyć, jak to wszystko działa, utworzymy komponent VideoPlayer.jsx i użyjemy go w App.jsx:

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

export default function App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello 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="Plasterek grejpfruta na stosie innych plasterków"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Teraz, gdy jesteśmy zadowoleni z naszego kodu, zatwierdźmy nasze zmiany i zobaczmy, jak to działa.

Błędy ponownie tym razem krzyczą z powodu braku walidacji rekwizytów i jak widać nasz commit się nie powiódł. Naprawmy to, najpierw instalując PropTypes npm i prop-types i aktualizowanie VideoPlayer składnik:

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]);

return (

);
}

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

Po naprawieniu tych błędów nasz commit zakończył się sukcesem po uruchomieniu poleceń lintingu i formatowania kodu. Jak widać, dzięki Husky w zasadzie zautomatyzowaliśmy linting i formatowanie za pomocą tego haka przed zatwierdzeniem, co pozwoli uniknąć niechcianego kodu w naszej bazie kodu i rozwiązać problemy, takie jak niezgodność edytorów i zapomnienie o uruchomieniu tych poleceń.

Podsumowanie

ESLint, Ładniejszy i Husky to świetne narzędzia, które pomagają nam w utrzymaniu naszego kodu. Połączone razem zapewniają nam świetne wrażenia programistyczne i ułatwiają utrzymanie naszego kodu.

Rozmawialiśmy o lintingu i formatowaniu w tym artykule, ale dostępne narzędzia i możliwości są znacznie szersze: można skonfigurować niektóre testy do uruchamiania na haku pre-commit lub jeśli używasz Typescript, dodając polecenie sprawdzania typu za pomocą Husky aby pominąć nieopisany kod w aplikacji.

Czytaj więcej:

Plusy i minusy Vue

Jak zabić projekt złymi praktykami kodowania?

React: Porady i wskazówki