1. IronPDF for Node.js
  2. IronPDF for Node.js 部落格
  3. 節點幫助
  4. Prettier NPM
節點幫助

Prettier - NPM（對開發者的運作方式）

Darrius Serrant
Darrius Serrant
2024年10月24日
分享:

在現代軟體開發中，保持乾淨和一致的程式碼風格對於可讀性、協作及維護性至關重要。 像 Prettier 這樣的工具（帶有表示內建類型宣告的 TypeScript 圖示）已成為這項工作的不可或缺輔助手段，自動化了通常單調乏味的代碼格式化任務。 在本文中，我們深入探討 Prettier 的複雜性，研究其功能、優勢、整合和最佳實踐。 此外，我們將研究IronPDF PDF生成庫，以從網站URL生成PDF。

Prettier 介紹

Prettier 是一個具有明確風格的代碼格式化工具，會根據預先定義的規則（例如最大行長度）自動調整您的代碼風格和格式。 它支持多種程式語言，包括 JavaScript、TypeScript、HTML、CSS、JSON 等，使其在不同的技術堆疊和專案類型中具有多樣性。Prettier 最初由 James Long 開發，因其強大的功能和易用性在開發社群中獲得了顯著的關注。

主要功能和優勢

  1. 一致的代碼風格：Prettier 在整個代碼庫中強制執行一致的編碼風格，消除對格式偏好的爭論，並確保代碼外觀的統一性，這有助於加快代碼審查過程。

  2. 自動格式化：通過與您的編輯器或構建過程集成，Prettier 能夠自動格式化您的代碼，這包括在您輸入時或提交之前包裝代碼等操作，從而節省開發人員寶貴的時間和精力。 您可以配置這個有特定風格的程式碼格式化工具以在儲存程式碼時運行。 僅應用於與源代碼相同的目錄。

  3. 可配置性：雖然 Prettier 預設上有明確的意見，但它提供了一定程度的可配置性以調整某些格式化規則來符合專案特定需求。 用戶可以配置自己的規則。

  4. 語言支援：它支援多種程式語言和格式，開箱即用，確保與多樣的開發環境兼容。程式碼品質：改進的程式碼可讀性有助於更好的理解，並減少因格式不一致而導致的語法錯誤或程式錯誤的可能性。

開始使用 Prettier

安裝

要開始在您的專案中使用 Prettier，您可以通過 NPM 或 yarn 安裝：

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

或

yarn add --dev prettier // installs latest version
yarn add --dev prettier // installs latest version
SHELL

用法

  • 命令列介面 (CLI)：Prettier 提供了一個 CLI 工具，用於手動格式化文件或將其整合到腳本中以完成自動化格式化任務。
  • 編輯器整合：提供適用於流行編輯器的插件，如 Visual Studio Code、Sublime Text、Atom 等，讓您在輸入時實現即時格式化。
  • Git Hooks：使用 Git Hooks 設定 Prettier 在提交之前運行，以確保所有程式碼變更遵循定義的格式規則。

整合與生態系統

Prettier 能夠無縫整合到各種開發工具和工作流程中，增強了其實用性並促進了開發者的採用：

  • IDE 插件：可與 IDE 和文本編輯器集成，以即時格式化代碼，提高開發人員的生產力並維護編碼標準。
  • 建置系統：整合到建置管線和持續整合（CI）工作流程中，以在團隊專案中強制執行一致的程式碼格式化。
  • 版本控制：可與 Git 等版本控制系統協作無間，確保格式化的代碼在整個協作過程中得到一致維護。

Prettier的最佳實踐

為了充分發揮 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

直接從網址生成PDF，讓您可以程式化地捕獲網頁內容並將其保存為PDF文件。

PDF 操作

輕鬆合併、拆分和操作現有的 PDF 文件。 IronPDF 提供如附加頁面、拆分文檔等功能。

PDF 安全性

透過加密密碼或應用數位簽章來保護您的 PDF 文件。 IronPDF 提供選項來保護您的敏感文件免受未經授權的訪問。

高品質輸出

生成高品質的 PDF 文件，精確還原文字、圖像和格式。 IronPDF 確保您生成的 PDF 保持對原始內容的忠實性。

跨平台相容性

IronPDF 與多種平台兼容，包括 Windows、Linux 和 macOS，這使得它適合廣泛的開發環境。

