Εργαλεία Javascript σε δράση

Είναι φοβερό να βλέπεις πού Javascript είναι στις μέρες μας και πόσο έχει εξελιχθεί από τότε πουES2015, τις ημέρες του var και $(.submitBtn) είναι πολύ μακριά πίσω μας. Καθώς η javascript συνεχίζει
εξελίσσεται, τα εργαλεία (formatter, linter, bundler) γύρω από αυτό γίνονται όλο και καλύτερα, θα δούμε σε αυτό το άρθρο πώς ESLint (linter), Πιο όμορφο (μορφοποιητής) και Husky (Git hooks) μπορούν να βελτιώσουν την εμπειρία του προγραμματιστή και να έχουν μεγάλο αντίκτυπο στην εφαρμογή σας. Για χάρη αυτού του άρθρου θα χρησιμοποιήσουμε ένα React εφαρμογή, αλλά έχετε υπόψη σας ότι αυτά τα εργαλεία μπορούν να χρησιμοποιηθούν με οποιαδήποτε εφαρμογή Javascript/Node. Θα ξεκινήσουμε δημιουργώντας ένα React έργο χρησιμοποιώντας το vite με αυτά τα βήματα:

npm create vite@latest
Όνομα έργου: js-tools
Επιλέξτε ένα πλαίσιο: react
Επιλέξτε μια παραλλαγή: react
cd js-tools
npm install

ESLint για ποιότητα κώδικα

ESLint είναι ένα εργαλείο που σας βοηθάει να βρείτε και να διορθώσετε προβλήματα στο JavaScript κωδικός. Για να το προσθέσουμε στο
app θα ακολουθήσουμε τα παρακάτω βήματα:

cd js-tools
npm init @eslint/config
# θα πρέπει να απαντήσουμε σε αυτές τις ερωτήσεις για να αρχικοποιήσουμε το config
Πώς θα θέλατε να χρησιμοποιήσετε το ESLint; Για να ελέγξετε τη σύνταξη και να βρείτε προβλήματα
Τι είδους ενότητες χρησιμοποιεί το έργο σας; Ενότητες JavaScript (εισαγωγή/εξαγωγή)
Ποιο πλαίσιο χρησιμοποιεί το έργο σας; React
Το έργο σας χρησιμοποιεί το TypeScript; Όχι
Πού εκτελείται ο κώδικάς σας; Πρόγραμμα περιήγησης
Σε ποια μορφή θέλετε να είναι το αρχείο ρυθμίσεων; Javascript
Θα θέλατε να τα εγκαταστήσετε τώρα; Ναι
Ποιον διαχειριστή πακέτων θέλετε να χρησιμοποιήσετε; npm
# πρόκειται να εγκαταστήσουμε πρόσθετα πρόσθετα
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Αυτό θα δημιουργήσει ένα .eslintrc.cjs αρχείο που περιέχει το ESLint config στη ρίζα της εφαρμογής μας, ας
ενημερώνουμε το αρχείο ρυθμίσεων με τα εγκατεστημένα plugins μας και προσθέτουμε ένα κανόνας:

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

Χρησιμοποιούμε τις συνιστώμενες ρυθμίσεις για κάθε πρόσθετο και κάναμε την no-unused-vars πετάξει ένα σφάλμα, ένα επιπλέον βήμα είναι να προσθέσετε ένα χνούδι στην εντολή μας package.json αρχείο ως εξής:

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

Τώρα που το Ρύθμιση ESLint είναι έτοιμη, θα ενημερώσουμε την εφαρμογή μας για να κάνουμε κάποιες δοκιμές και να δούμε
πώς λειτουργεί. Το πρώτο πράγμα που πρέπει να κάνετε είναι να ενημερώσετε το App.jsx αρχείο μέσα στο src φάκελο, αυτό το στοιχείο περιέχει μια εικόνα, ένα βασικό πρόγραμμα αναπαραγωγής βίντεο και ένα κουμπί που αλλάζει το πρόγραμμα αναπαραγωγής βίντεο.
καταστάσεις αναπαραγωγής/παύσης όταν κάνετε κλικ:

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 ? '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 = '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>
);
}

Ας προσπαθήσουμε να δούμε τι θα γίνει με την εκτέλεση του χνούδι εντολή θα αναφέρει σχετικά με το App.jsx κωδικός:

