Javascript rīki darbībā

Tas ir lieliski redzēt, kur Javascript ir mūsdienās un cik ļoti tā ir attīstījusies kopšES2015, dienas var un $(.submitBtn) ir tālu aiz mums. Tā kā javascript saglabā
attīstās, rīki (formatter, linter, bundler) ap to kļūst arvien labāki, šajā rakstā mēs redzēsim, kā. ESLint (linter), Skaistāks (formatētājs) un Husky (Git āķi) var uzlabot jūsu izstrādātāja pieredzi un būtiski ietekmēt jūsu lietojumprogrammu. Šajā rakstā mēs izmantosim React lietojumprogrammu, taču paturiet prātā, ka šos rīkus var izmantot ar jebkuru Javascript/Node lietojumprogrammu. Mēs sāksim ar React ģenerēšanu. projekts izmantojot vite ar šiem soļiem:

npm create vite@latest
Projekta nosaukums: js-tools
Izvēlēties ietvaru: react
Izvēlēties variantu: react
cd js-tools
npm install

ESLint koda kvalitātei

ESLint ir rīks, kas palīdz atrast un novērst JavaScript problēmas. kods. Lai to pievienotu mūsu
lietotni, mēs izpildīsim šos soļus:

cd js-tools
npm init @eslint/config
# mums būs jāatbild uz šiem jautājumiem, lai inicializētu konfigurāciju
Kā vēlaties izmantot ESLint? Lai pārbaudītu sintaksi un atrastu problēmas
Kāda veida moduļus izmanto jūsu projekts? JavaScript moduļi (imports/eksports)
Kādu ietvaru izmanto jūsu projekts? React
Vai jūsu projekts izmanto TypeScript? Nē
Kur darbojas jūsu kods? Pārlūkprogrammā
Kādā formātā vēlaties, lai būtu konfigurācijas fails? Javascript
Vai vēlaties tos instalēt tagad? Jā
Kuru pakotņu pārvaldnieku vēlaties izmantot? npm
# mēs uzstādīsim papildu spraudņus
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Tādējādi tiks izveidots .eslintrc.cjs failu, kas satur mūsu ESLint config mūsu lietotnes saknē, pieņemsim
atjaunināt konfigurācijas failu ar mūsu instalētajiem spraudņiem un pievienot noteikums:

const error = 2;

