Javascript-työkalut toiminnassa

On mahtavaa nähdä, missä Javascript on nykyään ja kuinka paljon se on kehittynyt sitten sen, kunES2015, päivinä var ja $(.submitBtn) ovat kaukana takanamme. Koska javascript pitää
kehittyy, työkalut (formatter, linter, bundler) sen ympärillä paranee jatkuvasti, näemme tässä artikkelissa, miten ESLint (linter), Kauniimpi (muotoilija) ja Husky (Git-koukut) voivat parantaa kehittäjäkokemusta ja vaikuttaa suuresti sovellukseesi. Tässä artikkelissa käytämme apuna React sovellusta, mutta pidä mielessä, että näitä työkaluja voidaan käyttää minkä tahansa Javascript/Node-sovelluksen kanssa. Aloitamme luomalla React:n. projekti käyttämällä vite näillä ohjeilla:

npm create vite@latest
Projektin nimi: js-tools
Valitse kehys: react
Valitse vaihtoehto: react
cd js-tools
npm install

ESLint for Code Quality

ESLint on työkalu, joka auttaa sinua löytämään ja korjaamaan JavaScript-järjestelmän ongelmat koodi. Lisätä se meidän
sovellusta, noudatamme seuraavia ohjeita:

cd js-tools
npm init @eslint/config
# meidän on vastattava näihin kysymyksiin, jotta voimme alustaa konfiguraation.
Miten haluat käyttää ESLintiä? Tarkistaaksesi syntaksin ja löytääksesi ongelmia
Millaisia moduuleja projektisi käyttää? JavaScript-moduulit (tuonti/vienti)
Mitä kehystä projektisi käyttää? React
Käyttääkö projektisi TypeScript:tä? Ei
Missä koodisi suoritetaan? Selaimessa
Missä muodossa haluat konfigurointitiedoston olevan? Javascript
Haluatko asentaa ne nyt? Kyllä
Mitä paketinhallintajärjestelmää haluat käyttää? npm
# aiomme asentaa lisää liitännäisiä
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Tämä luo .eslintrc.cjs tiedosto, joka sisältää ESLint config sovelluksemme juureen, tehdään näin
päivitetään konfigurointitiedosto asennetuilla lisäosilla ja lisätään lisäosa sääntö:

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'],
};

Käytämme kunkin laajennuksen suositeltuja asetuksia ja teimme laajennuksen no-unused-vars heittää virheen, lisävaiheena on lisätä virheilmoitus. nukka komento meidän package.json tiedosto seuraavasti:

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

Nyt kun meidän ESLintin asetukset on valmis, päivitämme sovelluksemme ja testaamme ja katsomme, miten
miten se toimii. Ensimmäiseksi on päivitettävä App.jsx tiedoston sisällä src kansiossa, tämä komponentti sisältää kuvan, perus videosoittimen ja painikkeen, joka vaihtaa videosoitinta.
toisto-/taukotilat, kun niitä napsautetaan:

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

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

Kokeillaan ja katsotaan, mitä käynnissä oleva nukka komento raportoi meidän App.jsx koodi:

Meillä on 4 virheitä suuri tai ei niin suuri pitäisi sanoa, olemme juuri kiinni useita tyyppisiä virheitä jotkut liittyvät React, jotkut a11y, ja yksi johtuu sääntö, että olemme lisänneet kieltää käyttämättömiä muuttujia. ESLintissä on hienoa se, että se havaitsee virheet puolestasi ja antaa meille vihjeen ratkaisusta, ja kaikki säännöt on dokumentoitu hyvin. Korjataksemme koodimme meidän on siis:

- Anna komponentillemme nimi

- Käytä muuttujaa `heading` tai poista se, jos se on hyödytön.

- Lisää `track`-tunniste kuvatekstejä varten videosoittimessa.

- Lisää mielekästä tekstiä sisältävä `alt`-attribuutti kuvaelementtiin.

Kun olemme soveltaneet näitä korjauksia ajamalla komennon `lint`, emme saa virheitä, korjattu koodimme on seuraava:

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

export default function App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hei 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="Greippiviipale muiden viipaleiden päällä."
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

On hieman ärsyttävää, että joudut käyttämään komentoa nukka komennon ennen jokaista sitoumusta ja sen voi unohtaa tehdä, git-koukun perustaminen voisi olla hyödyllistä tämän tehtävän automatisoimiseksi ja tämän ongelman ratkaisemiseksi, ja siitä aiomme puhua luvussa Husky jakso.

Kauniimpi koodin muotoilu

Kauniimpi on mielipidekeskeinen koodinmuotoilija, joka tukee monia kieliä ja integroituu moniin koodieditoreihin. Lisätään prettier sovellukseemme:

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

Meidän on luotava kaksi tiedostoa sovelluksemme juuressa a .prettierignore tiedosto jättää huomiotta tiedostot tai kansiot, joita emme halua alustaa:

node_modules/
dist/
public/