簡單整合

輕鬆使用其 npm 套件將 IronPDF 集成到您的 Node.js 應用程式中。 API 有完善的文檔，使將 PDF 生成功能融入您的項目變得簡單明瞭。

安裝

要安裝 IronPDF NPM 套件，請使用以下指令：

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

使用 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"
SHELL

接著，導航至您的專案目錄：

cd prettier-pdf
cd prettier-pdf
SHELL

安裝所需的軟體包：

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

建立一個空的配置文件，讓編輯器和其他工具知道您正在使用 Prettier：

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

建立一個 .prettierignore 檔案，以便讓 Prettier CLI 和編輯器知道哪些檔案不需要格式化。 以下是一個範例：

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

建立 PDF

現在，讓我們使用IronPDF創建一個生成PDF的簡單範例。

PDF 生成 API：第一步是創建一個後端 API 來生成 PDF 文件。 由於 IronPDF 只在伺服器端運行，我們需要創建一個 API，供用戶在需要生成 PDF 時調用。 在路徑 pages/api/pdf.js 中創建一個文件，並添加以下內容。

IronPDF 需要許可證密鑰，您可以從許可證頁面獲取，並將其放置在下面的代碼中。

// 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();
    }
}
js
JAVASCRIPT

現在將 index.js 代碼修改如下以使用 Prettier 和 IronPDF。

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>
    );
}
js
JAVASCRIPT

使用 yarn prettier 格式化代碼。

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

Prettier - NPM（對開發人員的運作方式）：圖 2 - 執行 Prettier

現在使用以下命令運行應用程式：

yarn dev
yarn dev
SHELL

輸出

Prettier - NPM（它如何為開發者工作）：圖3 - 使用IronPDF的Prettier輸出

PDF

Prettier - NPM（對開發人員的運作方式）：圖 4 - PDF 輸出

IronPDF 授權

IronPDF npm 软体包在授权密钥上运行。 IronPDF 提供免費試用授權金鑰，讓用戶在購買之前可以試用其廣泛的功能。

在此處放置授權金鑰：

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

結論

Prettier 是現代軟體開發中的基石工具，能夠以精確和高效的方式簡化程式碼格式化。 它能夠在不同語言中強制一致的編碼風格，並無縫整合到現有的工作流程中，這使其成為致力於保持乾淨、可維護的代碼庫的團隊不可或缺的工具。 通過自動化代碼格式化任務，Prettier 使開發人員能夠更多地專注於編寫高品質代碼，而不必糾結於細節風格或代碼審查，從而提升軟體專案中的生產力和協作能力。 擁抱 Prettier 以提升您的程式碼風格品質並精簡您的開發流程。

IronPDF 使 Node.js 開發人員能夠在其應用程式中提升 PDF 處理功能，提供無與倫比的功能、可靠性和性能。 透過利用IronPDF的進階功能進行PDF生成、轉換和處理，開發人員可以簡化文檔工作流程，提升用戶體驗，並自信地滿足各種商業需求。 使用 IronPDF 充分發揮 PDF 處理在您的 Node.js 項目中的潛力，輕鬆提供專業級文件解決方案。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全端軟體工程師（WebOps）

Darrius Serrant 擁有邁阿密大學的計算機科學學士學位，目前擔任 Iron Software 的全端 WebOps 行銷工程師。自幼對編程產生興趣，他認為計算機既神秘又易於接觸，使其成為創造力和解決問題的完美媒介。

在 Iron Software，Darrius 享受創造新事物並簡化複雜概念使其更易理解的過程。作為我們的其中一位常駐開發人員，他也自願教導學生，將他的專業知識傳授給下一代。

對 Darrius 來說，他的工作之所以令人滿足，是因為它受到重視並且產生了真正的影響。

< 上一頁
oauth2orize NPM（對開發者的運作方式）
下一個 >
rxjs NPM（它如何為開發者運作）

使用 npm 安裝

版本：2025.5

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本： 2025.5 剛剛發布

免費開始
npm 下載 開始免費試用
查看許可證 >
Experience the full power of IronPDF 開始免費試用
Textlogo Iron Suite related to Prettier - NPM（對開發者的運作方式）

IronPDF 是 IRON 的一部分套件

10 .NET API 產品適用於您的辦公文檔

以兩件產品的價格獲得十件產品   開始免費試用