Prettier - NPM（開發者的使用方法）
在現代軟體開發中，保持程式碼風格簡潔一致對於提高程式碼的可讀性、協作性和可維護性至關重要。 像Prettier這樣的工具，包括 TypeScript 的內建類型聲明，在這過程中變得不可或缺，它可以自動完成通常很繁瑣的程式碼格式化任務。 在本文中，我們將深入探討 Prettier 的複雜性，探索其功能、優勢、整合和最佳實踐。 此外，我們還將研究IronPDF PDF 生成庫，以便根據網站 URL 產生 PDF。
Prettier簡介
Prettier 是一款具有預設規則的程式碼格式化工具，它可以根據預先定義的規則（例如最大行長度）自動調整程式碼的樣式和格式。 它支援多種程式語言，包括 JavaScript、TypeScript、HTML、CSS、JSON 等，使其能夠靈活應用於不同的技術堆疊和專案類型。 Prettier 最初由 James Long 開發，憑藉其強大的功能和易用性，在開發者社群中獲得了廣泛的認可。
主要特點和優勢
1.一致的程式碼風格：Prettier 在整個程式碼庫中強制執行一致的編碼風格，消除了關於格式偏好的爭論，並確保程式碼外觀的統一性，從而加快了程式碼審查過程。 2.自動格式化：透過與程式碼編輯器或建置流程集成，Prettier 會在您鍵入時或提交之前自動格式化您的程式碼，從而節省開發人員寶貴的時間和精力。 可以配置為在儲存時運行，或僅套用於特定目錄。 3.可配置性：雖然 Prettier 預設具有一定的規範性，但它提供了一些可配置性，可以調整某些格式規則以適應專案的特定要求。 4.語言支援：它開箱即用地支援多種程式語言和格式，確保與各種開發環境相容。 5.程式碼品質：提高程式碼可讀性可以提高理解力，並降低因格式不一致而導致的語法錯誤或錯誤的可能性。
Prettier入門指南
安裝
要開始在專案中使用 Prettier，您可以透過 NPM 或 yarn 安裝它：
npm install prettier --save-devnpm install prettier --save-dev或
yarn add --dev prettieryarn add --dev prettier用途
-命令列介面 (CLI) ：Prettier 提供了一個 CLI 工具，用於手動格式化檔案或將其整合到腳本中以執行自動化格式化任務。 -編輯器整合：我們為 Visual Studio Code、Sublime Text、Atom 等流行編輯器提供插件，讓您在輸入時實現即時格式設定。
- Git Hooks ：使用 Git Hooks 設定 Prettier 在提交之前運行，以確保所有程式碼變更都符合定義的格式規則。
整合與生態系統
Prettier 可與各種開發工具和工作流程無縫整合：
- IDE 外掛程式：與 IDE 和文字編輯器集成，可即時格式化程式碼，提高開發人員的生產力並維護編碼標準。 -建置系統：將其納入建置管道和持續整合 (CI) 工作流程中，以強制團隊專案之間程式碼格式的一致性。 -版本控制：與 Git 等版本控制系統和諧運作，確保在整個協作過程中始終保持格式化的程式碼。
Prettier 的最佳實踐
-使用預設值：最初採用 Prettier 的預設設置，以在程式碼庫中保持一致性，而無需進行不必要的自訂。 -版本控制：定期更新 Prettier，以利用新功能、錯誤修復和改進的語言支援。 -配置：微調 Prettier 的配置，使其符合專案特定的約定或團隊偏好，同時保持一致性。 -教育與推廣：鼓勵團隊成員採用 Prettier，並向他們普及其優勢，以促進程式碼格式化的統一方法。
IronPDF 簡介
! Prettier - NPM（開發者使用方法）：圖 1 - IronPDF
IronPDF是一個流行的 PDF 生成庫，用於生成、編輯和轉換 PDF 文件。 IronPDF NPM 套件是專門為 Node.js 應用程式設計的。 以下是 IronPDF NPM 套件的一些主要功能和詳細資訊：
主要功能
HTML 至 PDF 轉換
輕鬆將HTML內容轉換為PDF文件。 此功能對於從網頁內容產生動態 PDF 特別有用。
URL 轉 PDF
直接從 URL 產生 PDF，讓您可以捕獲網頁內容並以程式設計方式將其儲存為 PDF 檔案。
PDF 處理
輕鬆合併、分割和操作現有 PDF 文件。 IronPDF 提供諸如追加頁面、分割文件等功能。
PDF安全性
使用密碼加密或套用數位簽章來保護您的 PDF 文件。 IronPDF 提供多種選項，保護您的敏感文件免受未經授權的存取。
高品質輸出
產生高品質的 PDF 文檔，精確呈現文字、圖像和格式。 IronPDF 可確保您產生的 PDF 檔案與原始內容一致。
跨平台相容性
IronPDF 與包括 Windows、Linux 和 macOS 在內的各種平台相容，使其適用於各種開發環境。
簡單集成
使用 IronPDF 的 npm 包，即可輕鬆整合到您的 Node.js 應用程式中。 該 API 文件齊全，可以輕鬆地將 PDF 生成功能整合到您的專案中。
安裝
若要安裝 IronPDF NPM 包，請使用以下命令：
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64使用 IronPDF 產生 PDF 文檔，並使用 Prettier NPM 套件
安裝依賴項：首先，請按照此處的說明，使用以下命令建立新的 Next.js 專案。
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"接下來，導航到您的專案目錄：
cd prettier-pdfcd prettier-pdf安裝所需軟體包：
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D prettieryarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D prettier建立一個空的設定文件，讓編輯器和其他工具知道你正在使用 Prettier：
node --eval "require('fs').writeFileSync('.prettierrc','{}\n')"node --eval "require('fs').writeFileSync('.prettierrc','{}\n')"建立一個.prettierign或e文件，讓 Prettier CLI 和編輯器知道哪些文件_不_需要格式化。 以下是一個範例：
# Ign或e artifacts:
build
coverage
# Ign或e all HTML files:
**/*.html建立 PDF
現在，讓我們建立一個使用 IronPDF 產生 PDF 的簡單範例。
PDF 產生 API ：第一步是建立後端 API 來產生 PDF 文件。 由於 IronPDF 只能在伺服器端運行，我們需要建立一個 API，以便在使用者想要產生 PDF 時呼叫。 在pages/api/pdf.js建立文件，並新增以下內容。
IronPDF 需要許可證密鑰，可以從許可證頁面獲取，並在以下程式碼中使用。
// pages/api/pdf.js
imp或t { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
exp或t 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 (err或) {
console.err或("Err或 generating PDF:", err或);
res.status(500).end();
}
}// pages/api/pdf.js
imp或t { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
exp或t 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 (err或) {
console.err或("Err或 generating PDF:", err或);
res.status(500).end();
}
}現在修改index.js程式碼，使其使用 Prettier 和 IronPDF，如下所示。
imp或t Head from "next/head";
imp或t styles from "../styles/Home.module.css";
imp或t React, { useState } from "react";
exp或t 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 (err或) {
console.err或("Err或 generating PDF:", err或);
}
};
// 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: b或der-box;
}
`}</style>
</div>
);
}imp或t Head from "next/head";
imp或t styles from "../styles/Home.module.css";
imp或t React, { useState } from "react";
exp或t 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 (err或) {
console.err或("Err或 generating PDF:", err或);
}
};
// 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: b或der-box;
}
`}</style>
</div>
);
}使用 yarn prettier 格式化代碼：
yarn prettier . --writeyarn prettier . --writePrettier - NPM（開發者使用指南）：圖 2 - 運行 Prettier
現在使用以下命令運行應用程式：
yarn devyarn dev輸出
IronPDF 授權。
IronPDF npm 套件需要許可證密鑰才能運作。 IronPDF 提供免費試用許可證金鑰，讓使用者可以在購買前體驗其功能。
請將許可證密鑰填寫在以下佔位符中：
imp或t { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";imp或t { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";結論
Prettier 是現代軟體開發中的基石工具，它能夠精確且有效率地簡化程式碼格式化。 它能夠跨不同語言強制執行一致的編碼風格，並無縫整合到現有工作流程中，這使得它成為追求簡潔、易於維護的程式碼庫的團隊不可或缺的工具。 Prettier 透過自動化程式碼格式化任務，讓開發人員更專注於編寫高品質的程式碼，而不是專注於樣式細節，最終提高軟體專案的生產力和協作效率。 立即使用 Prettier 提升程式碼風格質量，簡化開發流程。
IronPDF 讓 Node.js 開發人員能夠提升其應用程式中的 PDF 處理能力，提供無與倫比的功能、可靠性和效能。 透過利用 IronPDF 的高級 PDF 產生、轉換和操作功能，開發人員可以簡化文件工作流程，增強使用者體驗，並自信地滿足各種業務需求。 使用 IronPDF，即可在 Node.js 專案中充分發揮 PDF 處理的潛力，輕鬆交付專業級文件解決方案。
免費開始
免費開始
預訂免費直播演示
無需信用卡或建立帳號
