Javascript tööriistad tegevuses

See on vinge näha, kus Javascript on tänapäeval ja kui palju see on arenenud alates sellest, kuiES2015, päevade var ja $(.submitBtn) on kaugel meie taga. Kuna javascript hoiab
areneb, tööriistad (formatter, linter, bundler) selle ümber muutuvad üha paremaks, me näeme selles artiklis, kuidas ESLint (linter), Ilusam (vormindaja) ja Husky (Git-hookid) võivad parandada arendajate kogemust ja avaldada suurt mõju teie rakendusele. Selle artikli tarbeks kasutame siinkohal React rakendust, kuid pidage meeles, et neid vahendeid saab kasutada mis tahes Javascript/Node'i rakendusega. Alustame asju React genereerimisega. projekt kasutades vite nende sammudega:

npm create vite@latest
Projekti nimi: js-tools
Vali raamistik: react
Valige variant: react
cd js-tools
npm install

ESLint koodikvaliteedi jaoks

ESLint on tööriist, mis aitab teil leida ja parandada probleeme teie JavaScript-süsteemis kood. Et lisada see meie
rakendust järgime järgmisi samme:

cd js-tools
npm init @eslint/config
# peame vastama nendele küsimustele, et initsialiseerida config
Kuidas soovite ESLint'i kasutada? Süntaksi kontrollimiseks ja probleemide leidmiseks
Millist tüüpi mooduleid teie projekt kasutab? JavaScript moodulid (import/eksport)
Millist raamistikku teie projekt kasutab? React
Kas teie projekt kasutab TypeScript? Ei
Kus teie kood töötab? Brauseris
Millises formaadis soovite, et teie konfiguratsioonifail oleks? Javascript
Kas soovite neid nüüd paigaldada? Jah
Millist paketihaldurit soovite kasutada? npm
# kavatseme paigaldada täiendavaid lisapluginaid
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

See loob .eslintrc.cjs faili, mis sisaldab meie ESLint config meie rakenduse juurest, olgem
uuendame konfigufaili meie paigaldatud pistikprogrammidega ja lisame juurde reegel:

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

Me kasutame iga plugina jaoks soovitatud seadeid ja tegime no-unused-vars viga, on täiendavaks sammuks lisada lint käsk meie package.json faili järgmiselt:

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

Nüüd, kui meie ESLint'i seadistus on valmis, uuendame oma rakendust, et teha mõned testid ja näha
kuidas see toimib. Esmalt tuleb uuendada App.jsx faili sees src kausta, see komponent sisaldab pilti, põhilist videomängijat ja nuppu, mis lülitab videomängija ümber.
mängimise/pauseerimise olekud, kui klõpsata:

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

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

Proovime ja vaatame, mis töötab lint käsk annab aru meie App.jsx kood:

Meil on 4 vigu suur või mitte nii suur peaksin ütlema, oleme lihtsalt püütud mitu tüüpi vigu mõned on seotud React, mõned a11y, ja üks on tingitud reeglist, et me oleme lisanud, et keelata kasutamata muutujaid. ESLint'i juures on suurepärane see, et ta püüab vead teie jaoks ja annab meile märku lahenduse kohta ning kõik reeglid on väga hästi dokumenteeritud. Nii et meie koodi parandamiseks peame:

- Anda meie komponendile nimi

- Kasutage muutujat `heading` või lihtsalt kustutage see, kui see on kasutu.

- Lisage videomängijas pealkirjade jaoks silt "track".

- Lisage pildielemendile tähendusliku tekstiga atribuut `alt`.

Pärast nende paranduste rakendamist käsuga `lint` ei saa me vigu, meie parandatud kood on järgmine:

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

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

See on veidi tüütu, et tuleb kasutada lint käsk enne iga kommiteerimist ja seda võib unustada, Giti konksu seadistamine võib olla kasulik selle ülesande automatiseerimiseks ja probleemi lahendamiseks ning sellest me räägimegi järgmises peatükis Husky jagu.

Ilusam koodide vormindamine

Ilusam on arvamusliiduline koodiformaator, mis toetab paljusid keeli ja integreerub paljude koodiredaktoritega. Lisame oma rakendusele ilusamad:

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

Meil on vaja luua kaks faili meie rakenduse juurest a .prettierignore faili, et ignoreerida faile või kaustu, mida me ei soovi vormindada:

