Βελτιστοποίηση Εισαγωγών TypeScript: Διαμόρφωση Prettier και ESLint για μορφή πολλαπλών γραμμών

Βελτιστοποίηση δηλώσεων εισαγωγής στο TypeScript

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

Για να διατηρήσετε τον κώδικά σας τακτοποιημένο και ευανάγνωστο, είναι σημαντικό να αυτοματοποιήσετε τη μορφοποίηση αυτών των εισαγωγών. Εργαλεία όπως Ομορφότερος και ESLint μπορεί να προσαρμοστεί ώστε να χωρίζει αυτόματα μεγάλες δηλώσεις εισαγωγής σε πολλές γραμμές. Αυτό διασφαλίζει ότι ο κώδικάς σας παραμένει καθαρός και συνεπής, τηρώντας τους κανόνες μορφοποίησης που έχετε ρυθμίσει.

Ωστόσο, η ρύθμιση παραμέτρων αυτών των εργαλείων για αυτόματη διαμόρφωση των δηλώσεων εισαγωγής όπως επιθυμείτε μπορεί να είναι δύσκολη. Ενώ οι προεπιλεγμένες ρυθμίσεις τόσο του Prettier όσο και του ESLint χειρίζονται πολλά ζητήματα μορφοποίησης, συχνά υπολείπονται όταν πρόκειται να αναλύσουμε μεγάλες δηλώσεις εισαγωγής σε πολλές γραμμές.

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

Διαμόρφωση Prettier και ESLint για Εισαγωγές πολλαπλών γραμμών στο TypeScript

Ο κύριος στόχος των παραπάνω σεναρίων είναι η διαμόρφωση Ομορφότερος και ESLint για να μορφοποιήσετε αυτόματα μεγάλες δηλώσεις εισαγωγής σε πολλές γραμμές σε ένα έργο TypeScript. Η διαμόρφωση Prettier έχει ρυθμιστεί για να ορίζει στυλ κωδικοποίησης, όπως μεμονωμένα εισαγωγικά και κόμματα, και να διαχειρίζεται τον τρόπο με τον οποίο πρέπει να αναδιπλώνεται ο κώδικας χρησιμοποιώντας το Πλάτος εκτύπωσης κανόνας. Όταν η γραμμή υπερβαίνει το καθορισμένο πλάτος (σε αυτήν την περίπτωση, 80 ή 120 χαρακτήρες), ο Prettier θα μορφοποιήσει αυτόματα τον κώδικα για να τον κάνει πιο ευανάγνωστο. Με τη χρήση του πιο όμορφη-πρόσθετη οργάνωση-εισαγωγές plugin, διασφαλίζουμε ότι οι δηλώσεις εισαγωγής χωρίζονται και ταξινομούνται λογικά.

Στη διαμόρφωση ESLint, το εισαγωγή/παραγγελία κανόνας από το eslint-plugin-import Η προσθήκη είναι απαραίτητη για τον έλεγχο του τρόπου οργάνωσης των εισαγωγών. Ο στόχος εδώ είναι να επιβληθεί μια συνεπής δομή εισαγωγής, όπου οι εισαγωγές από διαφορετικές ομάδες (όπως ενσωματωμένες μονάδες, εξωτερικά πακέτα και εσωτερικές μονάδες) διαχωρίζονται με νέες γραμμές. Επιπλέον, οι εισαγωγές εντός της ίδιας ομάδας αλφαβητίζονται για να βελτιωθεί η αναγνωσιμότητα. Αυτοί οι κανόνες αποτρέπουν την ακαταστασία των εισαγωγών, ειδικά όταν πρόκειται για μεγάλο αριθμό εισαγόμενων μελών από πολλά αρχεία.

Μια άλλη σημαντική πτυχή της εγκατάστασης ESLint είναι η νέες γραμμές-μεταξύ επιλογή, η οποία διασφαλίζει ότι κάθε ομάδα εισαγωγής διαχωρίζεται από μια κενή γραμμή. Αυτό κάνει τον κώδικα πιο οργανωμένο οπτικά, ειδικά σε μεγαλύτερες βάσεις κωδικών. Σε συνδυασμό με το κατατάσσω αλφαβητικώς κανόνα, ολόκληρο το μπλοκ εισαγωγής γίνεται δομημένο και ευκολότερο στη συντήρηση. Όταν ο κώδικας μορφοποιείται κατά την αποθήκευση στο Visual Studio Code, αυτές οι ρυθμίσεις εφαρμόζονται αυτόματα, διασφαλίζοντας συνεπή μορφοποίηση εισαγωγής σε ολόκληρο το έργο χωρίς μη αυτόματες προσαρμογές.

