Veiksmingi Javascript įrankiai

Nuostabu matyti, kur Javascript yra šiais laikais ir kaip stipriai ji pasikeitė nuoES2015, dienų var ir $(.submitBtn) yra toli už mus. Kadangi javascript vis dar
evoliucionuoja, aplink jį esantys įrankiai (formatter, linter, bundler) nuolat tobulėja, šiame straipsnyje mes pamatysime, kaip ESLint (linter), Gražiau (formatavimo programa) ir Husky ("Git" kabliukai) gali pagerinti jūsų programuotojo patirtį ir padaryti didelį poveikį jūsų programai. Šiame straipsnyje naudosime React programą, tačiau nepamirškite, kad šiuos įrankius galima naudoti su bet kuria "Javascript/Node" programa. Pradėsime nuo React generavimo projektas naudojant vite atlikdami šiuos veiksmus:

npm create vite@latest
Projekto pavadinimas: js-tools
Pasirinkite karkasą: react
Pasirinkite variantą: react
cd js-tools
npm install

"ESLint" kodo kokybei

ESLint yra įrankis, padedantis rasti ir išspręsti JavaScript problemas. kodas. Norėdami pridėti jį prie mūsų
programėlę atliksime šiuos veiksmus:

cd js-tools
npm init @eslint/config
# turėsime atsakyti į šiuos klausimus, kad galėtume inicijuoti konfigūraciją
Kaip norėtumėte naudoti ESLint? Kad patikrintumėte sintaksę ir rastumėte problemų
Kokio tipo modulius naudoja jūsų projektas? JavaScript moduliai (importas ir eksportas)
Kokią sistemą naudoja jūsų projektas? React
Ar jūsų projektas naudoja TypeScript? Ne
Kur paleidžiamas jūsų kodas? Naršyklėje
Kokiu formatu norite, kad būtų konfigūracijos failas? Javascript
Ar norite juos įdiegti dabar? Taip
Kurį paketų tvarkytuvą norite naudoti? npm
# ketiname įdiegti papildomus įskiepius
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Taip bus sukurtas .eslintrc.cjs failą, kuriame yra mūsų ESLint konfigūraciją mūsų programos šaknyje, tegul
atnaujinti konfigūracijos failą su mūsų įdiegtais įskiepiais ir pridėti taisyklė:

const error = 2;