Ja .prettierrc.json tiedosto, joka sisältää kauniimman konfiguraatiomme:

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

Prettier config on muokattavissa, voit leikkiä prettier playgroundin kanssa löytääksesi itsellesi parhaiten sopivat asetukset. Lisävaihe, jolla saat prettierin toimimaan hyvin seuraavien ohjelmien kanssa ESLint on asentaa ylimääräinen ESLint-lisäosa:

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

Meidän on myös päivitettävä .eslintrc.cjs tiedosto lisäämällä kauniimpi osoitteeseen laajentaa array, meidän on varmistettava, että se laitetaan joukkoon viimeinen asema ohittaa muut asetukset:

const error = 2;

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

Prettierin suorittaminen on helppoa ja suoraviivaista, yksi tapa on suorittaa ohjelma npx prettier --write . komennolla, joka muotoilee koko sovelluskoodisi, toinen tapa on käyttää sitä editorista, jolloin saat eniten irti Prettieristä joko pikanäppäimen kautta tai automaattisesti aina kun tallennat tiedoston. Kun rivistä on koodauksen aikana tullut niin pitkä, ettei se mahdu näytölle, paina vain näppäintä ja katso, kuinka se taikomalla kääritään useammaksi riviksi! Tai kun liität koodia ja sisennykset menevät sekaisin, anna Prettierin korjata ne puolestasi poistumatta editorista.

Mutta entä jos joku kehittäjistä käyttää editoria, joka ei tue prettieriä ja unohtaa käyttää komentoa kauniimpi komennolla, on olemassa tapa korjata tämä ongelma ja se on aiheena Husky alla olevassa kohdassa.

Husky Git-koukkuja varten

Husky auttaa sinua asettamaan git-koukkuja, joiden avulla voit sitoa commit-viestejäsi, suorittaa testejä, sitoa koodia, jne... kun teet commitin tai pushin. Aiomme käyttää sitä yhdessä lint-stagedin kanssa automatisoidaksemme koodin nukkaamisen ja muotoilun ennen koodin lähettämistä.

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

Tämä luo .husky kansio, jossa on pre-commit tiedosto. Seuraava vaihe on päivittää package.json tiedosto asetuksia varten lint-stage komennolla ja käske sitä alustamaan kaikki muuttuneet tiedostot nykyisessä komennossa:

{{
...,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --ext js,jsx .": "eslint --ext js,jsx .",
"prepare": "husky install"
},
"lint-staged": {
"**/*.+(js|jsx|json|css)": "prettier --write --ignore-unknown" - "prettier --write --ignore-unknown"
},
...
}

Viimeinen vaihe on päivittää pre-commit tiedosto asetetaan koukkua suorittamaan nukka komennon kaikkiin sovelluksiin ja muotoile muutetut tiedostot komennolla lint-stage komento:

!/usr/bin/env sh

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

npm run lint
npx lint-staged
```

Tehdäänpä sovelluksellemme hieman refaktorointia nähdäksemme, miten tämä kaikki toimii, luomme VideoPlayer.jsx-komponentin ja käytämme sitä App.jsx:ssä:

```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 = 'Hei 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="Greippiviipale muiden viipaleiden päällä."
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nyt kun olemme tyytyväisiä koodiin, lähetetään muutokset ja katsotaan, miten se sujuu.

Virheitä taas tällä kertaa se huutaa puuttuvan rekvisiitan validoinnin takia, ja kuten näet, sitoutumisemme ei onnistunut. Korjataan tämä asentamalla ensin PropTypes. npm i prop-types ja päivittää VideoPlayer komponentti:

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,
};

Kun nämä virheet oli korjattu, komennon tekeminen onnistui linting- ja koodin muotoilukomentojen suorittamisen jälkeen. Kuten huomaat, Huskyn avulla automatisoimme periaatteessa lintingin ja formatoinnin tällä ennen komitointia olevalla koukulla, ja näin vältämme ei-toivottua koodia koodipohjassamme ja ratkaisemme ongelmat, kuten editorien yhteensopimattomuudet ja komentojen suorittamisen unohtamisen.

Yhteenveto

ESLint, Kauniimpi ja Husky ovat loistavia työkaluja, jotka auttavat meitä ylläpitämään koodiamme. Yhdessä ne tarjoavat meille loistavan kehittäjäkokemuksen ja helpottavat koodin ylläpitoa.

Olemme puhuneet tässä artikkelissa niputtamisesta ja muotoilusta, mutta käytettävissä olevat työkalut ja mahdollisuudet ovat paljon laajemmat, voit asettaa joitakin testejä ajettavaksi pre-commit-koukussa tai jos käytät Typescriptiä, lisätä tyypin tarkistuskomennon komennolla Husky ohittaa kaiken tyypittämättömän koodin sovelluksessasi.

Lue lisää:

Vue:n hyvät ja huonot puolet

Miten tappaa projekti huonoilla koodauskäytännöillä?

React: Vinkkejä ja niksejä