Τέλος, η δοκιμή αυτής της διαμόρφωσης είναι ζωτικής σημασίας για να διασφαλιστεί ότι λειτουργεί σωστά. Ο Αστείο Οι δοκιμές μονάδας έχουν σχεδιαστεί για να ελέγχουν εάν οι διαμορφώσεις Prettier και ESLint χειρίζονται τον διαχωρισμό και τη μορφοποίηση εισαγωγής όπως αναμένεται. Για παράδειγμα, όταν παρέχεται μια εκτενής δήλωση εισαγωγής, η δοκιμή επαληθεύει εάν είναι σωστά χωρισμένη σε πολλές γραμμές. Αυτή η προσέγγιση επιτρέπει στους προγραμματιστές να αυτοματοποιούν τη δοκιμή των κανόνων μορφοποίησής τους, διασφαλίζοντας ότι τυχόν μελλοντικές αλλαγές κώδικα θα συμμορφώνονται με τις ίδιες οδηγίες δομής εισαγωγής.

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  plugins: ['prettier-plugin-organize-imports'],
}
// Prettier configuration setup for import splitting

module.exports = {
  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
  "rules": {
    "import/order": [
      "error", {
        "groups": ["builtin", "external", "internal"],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }],
    "max-len": ["error", { "code": 80 }],
  }
}
// ESLint rule setup to organize imports into multiple lines and ensure alphabetical order

import {
  longFunctionNameOne,
  longFunctionNameTwo,
  longFunctionNameThree
} from '@example/long-module-name';

import {
  shortFunctionNameOne,
  shortFunctionNameTwo
} from '@example/short-module-name';
// Example of formatted import statements following the configured rules

const eslint = require('eslint');
const prettier = require('prettier');
const { describe, it } = require('@jest/globals');

describe('Import Formatting', () => {
  it('should split long imports into multiple lines', () => {
    const code = `import { a, b, c, d } from '@example/package';`;
    const formatted = prettier.format(code, { printWidth: 80 });
    expect(formatted).toMatch(/import { a, b }/);
  });
});
// Unit test to check if long imports are split into multiple lines using Jest

Βελτίωση της αναγνωσιμότητας κώδικα με πιο όμορφη και μορφοποίηση εισαγωγής ESLint

Όταν ασχολούμαστε με μεγαλύτερες βάσεις κωδικών, η διατήρηση συνεπών δομών εισαγωγής καθίσταται ζωτικής σημασίας για τη βελτίωση τόσο της αναγνωσιμότητας κώδικα όσο και της συνεργασίας της ομάδας. Ένα κοινό πρόβλημα που αντιμετωπίζουν οι προγραμματιστές είναι το πόσο καιρό οι δηλώσεις εισαγωγής μπορούν να γεμίσουν το επάνω μέρος του αρχείου, ειδικά όταν περιέχουν πολλά στοιχεία από μία μονάδα. Αυτό είναι όπου εργαλεία όπως Ομορφότερος και ESLint μπαίνουν στο παιχνίδι, επιτρέποντάς σας να αυτοματοποιήσετε τον διαχωρισμό των εισαγωγών σε πολλές γραμμές. Διασφάλιση ότι οι δηλώσεις εισαγωγής τηρούν ένα καθορισμένο πλάτος, συνήθως με βάση το Πλάτος εκτύπωσης ρύθμιση, βοηθά στην αποτροπή της οριζόντιας κύλισης και διατηρεί τον κώδικα εύκολο στη σάρωση.

Μια άλλη κρίσιμη πτυχή είναι το οργανωτικό πρότυπο των ίδιων των εισαγωγών. Χρησιμοποιώντας το εισαγωγή/παραγγελία κανόνας που παρέχεται από το ESLint, μπορείτε να ομαδοποιήσετε τις εισαγωγές με βάση την προέλευσή τους: ενσωματωμένες βιβλιοθήκες, εξαρτήσεις τρίτων ή εσωτερικές μονάδες. Αυτές οι ομάδες μπορούν να διαχωριστούν με νέες γραμμές, καθιστώντας ευκολότερο για τους προγραμματιστές να εντοπίζουν γρήγορα τις εξαρτήσεις. Αυτή η μέθοδος προωθεί δομημένες εισαγωγές, οι οποίες, όταν συνδυάζονται με αλφαβητική ταξινόμηση μέσω του κατατάσσω αλφαβητικώς επιλογή, ενισχύει περαιτέρω τη σαφήνεια και τη συνέπεια σε όλη τη βάση κώδικα.

Επιπλέον, οι προγραμματιστές μπορεί να θέλουν να αξιοποιήσουν εργαλεία όπως πιο όμορφη-πρόσθετη οργάνωση-εισαγωγές να διασφαλιστεί ότι οι εισαγωγές όχι μόνο κατανέμονται σωστά αλλά και αναδιατάσσονται λογικά. Αυτά τα εργαλεία επιβάλλουν αυτόματα την επιθυμητή δομή εισαγωγής κάθε φορά που το αρχείο αποθηκεύεται σε ένα πρόγραμμα επεξεργασίας όπως το Visual Studio Code. Αυτό διασφαλίζει ότι οι προγραμματιστές δεν χρειάζεται να προσαρμόζουν χειροκίνητα τις δηλώσεις εισαγωγής και μπορούν να επικεντρωθούν στη σύνταξη καθαρότερου και πιο διατηρήσιμου κώδικα.