node_modules/
dist/
public/

Ja .prettierrc.json faili, mis sisaldab meie ilusamat konfiguratsiooni:

{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "lf",
"embeddedLanguageFormating": "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 kohandatav, saate mängida prettier playgroundiga, et leida teile kõige sobivamad seaded. Täiendav samm, et prettier töötaks hästi koos ESLint on paigaldada täiendav ESLint plugin:

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

Samuti peame uuendama .eslintrc.cjs faili lisades ilusam et laiendab massiivi, peame veenduma, et see pannakse sisse viimane positsiooni, et tühistada muud seadistused:

const error = 2;

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

Prettier'i käivitamine on lihtne ja sirgjooneline, üks võimalus on käivitada npx prettier --write . käsk, mis vormindab kogu teie rakenduse koodi, teine võimalus on kasutada seda oma redaktorist, see saab Prettierist kõige rohkem kasu, kas klaviatuurikombinatsiooni kaudu või automaatselt iga kord, kui salvestate faili. Kui rida on kodeerimise käigus nii pikaks muutunud, et see ei mahu enam ekraanile, vajutage lihtsalt klahvi ja vaadake, kuidas see maagiliselt mitmeks reaks mähitakse! Või kui te kleebite koodi sisse ja mõnes kohas on sissekirjutus segi läinud, laske Prettieril see teie eest parandada, ilma et te peaksite oma redaktorist lahkuma.

Aga ikkagi, mis siis, kui üks arendaja kasutab redaktsiooni, mis ei toeta prettier'i ja unustab kasutada ilusam käsk, on olemas võimalus selle probleemi lahendamiseks ja see on teema Husky alljärgnevas osas.

Husky Git konksude jaoks

Husky aitab teil seadistada Giti konksud, mis aitavad teil kommiteerimisteateid, teste, koodi jne... käivitada, kui te kommiteerite või push'i teete. Me kasutame seda koos lint-stagediga, et automatiseerida koodi lintimine ja vormindamine enne koodi kommiteerimist.

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

See loob .husky kausta koos eelregistreerimine faili. Järgmine samm on uuendada package.json faili seadistamiseks lint-staadium käsk ja käskida tal vormindada iga muudetud faili praeguses kommitis:

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

Viimane samm on uuendada eelregistreerimine faili, et seadistada meie konks, et käivitada lint käsk kogu rakenduses ja vormindada muudetud failid käsuga lint-staadium käsk:

!/usr/bin/env sh

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

npm run lint
npx lint-stage
```

Teeme meie rakenduses mõned refaktooringud, et näha, kuidas see kõik toimib, loome VideoPlayer.jsx komponendi ja kasutame seda App.jsx'is:

```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 = 'Tere 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="Greibiviilud teiste viilude peal"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nüüd, kui oleme oma koodiga rahul, teeme oma muudatused ja vaatame, kuidas läheb.

Vead jälle seekord karjuvad, sest puudub rekvisiitide valideerimine ja nagu näete, ei õnnestunud meie commit. Parandame selle, paigaldades kõigepealt PropTypes'i. npm i prop-types ja ajakohastades VideoPlayer komponent:

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

Pärast nende vigade parandamist oli meie kommitatsioon pärast lintingu ja koodi vormindamise käskude käivitamist edukas. Nagu näete, automatiseerime Husky abil põhimõtteliselt lintingu ja vormindamise selle kommiteerimiseelse konksuga ja see väldib igasugust soovimatut koodi meie koodibaasis ja lahendab probleemid nagu toimetajate ühildamatus ja nende käskude unustamine.

Kokkuvõte

ESLint, Ilusam ja Husky on suurepärased tööriistad, mis aitavad meil oma koodi hooldada. Koos annavad nad meile suurepärase arenduskogemuse ja muudavad meie koodi hooldamise lihtsamaks.

Me rääkisime selles artiklis lintimisest ja vormindamisest, kuid olemasolevad tööriistad ja võimalused on palju laiemad, sa võid seadistada mõned testid käivitamiseks pre-commit konksu või kui kasutad Typescript'i, lisades tüübikontrolli käsu koos Husky et jätta teie rakenduses kõik kirjutamata koodid vahele.

Loe edasi:

Vue plussid ja miinused

Kuidas tappa projekt halva kodeerimispraktikaga

React: näpunäited ja nipid