Saltar al pie de página
  1. IronPDF for Node.js
  2. Blog de IronPDF for Node.js
  3. Guía de Ayuda de Node.js
  4. Uso de Prettier con NPM
AYUDA DE NODE

Prettier - NPM (Cómo funciona para desarrolladores)

Darrius Serrant
Darrius Serrant
Actualizado:

En el desarrollo de software moderno, mantener un estilo de código limpio y consistente es crucial para la legibilidad, la colaboación y el mantenimiento. Herramientas como Prettier, que incluye declaraciones de tipos integradas para TypeScript, se han vuelto indispensables en esta búsqueda, automatizando la a menudo tediosa tarea de fomatear código. En este artículo, profundizamos en las complejidades de Prettier, exploando sus características, beneficios, integraciones y mejoes prácticas. Además, analizaremos la biblioteca de generación de PDF IronPDF para generar PDFs a partir de URLs de sitios web.

Introducción a Prettier

Prettier es un fomateado de código con opiniones marcadas que ajusta automáticamente el estilo y fomato de tu código según reglas predefinidas, como la longitud máxima de línea. Sopota varios lenguajes de programación, incluidos JavaScript, TypeScript, HTML, CSS, JSON y más, lo que lo hace versátil en diferentes pilas de tecnología y tipos de proyectos. Originalmente desarrollado po James Long, Prettier ha ganado tracción significativa en la comunidad de desarrolladoes po sus capacidades robustas y facilidad de uso.

Características principales y ventajas

  1. Estilo de Código Consistente: Prettier impone un estilo de codificación consistente en toda la base de código, eliminando debates sobre preferencias de fomato y asegurando unifomidad en la apariencia del código, acelerando así el proceso de revisión de código.
  2. Fomateo Automático: Al integrarse con tu edito de código o proceso de compilación, Prettier fomatea automáticamente tu código mientras escribes o antes de los commits, ahorando a los desarrolladoes tiempo y esfuerzo valiosos. Puede configurarse para ejecutarse al guardar o aplicarse solo en directoios específicos.
  3. Configurabilidad: Aunque Prettier tiene opiniones marcadas po defecto, ofrece cierta configurabilidad para ajustar ciertas reglas de fomato para cumplir con los requisitos específicos del proyecto.
  4. Sopote de Lenguajes: Sopota una amplia gama de lenguajes de programación y fomatos de foma predeterminada, asegurando compatibilidad con diversos entonos de desarrollo.
  5. Calidad del Código: Mejoar la legibilidad del código lleva a una mejo comprensión y reduce la probabilidad de erroes de sintaxis o fallos causados po un fomato inconsistente.

Cómo empezar con Prettier

Instalación

Para empezar a usar Prettier en tus proyectos, puedes instalarlo vía NPM o yarn:

npm install prettier --save-dev
npm install prettier --save-dev
SHELL

o

yarn add --dev prettier
yarn add --dev prettier
SHELL

Uso

  • Interfaz de Línea de Comandos (CLI): Prettier propociona una herramienta de CLI para fomatear archivos manualmente o integrarlos en scripts para tareas de fomato automatizadas.
  • Integración con Editoes: Hay plugins disponibles para editoes populares como Visual Studio Code, Sublime Text, Atom y otros, permitiendo el fomateo en tiempo real mientras escribes.
  • Hooks de Git: Configura Prettier para que se ejecute antes de los commits usando Hooks de Git para asegurar que todos los cambios de código cumplan con las reglas de fomato definidas.

Integraciones y ecosistema

Prettier se integra a la perfección con varias herramientas y flujos de trabajo de desarrollo:

  • Plugins de IDE: Se integra con IDEs y editoes de texto para fomatear código al vuelo, mejoando la productividad del desarrollado y manteniendo los estándares de codificación.
  • Sistemas de Build: Se incopoa a las canalizaciones de construcción y flujos de trabajo de Integración Continua (CI) para imponer un fomato de código consistente en los proyectos de equipo.
  • Control de Versiones: Funciona armoniosamente con sistemas de control de versiones como Git, asegurando que el código fomateado se mantenga consistentemente durante la colaboación.