Έχουμε 4 σφάλματα σπουδαία ή όχι και τόσο σπουδαία θα έπρεπε να πω, έχουμε μόλις πιάσει πολλαπλούς τύπους σφαλμάτων κάποια σχετίζονται με το React, κάποια με το a11y, και ένα οφείλεται στον κανόνα που έχουμε προσθέσει για να απαγορεύσουμε τις αχρησιμοποίητες μεταβλητές. Το σπουδαίο με το ESLint είναι ότι πιάνει τα λάθη για εσάς και μας δίνει μια ένδειξη για τη λύση και όλοι οι κανόνες είναι πολύ καλά τεκμηριωμένοι. Έτσι για να διορθώσουμε τον κώδικά μας θα πρέπει να:

- Δώστε ένα όνομα στο συστατικό μας

- Χρησιμοποιήστε τη μεταβλητή `heading` ή απλά διαγράψτε την αν είναι άχρηστη

- Προσθέστε μια ετικέτα `track` για λεζάντες στο πρόγραμμα αναπαραγωγής βίντεο

- Προσθέστε ένα χαρακτηριστικό `alt` με ουσιαστικό κείμενο στο στοιχείο image

Μετά την εφαρμογή αυτών των διορθώσεων, εκτελώντας την εντολή `lint`, δεν λαμβάνουμε κανένα σφάλμα, ο διορθωμένος κώδικάς μας έχει ως εξής:

  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="Φέτα γκρέιπφρουτ πάνω σε μια στοίβα από άλλες φέτες"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Είναι λίγο ενοχλητικό να πρέπει να χρησιμοποιείτε το χνούδι εντολή πριν από κάθε δέσμευση και κάποιος μπορεί να ξεχάσει να το κάνει αυτό, η δημιουργία ενός git hook θα μπορούσε να βοηθήσει στην αυτοματοποίηση αυτής της εργασίας και στην επίλυση αυτού του προβλήματος και γι' αυτό θα μιλήσουμε στην ενότητα Husky τμήμα.

Πιο όμορφη μορφοποίηση κώδικα

Πιο όμορφο είναι ένας διαμορφωτής κώδικα με άποψη που υποστηρίζει πολλές γλώσσες και ενσωματώνεται με πολλούς επεξεργαστές κώδικα. Ας προσθέσουμε τον prettier στην εφαρμογή μας:

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

Θα πρέπει να δημιουργήσουμε δύο αρχεία στη ρίζα της εφαρμογής μας ένα .prettierignore αρχείο για να αγνοήσουμε αρχεία ή φακέλους που δεν θέλουμε να μορφοποιήσουμε:

node_modules/
dist/
public/

Και ένα .prettierrc.json αρχείο που θα περιέχει τις πιο όμορφες ρυθμίσεις μας:

{
"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 είναι προσαρμόσιμο, μπορείτε να παίξετε με το prettier playground για να βρείτε τις ρυθμίσεις που σας ταιριάζουν περισσότερο. Ένα επιπλέον βήμα για να κάνετε το prettier να λειτουργεί καλά με το ESLint είναι να εγκαταστήσετε ένα πρόσθετο πρόσθετο ESLint:

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

Θα πρέπει επίσης να ενημερώσουμε το .eslintrc.cjs προσθέτοντας το αρχείο ομορφότερη στο επεκτείνει το array, πρέπει να βεβαιωθούμε ότι θα το τοποθετήσουμε στο last θέση για να υπερισχύσει άλλων ρυθμίσεων:

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 είναι εύκολη και απλή, ένας τρόπος είναι να εκτελέσετε το npx prettier --write . εντολή που θα μορφοποιήσει όλο τον κώδικα της εφαρμογής σας, ένας δεύτερος τρόπος είναι να το χρησιμοποιήσετε από τον επεξεργαστή σας, αυτό θα πάρει τα μέγιστα από το Prettier, είτε μέσω μιας συντόμευσης πληκτρολογίου είτε αυτόματα κάθε φορά που αποθηκεύετε ένα αρχείο. Όταν μια γραμμή έχει γίνει τόσο μεγάλη κατά την κωδικοποίηση που δεν χωράει στην οθόνη σας, απλά πατήστε ένα πλήκτρο και δείτε τη να τυλίγεται μαγικά σε πολλαπλές γραμμές! Ή όταν επικολλάτε κάποιον κώδικα και η εσοχή μπερδεύεται, αφήστε το Prettier να το διορθώσει για εσάς χωρίς να φύγετε από τον επεξεργαστή σας.

Αλλά και πάλι, τι γίνεται αν ένας από τους προγραμματιστές χρησιμοποιεί έναν επεξεργαστή που δεν υποστηρίζει το prettier και ξεχάσει να χρησιμοποιήσει το ομορφότερη εντολή, υπάρχει ένας τρόπος να διορθωθεί αυτό το πρόβλημα και αυτό είναι το θέμα του Husky ενότητα παρακάτω.

Husky για άγκιστρα Git

Husky σας βοηθάει να ρυθμίσετε τα git hooks για να κάνετε commit μηνύματα, να εκτελείτε δοκιμές, να κάνετε lint κώδικα, κλπ... όταν κάνετε commit ή push. Θα το χρησιμοποιήσουμε μαζί με το lint-staged για να αυτοματοποιήσουμε το linting και τη μορφοποίηση του κώδικα πριν από τη δέσμευση του κώδικα.

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

Αυτό θα δημιουργήσει ένα .husky φάκελο με ένα pre-commit αρχείο. Το επόμενο βήμα είναι να ενημερώσετε το package.json αρχείο για να ρυθμίσετε lint-staged εντολή και πείτε της να μορφοποιήσει οποιοδήποτε αλλαγμένο αρχείο στην τρέχουσα δέσμευση:

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

Τελευταίο βήμα είναι η ενημέρωση του pre-commit αρχείο για να ρυθμίσουμε το άγκιστρο μας για να εκτελέσουμε το χνούδι σε όλες τις εφαρμογές και μορφοποιήστε τα αλλαγμένα αρχεία με την εντολή lint-staged εντολή:

!/usr/bin/env sh

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

npm run lint
npx lint-staged
```

Ας κάνουμε κάποιο refactoring στην εφαρμογή μας για να δούμε πώς λειτουργούν όλα αυτά, θα δημιουργήσουμε ένα στοιχείο VideoPlayer.jsx και θα το χρησιμοποιήσουμε στο 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="Φέτα γκρέιπφρουτ πάνω σε μια στοίβα από άλλες φέτες"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Τώρα που είμαστε ευχαριστημένοι με τον κώδικά μας, ας δεσμεύσουμε τις αλλαγές μας και ας δούμε πώς πάει.

Τα σφάλματα και πάλι αυτή τη φορά φωνάζουν εξαιτίας της έλλειψης επικύρωσης των στηριγμάτων και όπως μπορείτε να δείτε η δέσμευσή μας δεν ήταν επιτυχής. Ας το διορθώσουμε αυτό, εγκαθιστώντας πρώτα το PropTypes npm i prop-types και την ενημέρωση του VideoPlayer συστατικό:

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

Αφού διορθώσαμε αυτά τα σφάλματα, η δέσμευσή μας ήταν επιτυχής μετά την εκτέλεση των εντολών linting και μορφοποίησης κώδικα. Όπως μπορείτε να δείτε με το Husky ουσιαστικά αυτοματοποιήσαμε το linting και τη μορφοποίηση με αυτό το άγκιστρο πριν από τη δέσμευση και αυτό θα αποφύγει κάθε ανεπιθύμητο κώδικα στη βάση του κώδικά μας και θα λύσει προβλήματα όπως ασυμβατότητες επεξεργαστών και το να ξεχνάμε να τρέξουμε αυτές τις εντολές.

Περίληψη

ESLint, Πιο όμορφο και Husky είναι σπουδαία εργαλεία που μας βοηθούν να διατηρήσουμε τον κώδικά μας. Συνδυασμένα μαζί μας παρέχουν μια εξαιρετική εμπειρία για τους προγραμματιστές και κάνουν τη συντήρηση του κώδικά μας ευκολότερη.

Μιλήσαμε για το linting και τη μορφοποίηση σε αυτό το άρθρο, αλλά τα διαθέσιμα εργαλεία και οι δυνατότητες είναι πολύ ευρύτερες, θα μπορούσατε να ρυθμίσετε κάποιες δοκιμές για να εκτελούνται σε ένα άγκιστρο προ-commit ή αν χρησιμοποιείτε Typescript, προσθέτοντας μια εντολή ελέγχου τύπου με την εντολή Husky για να παραλείψετε κάθε κώδικα που δεν έχει πληκτρολογηθεί στην εφαρμογή σας.

Διαβάστε περισσότερα:

Πλεονεκτήματα και μειονεκτήματα του Vue

Πώς να σκοτώσετε ένα έργο με κακές πρακτικές κωδικοποίησης

React: Συμβουλές και κόλπα