Javascript-verkfæri í aðgerð

Það er frábært að sjá hvar JavaScript er þessir dagar og hversu mikið það hefur þróast síðanES2015, dagarnir af var og $(.submitBtn) eru langt á eftir okkur. Eins og JavaScript heldur áfram
Þróast, verkfærin (formatter, linter, bundler) í kringum það halda áfram að batna, við ætlum að sjá í þessari grein hvernig ESLint (línamerki), Fegurra (formatter) og Husky (Git hooks) geta bætt upplifun þína sem forritara og haft mikil áhrif á forritið þitt. Í þessari grein ætlum við að nota a React app, en mundu að þessi verkfæri má nota með hvaða Javascript/Node-forriti sem er. Við byrjum á því að búa til React verkefni að nota vít með þessum skrefum:

npm create vite@latest
Verkefnisnafn: js-tools
Veldu rammaskipulag: react
Veldu afbrigði: react
cd js-tools
npm install

ESLint fyrir kóðagæði

ESLint er tæki sem hjálpar þér að finna og laga vandamál í JavaScript þínum kóði. Til að bæta því við okkar
Í appinu munum við fylgja þessum skrefum:

cd js-tools
npm init @eslint/config
# við þurfum að svara þessum spurningum til að stofna config-ið
Hvernig viltu nota ESLint? Til að athuga málfræði og finna vandamál
Hvaða tegund módula notar verkefnið þitt? JavaScript módular (innflutningur/útflutningur)
Hvaða rammasetningu notar verkefnið þitt? React
Notar verkefnið þitt TypeScript? Nei
Hvar keyrir kóðinn þinn? Vafri
Í hvaða sniði viltu að stillingarskráin þín sé? Javascript
Viltu setja þau upp núna? Já
Hvaða pakkaumsjónarmann viltu nota? npm
# við ætlum að setja upp viðbótar viðbætur
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Þetta mun búa til .eslintrc.cjs skrá sem inniheldur okkar ESLint config í rót forritsins okkar, skulum við
Uppfærðu stillingarskrána með innsetta viðbótunum okkar og bættu við a regla:

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

Við erum að nota ráðlagðar stillingar fyrir hvert viðbót og gerðum það engin-ónotuð-breytur kasta villu, auka skref er að bæta við a loð skipun til okkar package.json Skráðu sem hér segir:

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

Nú þegar okkar ESLint-uppsetning Það er tilbúið, við ætlum að uppfæra forritið okkar til að gera nokkrar prófanir og sjá
hvernig það virkar. Fyrsta skrefið er að uppfæra App.jsx skrá inni í uppspretta möppu, þessi íhlutur inniheldur mynd, einfalt myndbandsspilunartæki og hnapp sem kveikir og slökkur á myndbandsspilunartækinu
Spila/pása ástand þegar smellt er:

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 ? 'Pása' : 'Spila'}
      </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 = 'Halló 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>
);
}

Reynum að sjá hvað gerist þegar keyrt er loð Skipun mun skila skýrslu um okkar App.jsx kóði:

Við höfum fjórar villur, stórar eða ekki svo stórar, má segja, við höfum rétt nýlega fundið margar tegundir villna; sumar tengjast React, sumar a11y, og ein stafar af reglunni sem við bættum við til að banna ónotaðar breytur. Það sem er frábært við ESLint er að það greinir villur fyrir þig og gefur okkur vísbendingar um lausnina, og allar reglurnar eru mjög vel skjalfestar. Til að laga kóðann okkar þurfum við að:

– Gefðu íhlutnum okkar nafn

– Notaðu breytuna `heading` eða eyðaðu henni einfaldlega ef hún er gagnslaus

– Bættu við `track`-merki fyrir myndatexta í myndbandsspilaranum

– Bættu `alt`-eiginleika með merkingarbærum texta við mynd-þáttinn

Eftir að hafa beitt þessum leiðréttingum og keyrt `lint`-skipunina fáum við engin villuskilaboð, kóðinn okkar sem hefur verið leiðréttur er sem hér segir:

  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="Greipaldinsneið ofan á hrúgu af öðrum sneiðum"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Það er dálítið pirrandi að þurfa að nota loð Skipun fyrir hverja commit og maður gæti gleymt að gera það, að setja upp git hook gæti verið gagnlegt til að sjálfvirknivæða þetta verkefni og leysa þetta vandamál og um það ætlum við að tala í Husky kafli.

Fyndur fyrir kóðasniðið

Fegurra er hugmyndaríkur kóðasniður sem styður mörg forritunarmál og samþættist mörgum kóðaritillum. Bætum við prettier við forritið okkar:

npm install --save-dev --save-exact prettierHljóðskrift