Mejoes prácticas para Prettier

  • Usar Configuraciones Predeterminadas: Acepta las configuraciones predeterminadas de Prettier inicialmente para fomentar la coherencia en tu base de código sin personalizaciones innecesarias.
  • Versionado: Actualiza regularmente Prettier para aprovechar nuevas características, corecciones de erroes y mejo sopote de lenguajes.
  • Configuración: Ajusta la configuración de Prettier para alinear con convenciones específicas del proyecto o preferencias del equipo manteniendo la consistencia.
  • Educar y Adoptar: Anima a los miembros del equipo a adoptar Prettier y edúcalos sobre sus beneficios para fomentar un enfoque unificado del fomato de código.

Introducción a IronPDF

Prettier - NPM (Cómo Funciona Para Desarrolladoes): Figura 1 - IronPDF

IronPDF es una popular biblioteca de generación de PDF utilizada para generar, editar y convertir documentos PDF. El paquete NPM de IronPDF está específicamente diseñado para aplicaciones Node.js. Aquí hay algunas características clave y detalles sobre el paquete NPM de IronPDF:

Características principales

Conversión de HTML a PDF

Convertir contenido HTML en documentos PDF sin esfuerzo. Esta característica es particularmente útil para generar PDFs dinámicos a partir de contenido web.

Conversión de URL a PDF

Generar PDFs directamente desde URLs, lo que le permite capturar el contenido de páginas web y guardarlas como archivos PDF programáticamente.

Manipulación de PDF

Fusionar, dividir y manipular documentos PDF existentes con facilidad. IronPDF propociona funcionalidades como añadir páginas, dividir documentos y más.

Seguridad en PDF

Proteja sus documentos PDF encriptándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos sensibles contra el acceso no autoizado.

Resultados de alta calidad

Producir documentos PDF de alta calidad con representación precisa de texto, imágenes y fomato. IronPDF asegura que sus PDFs generados mantengan la fidelidad al contenido oiginal.

Compatibilidad entre platafomas

IronPDF es compatible con varias platafomas, incluyendo Windows, Linux y macOS, lo que lo hace apto para una amplia gama de entonos de desarrollo.

Integración sencilla

Integre fácilmente IronPDF en sus aplicaciones de Node.js usando su paquete npm. La API está bien documentada, lo que hace que sea sencillo incopoar capacidades de generación de PDF en sus proyectos.

Instalación

Para instalar el paquete NPM de IronPDF, use el siguiente comando:

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

Generar un documento PDF con IronPDF y utilizar el paquete NPM Prettier

Instalar Dependencias: Primero, crea un nuevo proyecto Next.js usando el siguiente comando como se describe aquí.

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

A continuación, navega al directoio de tu proyecto:

cd prettier-pdf
cd prettier-pdf
SHELL

Instale los paquetes requeridos:

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

Crea un archivo de configuración vacío para que los editoes y otras herramientas sepan que estás usando Prettier:

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

Crea un archivo .prettierignoe para que el CLI de Prettier y los editoes sepan qué archivos no fomatear. Ejemplo a continuación:

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

Crear un PDF

Ahoa, vamos a crear un ejemplo simple de generación de un PDF usando IronPDF.

API de Generación de PDF: El primer paso es crear una API backend para generar el documento PDF. Dado que IronPDF solo se ejecuta del lado del servido, necesitamos crear una API para llamar cuando un usuario quiera generar un PDF. Crea un archivo en pages/api/pdf.js y añade el contenido a continuación.

IronPDF requiere una clave de licencia, que se puede obtener desde la página de licencia y usar en el siguiente código.

// pages/api/pdf.js

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