module.exports = {
  env: {
    pārlūks: 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: {
    : kļūda,
  },
  settings: {
    react: {
      versija: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Mēs izmantojam ieteicamos iestatījumus katram spraudnim un veicām no-unused-vars mest kļūdu, papildu solis ir pievienot Lint komandu uz mūsu package.json failu šādi:

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

Tagad, kad mūsu ESLint iestatīšana ir gatavs, mēs atjaunināsim mūsu lietotni, lai veiktu testēšanu un redzētu.
kā tas darbojas. Vispirms ir jāatjaunina App.jsx failu iekšpusē src mapē, šī komponente satur attēlu, pamata video atskaņotāju un pogu, kas pārslēdz video atskaņotāju.
atskaņošanas/pauzes stāvokļi pēc klikšķa:

importēt { useEffect, useRef, useState } no 'react';

eksportēt noklusējuma funkciju () {
  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ēt { useEffect, useRef, useState } no 'react';

eksportēt noklusējuma funkciju () {
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>
);
}

Mēģināsim noskaidrot, ko darbojas Lint komanda ziņos par mūsu App.jsx kods:

Mums ir 4 lielas vai ne tik lielas kļūdas, es teiktu, mēs esam tikko noķēruši vairāku veidu kļūdas, dažas ir saistītas ar React, dažas ar a11y, un viena ir saistīta ar noteikumu, ka mēs esam pievienojuši, lai aizliegtu neizmantotus mainīgos. ESLint lieliski ir tas, ka tas noķer kļūdas un sniedz mums norādes par risinājumu, turklāt visi noteikumi ir ļoti labi dokumentēti. Tātad, lai labotu mūsu kodu, mums būs nepieciešams:

- Sniedziet mūsu komponentam nosaukumu

- Izmantojiet mainīgo `heading` vai vienkārši dzēsiet to, ja tas ir nelietderīgs.

- Pievienot `track` birku parakstu rādīšanai video atskaņotājā

- Pievienot `alt` atribūtu ar nozīmīgu tekstu attēla elementam

Pēc šo labojumu piemērošanas, izpildot `lint` komandu, mēs nesaņemam nekādas kļūdas, mūsu labotais kods ir šāds:

  importēt { useEffect, useRef, useState } no 'react';

eksportēt noklusējuma funkciju 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="Greipfrūta šķēle uz citu šķēļu kaudzes"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Tas ir mazliet kaitinoši, ka ir jāizmanto Lint komandu pirms katras nodošanas un to var aizmirst izdarīt, tāpēc, lai automatizētu šo uzdevumu un atrisinātu šo problēmu, varētu būt noderīgi izveidot git āķi, un tieši par to mēs runāsim šajā nodaļā. Husky sadaļa.

Pievilcīgāka koda formatēšana

Skaistāks ir uz viedokli balstīts koda formatētājs, kas atbalsta daudzas valodas un integrējas ar daudziem koda redaktoriem. Pievienosim mūsu lietojumprogrammai pretenciozāku:

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

Mums būs nepieciešams izveidot divus failus mūsu lietotnes saknē a .prettierignore failu, lai ignorētu failus vai mapes, kuras nevēlamies formatēt:

node_modules/
dist/
public/

Un .prettierrc.json failu, kurā būs mūsu skaistākā konfigurācija:

{
"arrowParens": "vienmēr",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "vienmēr",
"quoteProps": "pēc vajadzības",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": true
}

Prettier config ir pielāgojama, varat spēlēties ar skaistāku spēļu laukumu, lai atrastu iestatījumus, kas jums vislabāk atbilst. Papildu solis, lai panāktu, ka Prettier labi darbojas ar ESLint ir instalēt papildu ESLint spraudni:

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

Mums būs jāatjaunina arī .eslintrc.cjs failu, pievienojot skaistāks uz paplašina masīvs, mums jāpārliecinās, ka tas ir ievietots pēdējais pozīciju, lai aizstātu citas konfigurācijas:

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 palaišana ir vienkārša un vienkārša, viens no veidiem ir palaist npx prettier --write . komandu, kas formatēs visu jūsu lietotnes kodu, otrs veids ir izmantot to no redaktora, kas ļaus izmantot Prettier maksimāli efektīvi, izmantojot tastatūras saīsni vai automātiski, kad saglabājat failu. Ja kodēšanas laikā kāda rinda ir kļuvusi tik gara, ka tā vairs neiekļaujas ekrānā, vienkārši nospiediet taustiņu un skatieties, kā tā maģiski tiek ietīta vairākās rindās! Vai arī, ielīmējot kodu un izjaucot ievilkumus, ļaujiet Prettier tos labot, neatstājot redaktoru.

Bet tomēr, ko darīt, ja kāds no izstrādātājiem izmanto redaktoru, kas neatbalsta pretenciozāku un aizmirst izmantot. skaistāks komandu, ir veids, kā novērst šo problēmu, un par to ir runa šajā Husky sadaļā zemāk.

Husky par Git āķiem

Husky palīdz iestatīt git āķus, lai, kad jūs nododat vai izvietojat kopiju, veiktu testus, kodu utt... Mēs to izmantosim kopā ar lint-staged, lai automatizētu koda atšifrēšanu un formatēšanu pirms koda nodošanas.

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

Tādējādi tiks izveidots .husky mapi ar iepriekšējs uzdevums failu. Nākamais solis ir atjaunināt package.json failu, lai iestatītu . komandu un norādiet tai formatēt jebkuru mainītu failu pašreizējā kopijā:

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

Pēdējais solis ir atjaunināt iepriekšējs uzdevums failu, lai iestatītu mūsu āķi, lai palaistu Lint komandu par visām lietotnēm un formatēt mainītos failus ar . komanda:

!/usr/bin/env sh

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

npm run lint
npx lint-staged
```

Veiksim mūsu lietotnes pārveidošanu, lai redzētu, kā tas viss darbojas, mēs izveidosim komponentu VideoPlayer.jsx un izmantosim to lietotnē App.jsx:

```javascript
import { useEffect, useRef } no 'react';

eksportēt noklusējuma funkciju VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

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

return (

);
}

importēt { useState } no 'react';
import VideoPlayer from './VideoPlayer';

eksportēt noklusējuma funkciju 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="Greipfrūta šķēle uz citu šķēļu kaudzes"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Tagad, kad esam apmierināti ar savu kodu, izdarīsim izmaiņas un redzēsim, kā veicas.

Kļūdas atkal šoreiz tas kliedz trūkstošo rekvizītu validācijas dēļ, un, kā redzat, mūsu commit nebija veiksmīgs. Ļaujiet mums to novērst, vispirms instalējot PropTypes npm i prop-types un atjaunināt VideoPlayer sastāvdaļa:

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

eksportēt noklusējuma funkciju VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

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

return (

);
}

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

Pēc šo kļūdu labošanas mūsu kļūdu nodošana bija veiksmīga pēc tam, kad tika izpildītas izlīdzināšanas un koda formatēšanas komandas. Kā redzat, ar Husky mēs būtībā automatizējām lintingu un formatēšanu, izmantojot šo pirmsuzdevuma āķi, un tas ļaus izvairīties no nevēlama koda mūsu koda bāzē un atrisinās tādas problēmas kā redaktoru nesaderība un šo komandu palaišanas aizmiršana.

Kopsavilkums

ESLint, Skaistāks un Husky ir lieliski rīki, kas palīdz mums uzturēt mūsu kodu. Kopā tie nodrošina mums lielisku izstrādātāja pieredzi un atvieglo mūsu koda uzturēšanu.

Šajā rakstā esam runājuši par atvasināšanu un formatēšanu, taču pieejamie rīki un iespējas ir daudz plašākas, jūs varētu iestatīt dažus testus, lai tos palaistu uz iepriekšēja pasūtījuma āķa, vai, ja izmantojat Typescript, pievienojot tipa pārbaudes komandu ar Husky lai izlaistu jebkuru lietotnē neierakstītu kodu.

Lasīt vairāk:

Vue plusi un mīnusi

Kā nogalināt projektu ar sliktu kodēšanas praksi

React: Padomi un triki