module.exports = {
  env: {
    naršyklė: 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: 'modulis',
  },
  įskiepiai: ["react"],
  taisyklės: {
    "no-unused-vars": error,
  },
  nustatymai: {
    react: {
      versija: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Mes naudojame rekomenduojamus kiekvieno įskiepio nustatymus ir atlikome no-unused-vars išmesti klaidą, papildomas žingsnis yra pridėti Lint komandą į mūsų package.json failą taip:

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

Dabar, kai mūsų ESLint sąranka paruoštas, atnaujinsime programėlę, kad galėtume atlikti keletą bandymų ir pamatyti.
kaip tai veikia. Pirmiausia reikia atnaujinti App.jsx failą, esantį src aplanke yra paveikslėlis, pagrindinis vaizdo grotuvas ir mygtukas, kuriuo perjungiamas vaizdo grotuvas.
grojimo/pauzės būsenos, kai spustelėjama:

importuoti { useEffect, useRef, useState } iš 'react';

eksportas numatytoji funkcija () {
  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>
  );
}

importuoti { useEffect, useRef, useState } iš 'react';

eksportas numatytoji funkcija () {
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>
);
}

Pabandykime pamatyti, ką veikia Lint komanda praneš apie mūsų App.jsx kodas:

Turime 4 klaidas, puikias arba ne tokias puikias, turėčiau pasakyti, kad mes ką tik sugavome kelių tipų klaidas, kai kurios susijusios su React, kai kurios su a11y, o viena - su taisykle, kurią pridėjome, kad uždraustume nenaudojamus kintamuosius. ESLint puiki tuo, kad ji už jus pagauna klaidas ir nurodo mums sprendimą, o visos taisyklės yra labai gerai dokumentuotos. Taigi norėdami ištaisyti savo kodą turėsime:

- Suteikite pavadinimą mūsų komponentui

- Naudokite kintamąjį `heading` arba tiesiog ištrinkite jį, jei jis nenaudingas

- Vaizdo įrašų grotuve pridėkite `track` žymą antraštėms

- Į paveikslėlio elementą pridėkite atributą `alt` su reikšmingu tekstu

Pritaikius šias pataisas ir paleidus `lint` komandą, klaidų negauname, o mūsų pataisytas kodas yra toks:

  importuoti { useEffect, useRef, useState } iš 'react';

export default funkcija 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="Greipfruto griežinėlis ant krūvos kitų griežinėlių"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Šiek tiek erzina, kad reikia naudoti Lint komandą prieš kiekvieną pakeitimą ir galima pamiršti tai padaryti, todėl, norint automatizuoti šią užduotį ir išspręsti šią problemą, būtų naudinga sukurti git kabliuką, apie kurį ir kalbėsime Husky skyrius.

Gražesnis kodo formatavimas

Gražiau yra nuomonių pagrindu sukurtas kodo formatas, palaikantis daugelį kalbų ir integruojamas su daugeliu kodo redaktorių. Pridėkime į savo programą "Prettier":

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

Programos šaknyje turėsime sukurti du failus a .prettierignore failą, kad ignoruotume failus ar aplankus, kurių nenorime formatuoti:

node_modules/
dist/
public/

Ir .prettierrc.json failą, kuriame bus mūsų gražesnė konfigūracija:

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

Gražesnė konfigūracija yra pritaikoma, galite žaisti su gražesne žaidimų aikštele, kad rastumėte jums labiausiai tinkančius nustatymus. Papildomas žingsnis, kad prettier gerai veiktų su ESLint įdiegti papildomą "ESLint" įskiepį:

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

Taip pat turėsime atnaujinti .eslintrc.cjs failą pridedant gražiau į išplečia masyvą, turime įsitikinti, kad jis yra paskutinis padėtį, kad būtų galima pakeisti kitas konfigūracijas:

const error = 2;

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

Paleisti "Prettier" lengva ir paprasta, vienas iš būdų yra paleisti npx prettier --write . komandą, kuri suformatuos visą jūsų programos kodą, antras būdas - naudoti ją iš redaktoriaus, taip iš "Prettier" gausite maksimalią naudą, naudodami klaviatūros spartųjį klavišą arba automatiškai, kai išsaugosite failą. Kai koduojant eilutė pasidarė tokia ilga, kad netelpa ekrane, tiesiog paspauskite klavišą ir žiūrėkite, kaip ji stebuklingai suvyniojama į kelias eilutes! Arba kai įklijuojate kokį nors kodą ir iškraipoma įtrauka, leiskite "Prettier" ją pataisyti už jus neišeinant iš redaktoriaus.

Bet vis dėlto, ką daryti, jei vienas iš kūrėjų naudoja redaktorių, kuris nepalaiko gražesnio ir pamiršta naudoti gražiau komandą, yra būdas išspręsti šią problemą ir tai yra šios Husky toliau esančiame skyriuje.

"Husky", skirtas "Git" kabliukams

Husky padeda nustatyti "git" kabliukus, kad būtų galima rašyti pranešimus, paleisti testus, rašyti kodą ir t. t., kai jį atiduodate arba išsiunčiate. Mes ketiname ją naudoti kartu su lint-staged, kad automatizuotume kodo išlyginimą ir formatavimą prieš perduodami kodą.

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

Taip bus sukurtas .husky aplanką su išankstinis įsipareigojimas failas. Kitas žingsnis - atnaujinti package.json failą, kad nustatytumėte linijinės pakopos komandą ir nurodykite jai suformatuoti bet kurį pakeistą dabartinės redakcijos failą:

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

Paskutinis žingsnis - atnaujinti išankstinis įsipareigojimas failą, kad nustatytumėte mūsų kabliuką, kad paleistumėte Lint komandą ir suformatuokite pakeistus failus naudodami linijinės pakopos komanda:

!/usr/bin/env sh

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

npm run lint
npx lint-staged
```

Atlikime tam tikrą mūsų programos pertvarkymą, kad pamatytume, kaip visa tai veikia, sukursime komponentą VideoPlayer.jsx ir naudosime jį 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]);

grąžinti (

);
}

importuoti { useState } iš 'react';
importuoti VideoPlayer iš './VideoPlayer';

eksportuoti numatytąją funkciją App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

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

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

  <div>
    <img
      alt="Greipfruto griežinėlis ant krūvos kitų griežinėlių"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Dabar, kai esame patenkinti savo kodu, patvirtinkime pakeitimus ir pažiūrėkime, kaip sekasi.

Šį kartą vėl klaidos, nes trūksta rekvizitų patvirtinimo ir, kaip matote, mūsų įsipareigojimas nebuvo sėkmingas. Ištaisykime tai, pirmiausia įdiegdami PropTypes npm i prop-types ir atnaujinti VideoPlayer komponentas:

importuoti { useEffect, useRef } iš '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]);

grąžinti (

);
}

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

Ištaisius šias klaidas, įvykdžius linting ir kodo formatavimo komandas, mūsų įsipareigojimas buvo sėkmingas. Kaip matote, naudodami "Husky" iš esmės automatizavome lintingą ir formatavimą, o tai padės išvengti nepageidaujamo kodo mūsų kodo bazėje ir išspręsti tokias problemas kaip redaktorių nesuderinamumas ir pamiršimas paleisti šias komandas.

Santrauka

ESLint, Gražiau ir Husky yra puikūs įrankiai, padedantys mums prižiūrėti kodą. Kartu jos suteikia mums puikią programuotojo patirtį ir palengvina kodo priežiūrą.

Šiame straipsnyje kalbėjome apie šriftuotę ir formatavimą, tačiau turimi įrankiai ir galimybės yra daug platesnės, galite nustatyti keletą testų, kurie būtų paleisti ant išankstinio perdavimo kabliuko, arba, jei naudojate Typescript, pridėti tipo tikrinimo komandą su Husky praleisti bet kokį netipinį kodą savo programoje.

Skaityti daugiau:

Vue privalumai ir trūkumai

Kaip nužudyti projektą dėl blogos kodavimo praktikos

React: patarimai ir gudrybės