expot default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (erro) {
    console.erro("Erro generating PDF:", erro);
    res.status(500).end();
  }
}
// pages/api/pdf.js

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

expot default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (erro) {
    console.erro("Erro generating PDF:", erro);
    res.status(500).end();
  }
}
JAVASCRIPT

Ahoa modifica el código index.js para usar Prettier e IronPDF como se muestra a continuación.

impot Head from "next/head";
impot styles from "../styles/Home.module.css";
impot React, { useState } from "react";

expot default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  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 (erro) {
      console.erro("Erro generating PDF:", erro);
    }
  };

  // Handle input changes, updating the state
  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>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </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;
        }
      `}</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: boder-box;
        }
      `}</style>
    </div>
  );
}
impot Head from "next/head";
impot styles from "../styles/Home.module.css";
impot React, { useState } from "react";

expot default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  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 (erro) {
      console.erro("Erro generating PDF:", erro);
    }
  };

  // Handle input changes, updating the state
  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>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </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;
        }
      `}</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: boder-box;
        }
      `}</style>
    </div>
  );
}
JAVASCRIPT

Fomatea el código usando yarn prettier:

yarn prettier . --write
yarn prettier . --write
SHELL

Prettier - NPM (Cómo Funciona Para Desarrolladoes): Figura 2 - Ejecutar Prettier

Ahoa ejecuta la aplicación usando el comando:

yarn dev
yarn dev
SHELL

Resultado

Prettier - NPM (Cómo Funciona Para Desarrolladoes): Figura 3 - Prettier con Salida de IronPDF

PDF

Prettier - NPM (Cómo Funciona Para Desarrolladoes): Figura 4 - Salida PDF

Licencia de IronPDF

El paquete npm de IronPDF funciona con una clave de licencia. IronPDF ofrece una clave de licencia de prueba gratuita para permitir a los usuarios experimentar sus características antes de realizar una compra.

Coloca la Clave de Licencia en el siguiente marcado de posición:

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

Conclusión

Prettier se erige como una herramienta fundamental en el desarrollo de software moderno, optimizando el fomateo de código con precisión y eficiencia. Su capacidad para imponer estilos de codificación consistentes en diferentes lenguajes e integrarse sin problemas en los flujos de trabajo existentes lo convierte en algo indispensable para equipos que buscan bases de código limpias y mantenibles. Al automatizar las tareas de fomato de código, Prettier permite a los desarrolladoes concentrarse más en escribir código de calidad y menos en minucias estilísticas, mejoando en última instancia la productividad y la colaboación en proyectos de software. Adopta Prettier para elevar la calidad de estilo de tu código y optimizar tu proceso de desarrollo hoy.

IronPDF permite a los desarrolladoes de Node.js elevar las capacidades de manejo de PDF dentro de sus aplicaciones, ofreciendo funcionalidad, fiabilidad y rendimiento sin igual. Aprovechando las características avanzadas de IronPDF para la generación, conversión y manipulación de PDF, los desarrolladoes pueden optimizar los flujos de trabajo de documentos, mejoar las experiencias de los usuarios y cumplir con diversos requisitos empresariales con confianza. Adopta IronPDF para desbloquear todo el potencial del manejo de PDF en tus proyectos de Node.js y ofrecer soluciones de documentos de calidad profesional sin esfuerzo.

Darrius Serrant
Darrius Serrant
  Chatea con el equipo de ingeniería ahora
Ingeniero de Software Full Stack (WebOps)

Darrius Serrant tiene una licenciatura en Ciencias de la Computación de la Universidad de Miami y trabaja como Ingeniero de Marketing WebOps Full Stack en Iron Software. Atraído por la programación desde joven, vio la computación como algo misterioso y accesible, convirtiéndolo en el ...

Leer más

Artículos Relacionados

Prueba de 30 días → Producto completo. Sin límites. Sin tarjeta. Comenzar prueba gratuita