節點幫助

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

發佈 2024年10月24日

在現代軟體開發中，保持乾淨和一致的程式碼風格對於可讀性、協作及維護性至關重要。工具如更美觀一個帶有 TypeScript 圖標表示內建型別宣告的工具已經成為這項工作中不可或缺的助手，自動化通常繁瑣的程式碼格式化工作。在本文中，我們深入探討 Prettier 的複雜性，研究其功能、優勢、整合和最佳實踐。此外，我們將探討IronPDF從網站網址生成PDF的PDF生成庫。

Prettier 介紹

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

主要功能和優勢

一致的代碼風格：Prettier 在整個代碼庫中強制執行一致的代碼風格，消除對格式偏好的爭論，並確保代碼外觀的統一性，有助於加速代碼審查過程。
自動格式化：通過與您的代碼編輯器或構建過程集成，Prettier能在您編寫或提交代碼時自動格式化代碼，包括換行等，從而節省開發人員寶貴的時間和精力。您可以配置這個有特定風格的程式碼格式化工具以在儲存程式碼時運行。僅應用於與源代碼相同的目錄。
可配置性：雖然 Prettier 本質上是具有主觀性的，但它提供了一定程度的可配置性，可以調整某些格式規則以符合專案特定的需求。用戶可以配置自己的規則。
語言支持：開箱即用支持多種程式語言和格式，確保與各種開發環境的兼容性。5. 代碼質量：改善的代碼可讀性增強了理解，並減少了由於不一致的格式化而導致語法錯誤或漏洞的可能性。

開始使用 Prettier

安裝

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

npm install prettier --save-dev

npm install prettier --save-dev

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install prettier --save-dev

VB C#

或

yarn add --dev prettier // installs latest version

yarn add --dev prettier // installs latest version

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add --dev prettier ' installs latest version

VB C#

用法

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

整合與生態系統

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

IDE 插件：與 IDE 和文字編輯器整合，能即時格式化程式碼，提高開發者的生產力並維持程式編寫標準。
構建系統：融入構建管線和持續整合(持續整合)在團隊項目中執行一致的程式碼格式化工作流程。
版本控制：與 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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-@next-app@latest prettier-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

VB C#

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

cd prettier-pdf

cd prettier-pdf

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd prettier-pdf

VB C#

安裝所需的軟體包：

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64 yarn add -D prettier

VB C#

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

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'node --eval "fs.writeFileSync('.prettierrc','{}" + vbLf + "')"

VB C#

創建一個.prettierignore文件告知 Prettier CLI 和編輯器不格式化哪些文件。以下是一個範例：

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

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

#Ignore artifacts:
#Ignore all HTML files:
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'build coverage **/ *.html

VB C#

建立 PDF

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

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

IronPDF需要許可金鑰，您可以從授權頁面```html <!DOCTYPE html>

Iron Software Products

Iron Software 產品

技術和產品描述

IronPDF 是一個功能強大的.NET PDF庫，使得生成和編輯PDF文件變得簡單。無論您使用的是C#、VB.NET還是JavaScript，IronPDF都能滿足您的需求。

IronOCR 是一個領先的.NET光學字符識別庫，能夠準確地將圖像轉換為可編輯的文本。這個工具對於需要處理大量掃描文件的開發人員來說非常有用。

IronXL 提供了一個強大的Excel讀取和寫入庫，簡化了處理Excel文件的流程。無論是讀取、修改還是生成，IronXL都能夠輕鬆完成。

IronBarcode and IronQR 能夠快速生成和讀取條形碼和二維碼，適合各種應用場景。

IronZIP 是一個.NET庫，用於創建、編輯和提取ZIP文件，支持高效的文件壓縮和解壓。

IronWord 提供了一個靈活的工具來生成、編輯和閱讀Word文件。它支持所有的Word格式，使得文檔處理變得簡單和可靠。

IronPrint 是一個強大的打印庫，能夠輕鬆地從任何.NET應用程序進行打印操作。

IronWebscraper 是一個方便的工具，可以從Web頁面中提取數據，適用於數據收集和分析。

Iron Suite 包含了所有的Iron Software工具包，提供全面的解決方案，以滿足您的所有需求。


```cs
// 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();
    }
}

現在將 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>
    );
}

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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/System.Nullable<pdf>url='+text); const blob = await response.blob(); const url = window.URL.createObjectURL(New Blob([blob])); const link = document.createElement("a"c); 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>); }

VB C#

使用 yarn prettier 格式化代碼。

yarn prettier . --write

yarn prettier . --write

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn prettier. --write

VB C#

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

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

yarn dev

yarn dev

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn dev

VB C#

輸出

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";

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

結論

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

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

< 上一頁
oauth2orize NPM（對開發者的運作方式）

下一個 >
rxjs NPM（它如何為開發者運作）

準備開始了嗎？版本: 2024.11 剛剛發布

查看許可證 >

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

Prettier 介紹

主要功能和優勢

開始使用 Prettier

安裝

用法

整合與生態系統

Prettier的最佳實踐

IronPDF 介紹

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 生成 PDF 文件並使用 Prettier NPM 套件

建立 PDF

Iron Software 產品

技術和產品描述

輸出

PDF

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？版本: 2024.11 剛剛發布

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

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

Prettier 介紹

主要功能和優勢

開始使用 Prettier

安裝

用法

整合與生態系統

Prettier的最佳實踐

IronPDF 介紹

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 生成 PDF 文件並使用 Prettier NPM 套件

建立 PDF

Iron Software 產品

技術和產品描述

輸出

PDF

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

試用表格已提交成功地.

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號 立即。

試用表格已提交成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

準備開始了嗎？版本: 2024.11 剛剛發布

試用表格已提交
成功地.

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.