Prettier - NPM (Wie es für Entwickler funktioniert)

In der modernen Softwareentwicklung ist die Beibehaltung eines sauberen und konsistenten Kodierungsstils sowohl für die Lesbarkeit als auch für die Zusammenarbeit und die Wartbarkeit von entscheidender Bedeutung. Tools wieHübscher mit einem TypeScript-Symbol, das integrierte Typendeklarationen anzeigt, haben sich als unverzichtbare Hilfsmittel erwiesen, die die oft mühsame Aufgabe der Codeformatierung automatisieren. In diesem Artikel gehen wir auf die Feinheiten von Prettier ein, indem wir seine Funktionen, Vorteile, Integrationen und Best Practices untersuchen. Außerdem werden wir uns mit demIronPDFBibliothek zur PDF-Erstellung, um PDFs aus Website-URLs zu generieren.

Einführung in Prettier

Prettier ist ein meinungsstarker Code-Formatierer, der den Stil und die Formatierung Ihres Codes automatisch nach vordefinierten Regeln wie der maximalen Zeilenlänge anpasst. Es unterstützt verschiedene Programmiersprachen, darunter JavaScript, TypeScript, HTML, CSS, JSON und mehr, und ist damit vielseitig für verschiedene technische Stacks und Projekttypen einsetzbar. Ursprünglich von James Long entwickelt, hat Prettier in der Entwickler-Community aufgrund seiner robusten Funktionen und seiner Benutzerfreundlichkeit große Beachtung gefunden.

Hauptmerkmale und Vorteile

1. Konsistenter Code-Stil: Prettier erzwingt einen konsistenten Codierungsstil in Ihrer gesamten Codebasis, wodurch Debatten über Formatierungspräferenzen entfallen und ein einheitliches Erscheinungsbild des Codes sichergestellt wird, was zur Beschleunigung des Code-Review-Prozesses beiträgt.

2. Automatische Formatierung: Durch die Integration in Ihren Code-Editor oder Build-Prozess formatiert Prettier automatisch Ihren Code, einschließlich Wrapping-Code usw., während der Eingabe oder vor dem Commit, wodurch Entwickler wertvolle Zeit und Mühe sparen. Sie können diesen meinungsbildenden Code-Formatierer so konfigurieren, dass er beim Speichern von Code ausgeführt wird. Die Übersetzung darf nur in demselben Verzeichnis wie der Quellcode abgelegt werden.

3. Konfigurierbarkeit: Prettier ist zwar standardmäßig meinungsbildend, bietet aber ein gewisses Maß an Konfigurierbarkeit, um bestimmte Formatierungsregeln an die projektspezifischen Anforderungen anzupassen. Der Benutzer kann seine eigenen Regeln konfigurieren.

4. Sprachunterstützung: Die Software unterstützt von Haus aus eine Vielzahl von Programmiersprachen und -formaten und gewährleistet so die Kompatibilität mit verschiedenen Entwicklungsumgebungen.5. Codequalität: Die verbesserte Lesbarkeit des Codes führt zu einem besseren Verständnis und verringert die Wahrscheinlichkeit von Syntaxfehlern oder Bugs, die durch inkonsistente Formatierung verursacht werden.

Erste Schritte mit Prettier

Einrichtung

Um Prettier in Ihren Projekten zu verwenden, können Sie es über NPM oder yarn installieren:

npm install prettier --save-dev

oder

yarn add --dev prettier // installs latest version

Verwendung

• Befehlszeilenschnittstelle(CLI)**: Prettier bietet ein CLI-Tool zur manuellen Formatierung von Dateien oder zur Integration in Skripte für automatisierte Formatierungsaufgaben.
• Editor-Integration: Für gängige Editoren wie Visual Studio Code, Sublime Text, Atom und andere sind Plugins verfügbar, die eine Echtzeitformatierung während der Eingabe ermöglichen.
• Git-Haken: Richten Sie Prettier so ein, dass es vor Übertragungen mithilfe von Git Hooks ausgeführt wird, um sicherzustellen, dass alle Codeänderungen den festgelegten Formatierungsregeln entsprechen.

Integrationen und Ökosystem

Prettier lässt sich nahtlos in verschiedene Entwicklungswerkzeuge und Arbeitsabläufe integrieren, was seinen Nutzen und seine Akzeptanz unter Entwicklern erhöht:

• IDE-Plugins: Lässt sich in IDEs und Texteditoren integrieren, um Code im Handumdrehen zu formatieren, die Produktivität der Entwickler zu steigern und Codierungsstandards einzuhalten.
• Build-Systeme: Einbindung in Build-Pipelines und kontinuierliche Integration(CI) arbeitsabläufe, um eine konsistente Code-Formatierung in allen Team-Projekten zu gewährleisten.
• Versionskontrolle: Arbeitet harmonisch mit Versionskontrollsystemen wie Git zusammen und stellt sicher, dass der formatierte Code während der Zusammenarbeit konsistent beibehalten wird.

Bewährte Praktiken für Prettier

Um die Vorteile von Prettier zu maximieren und eine reibungslose Integration in Ihren Entwicklungsworkflow zu gewährleisten, sollten Sie die folgenden Best Practices beachten:

• Standardeinstellungen verwenden: Verwenden Sie anfangs die Standardeinstellungen von Prettier, um die Konsistenz in Ihrer Codebasis ohne unnötige Anpassungen zu fördern.
• Versionierung: Prettier wird regelmäßig aktualisiert, um neue Funktionen, Fehlerkorrekturen und verbesserte Sprachunterstützung zu nutzen.
• Konfiguration: Feinabstimmung der Prettier-Konfiguration zur Anpassung an projektspezifische Konventionen oder Teampräferenzen unter Wahrung der Konsistenz.
• Einführen und übernehmen: Ermutigen Sie die Teammitglieder, Prettier zu übernehmen, und informieren Sie sie über dessen Vorteile, um einen einheitlichen Ansatz für die Codeformatierung zu fördern.

Einführung in IronPDF

IronPDF ist eine beliebte Bibliothek zur PDF-Erzeugung, die zum Erstellen, Bearbeiten und Konvertieren von PDF-Dokumenten verwendet wird. Das IronPDF NPM-Paket wurde speziell für Node.js-Anwendungen entwickelt. Im Folgenden finden Sie einige wichtige Funktionen und Details über das NPM-Paket IronPDF:

Wesentliche Merkmale

Konvertierung von HTML in PDF

Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

Konvertierung von URL in PDF

Generieren Sie PDFs direkt aus URLs, so dass Sie den Inhalt von Webseiten erfassen und programmgesteuert als PDF-Dateien speichern können.

PDF-Bearbeitung

Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Aufteilen von Dokumenten und vieles mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

Hochwertiger Output

Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine breite Palette von Entwicklungsumgebungen.

Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Einrichtung

Um das NPM-Paket IronPDF zu installieren, verwenden Sie den folgenden Befehl:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

PDF-Dokument mit IronPDF generieren und Prettier-NPM-Paket verwenden

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben) mit Hilfe des folgenden Befehls: Siehehier.

npx create-next-app@latest prettier-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd prettier-pdf

Installieren Sie die erforderlichen Pakete:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D prettier

Erstellen Sie eine leere Konfigurationsdatei, damit Editoren und andere Tools wissen, dass Sie Prettier verwenden:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Erstellen Sie eine.prettierignore datei, die der Prettier CLI und den Editoren mitteilt, welche Dateien nicht formatiert werden sollen. Hier ist ein Beispiel:

# Ignore artifacts:
build
coverage
# Ignore all HTML files:
**/*.html

Eine PDF-Datei erstellen

Lassen Sie uns nun ein einfaches Beispiel für die Erstellung einer PDF-Datei mit IronPDF erstellen.

PDF-Erzeugungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn ein Benutzer ein PDF erzeugen möchte. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Inhalt hinzu.

IronPDF benötigt einen Lizenzschlüssel, den Sie von derlizenzseite und fügen Sie ihn in den unten stehenden Code ein.

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

Ändern Sie nun den index.js-Code wie unten beschrieben, um Prettier und IronPDF zu verwenden.

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React, { useState } from 'react';
export default function PrettierDemo() {
    const [text, setText] = useState("");
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+text);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
      setText(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Prettier and Generate PDF Using IronPDF</h1>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React, { useState } from 'react';
export default function PrettierDemo() {
    const [text, setText] = useState("");
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+text);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
      setText(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Prettier and Generate PDF Using IronPDF</h1>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

Formatieren Sie den Code mit yarn prettier.

yarn prettier . --write

Führen Sie nun die Anwendung mit dem Befehl aus:

yarn dev

Ausgabe

PDF

IronPDF-Lizenz

IronPDF npm-Paket läuft mit dem Lizenzschlüssel. IronPDF bietet einekostenlose Testversion lizenzschlüssel, damit die Benutzer die umfangreichen Funktionen vor dem Kauf testen können.

Geben Sie hier den Lizenzschlüssel ein:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

Schlussfolgerung

Prettier ist ein Eckpfeiler in der modernen Softwareentwicklung, der die Formatierung von Code mit Präzision und Effizienz vereinfacht. Seine Fähigkeit, konsistente Codierungsstile in verschiedenen Sprachen durchzusetzen und sich nahtlos in bestehende Arbeitsabläufe zu integrieren, macht es für Teams, die saubere, wartbare Codebasen anstreben, unverzichtbar. Durch die Automatisierung von Codeformatierungsaufgaben ermöglicht Prettier den Entwicklern, sich mehr auf das Schreiben von qualitativ hochwertigem Code zu konzentrieren und weniger auf stilistische Kleinigkeiten oder Code-Reviews, was letztendlich die Produktivität und die Zusammenarbeit in Softwareprojekten verbessert. Setzen Sie Prettier ein, um die Qualität Ihres Codes zu verbessern und Ihren Entwicklungsprozess zu optimieren.

IronPDF versetzt Node.js-Entwickler in die Lage, die Möglichkeiten der PDF-Verarbeitung in ihren Anwendungen zu verbessern, und bietet eine beispiellose Funktionalität, Zuverlässigkeit und Leistung. Durch die Nutzung der fortschrittlichen Funktionen von IronPDF für die Generierung, Konvertierung und Bearbeitung von PDF-Dokumenten können Entwickler Dokumenten-Workflows rationalisieren, die Benutzerfreundlichkeit verbessern und verschiedene Geschäftsanforderungen zuverlässig erfüllen. Nutzen Sie IronPDF, um das volle Potenzial der PDF-Verarbeitung in Ihren Node.js-Projekten auszuschöpfen und mühelos professionelle Dokumentenlösungen bereitzustellen.