Við þurfum að búa til tvær skrár í rót forritsins okkar a .forfallaðari Skrá til að hunsa skrár eða möppur sem við viljum ekki formata:

node_modules/
dist/
public/Hljóðskrift

Og a .prettierrc.json skrá sem mun innihalda fallegra stillingarnar okkar:

{
"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-stillingar eru sérsniðnar; þú getur notað Prettier-leikvöllinn til að finna þær stillingar sem henta þér best. Eitt auka skref til að láta Prettier virka vel með ESLint er að setja upp viðbótar ESLint-viðbót:

npm i --save-dev eslint-config-prettierHljóðskrift

Við þurfum líka að uppfæra .eslintrc.cjs bæta við skrá fegurra til útvíkkar rað, við þurfum að ganga úr skugga um að setja hann í síðasti staða til að ganga framar öðrum stillingum:

const error = 2;

module.exports = {...,

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

Að keyra fallegra er auðvelt og einfalt, einn háttur er að keyra the npx prettier --write . Skipun sem snyrtir allan kóðann í forritinu þínu. Önnur leið er að nota hana í ritlinum þínum, sem nýtir Prettier sem best, annaðhvort með lyklaborðsskammleið eða sjálfkrafa í hvert sinn sem þú vista skrá. Þegar lína verður of löng við kóðun til að rúmast á skjánum, ýttu bara á lykil og horfðu á hana umbreytast töfrandi í margar línur! Eða þegar þú límir inn kóða og innstungan verður óreiðukennd, láttu Prettier laga hana fyrir þig án þess að yfirgefa ritilinn.

En samt, hvað ef einn af forriturunum notar ritstjóra sem styður ekki prettier og gleymir að nota the fegurra Skipun, það er til leið til að laga þetta vandamál og það er efni þess Husky kafli hér að neðan.

Husky fyrir Git-króka

Husky Hjálpar þér að setja upp git hooks til að athuga skráningarskilaboðin þín, keyra prófanir, athuga kóðann o.s.frv. þegar þú skráir eða sendir breytingar. Við ætlum að nota það ásamt lint-staged til að sjálfvirknivæða athugun og sniðsniðningu kóða áður en hann er skráður.

npx husky-init && npm install
npm i --save-dev lint-stagedHljóðskrift

Þetta mun búa til .grannur möppu með a fyrir skuldbindingu skrá. Næsta skref er að uppfæra package.json skrá til uppsetningar lint-staged Sláðu inn skipunina og segðu henni að formata hvaða breytta skrá sem er í núverandi commiti:

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

}Hljóðskrift

Síðasta skrefið er að uppfæra fyrir skuldbindingu skrá til að stilla krókinn okkar til að keyra loð Skipuðuðu allar skrár í forritinu og breyttu sniði þeirra með lint-staged skipun:

!/usr/bin/env sh.

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

npm run lint
npx lint-staged
```

Gerum smá endurskipulagningu á appinu okkar til að sjá hvernig þetta allt virkar, við ætlum að búa til VideoPlayer.jsx-hluta og nota hann í 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="Greipaldinsneið ofan á hrúgu af öðrum sneiðum"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Nú þegar við erum ánægð með kóðann okkar skulum við skrá breytingarnar og sjá hvernig það gengur.

Villa aftur – nú er kerfið að öskra vegna skorts á props-gildisskoðun og eins og sjá má tókst commit-ið okkar ekki. Látum laga þetta með því að setja upp PropTypes fyrst. npm i prop-types og uppfærslu á Myndbandsspilari þáttur:

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

Eftir að hafa leiðrétt þessar villur tókst commit-ið okkar eftir að hafa keyrt linting- og kóðaskemmtilegingar-skipanirnar. Eins og sjá má með Husky höfum við í raun sjálfvirknivætt linting og kóðaskemmtilegingu með þessum pre-commit hook, sem kemur í veg fyrir óæskilegan kóða í kóðagrunninum okkar og leysir vandamál eins og ósamrýmanleika ritla og að gleyma að keyra þessar skipanir.

Yfirlit

ESLint, Fegurra og Husky eru frábær verkfæri sem hjálpa okkur að viðhalda kóðanum okkar. Saman veita þau okkur frábæra þróunarupplifun og gera viðhald kóðans okkar auðveldara.

Við höfum rætt um lintun og formgerð í þessari grein, en tiltæk verkfæri og möguleikar eru mun víðari; þú gætir sett upp próf sem keyra á pre-commit hook eða, ef þú notar TypeScript, bætt við skipun til gerðaprófunar með Husky til að sleppa öllum óskráðu kóða í forritinu þínu.

Lesa meira:

Kostir og gallar Vue

Hvernig á að drepa verkefni með slæmum forritunarvenjum

React: Ábendingar og brellur