คำถามที่พบบ่อย

Prettier Config Generator เป็นเครื่องมือเว็บแบบโต้ตอบฟรีที่ช่วยให้คุณตั้งค่าทุกออปชันของ Prettier ได้อย่างง่ายดายและคัดลอกไฟล์ .prettierrc ที่ได้ทันที ไม่ต้องแก้ไขด้วยตนเอง

Prettier เป็นตัวจัดรูปแบบโค้ดที่กำหนดสไตล์ตายตัว ช่วยให้โค้ดมีรูปแบบที่สม่ำเสมอทั่วทั้งโปรเจกต์ ขจัดการถกเถียงเรื่องสไตล์โค้ดในการรีวิว

ไฟล์ .prettierrc เป็นไฟล์การตั้งค่าที่วางไว้ที่ root ของโปรเจกต์ บอก Prettier ว่าต้องจัดรูปแบบโค้ดอย่างไร ควบคุมออปชันต่างๆ เช่น การเยื้อง สไตล์เครื่องหมายคำพูด และความกว้างของบรรทัด

เลือกออปชัน Prettier ที่ต้องการในหน้าหลัก การตั้งค่าจะอัปเดตแบบเรียลไทม์ในแถบด้านข้าง คลิก "คัดลอกคอนฟิก" เพื่อคัดลอก JSON ไปยังคลิปบอร์ด แล้ววางลงในไฟล์ .prettierrc ที่ root ของโปรเจกต์

ใช่ ฟรีทั้งหมด ไม่ต้องสมัครสมาชิก ไม่ต้องมีบัญชี และไม่มีข้อจำกัดในการใช้งาน เครื่องมือนี้ยังเป็นโอเพ่นซอร์สบน GitHub

ใช่ เครื่องมือนี้รวมทุกออปชัน Prettier ที่รองรับอย่างเป็นทางการ พร้อมคำอธิบายและค่าเริ่มต้นสำหรับแต่ละออปชัน

คลิกปุ่ม "คัดลอกคอนฟิก" ในแถบด้านข้างบนเดสก์ท็อป หรือแตะปุ่มลอยบนมือถือ วางเนื้อหา JSON ที่คัดลอกไปยังไฟล์ใหม่ชื่อ .prettierrc ที่ root ของโปรเจกต์

ทั้งสามวิธีเป็นวิธีที่ถูกต้องในการตั้งค่า Prettier .prettierrc รองรับ JSON หรือ YAML, prettier.config.js เป็น JavaScript module ที่ช่วยให้ตั้งค่าแบบไดนามิก และ prettier ใน package.json รวมทุกอย่างไว้ในไฟล์เดียว ฟังก์ชันการทำงานเหมือนกัน ขึ้นอยู่กับความชอบ

ใช่ Prettier รองรับ TypeScript, JSX/TSX (React), Vue single-file components และรูปแบบอื่นๆ อีกมาก อาจต้องติดตั้งปลั๊กอินเพิ่มเติมสำหรับบางเฟรมเวิร์ก

ติดตั้งส่วนขยาย "Prettier - Code formatter" จาก VS Code marketplace จากนั้นเพิ่ม "editor.defaultFormatter": "esbenp.prettier-vscode" และ "editor.formatOnSave": true ในการตั้งค่า VS Code

รัน npx prettier --write . ที่ root ของโปรเจกต์ คำสั่งนี้จะจัดรูปแบบไฟล์ที่รองรับทั้งหมด เพิ่ม prettier เป็น dev dependency ด้วย npm install --save-dev prettier

Prettier รองรับ JavaScript, TypeScript, JSX, TSX, CSS, SCSS, Less, HTML, Vue, Angular, JSON, YAML, Markdown และอื่นๆ อีกมาก สามารถขยายด้วยปลั๊กอินสำหรับภาษาเพิ่มเติม

สร้างไฟล์ .prettierignore ที่ root ของโปรเจกต์ โดยใช้ syntax เดียวกับ .gitignore ไฟล์และไดเรกทอรีที่ระบุจะถูกข้ามโดย Prettier

ได้ ติดตั้ง eslint-config-prettier เพื่อปิดกฎการจัดรูปแบบ ESLint ที่ขัดแย้งกับ Prettier ใช้ Prettier สำหรับการจัดรูปแบบและ ESLint สำหรับกฎคุณภาพโค้ด

printWidth บอก Prettier ถึงความยาวบรรทัดที่ควรพยายามจัดโค้ดให้พอดี ค่าเริ่มต้นคือ 80 นี่เป็นเป้าหมายอ่อน Prettier อาจเกินได้หากการตัดบรรทัดทำให้โค้ดอ่านยากขึ้น

singleQuote ควบคุมว่า Prettier ใช้ single quote ใน JavaScript/TypeScript หรือไม่ jsxSingleQuote ควบคุม JSX attribute strings โดยเฉพาะ คุณสามารถตั้งค่าแยกกันได้

ใช้แถบค้นหาด้านบนหน้าเพื่อกรองออปชัน Prettier ตามชื่อ คำอธิบาย หรือคำหลัก ผลลัพธ์จะอัปเดตทันทีขณะพิมพ์

ใช่ คลิกปุ่มสลับธีมในส่วนหัวเพื่อสลับระหว่างโหมดสว่าง โหมดมืด และการตั้งค่าระบบ การเลือกของคุณจะถูกบันทึกโดยอัตโนมัติ

ค่าเริ่มต้น Prettier รวมถึง: printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: false, trailingComma: "all", bracketSpacing: true และ arrowParens: "always"

เปิด issue หรือ pull request บน GitHub repository โปรเจกต์ยินดีรับการมีส่วนร่วมทุกประเภท รวมถึงฟีเจอร์ใหม่ การแก้ไขข้อผิดพลาด และการปรับปรุงการแปล

คุณสามารถเลือก Prettier 3.x รุ่นใดก็ได้จากเมนูเวอร์ชัน — 3.0 ถึง 3.6 พร้อม "latest" บันเดิลของเวอร์ชันที่เลือกจะถูกโหลดตามต้องการจาก jsDelivr ดังนั้นรายการออปชันจะตรงกับสคีมาจริงของรุ่นนั้นเสมอ

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, Angular templates, JSON, JSON5, JSON พร้อมคอมเมนต์, Markdown, MDX, YAML และ GraphQL พาร์เซอร์จะถูกตรวจจับโดยอัตโนมัติจากอินพุต แต่คุณสามารถแทนที่ได้ด้วยเมนู

คลิกปุ่มแชร์ แล้วเวอร์ชัน Prettier ปัจจุบัน ตัวเลือกที่เลือก โค้ด และการแทนที่พาร์เซอร์จะถูกบีบอัดด้วย LZ ใส่ใน URL hash จากนั้นคัดลอกไปยังคลิปบอร์ดของคุณ การเปิดลิงก์นั้นจะคืนค่าคอนฟิกเดิมทุกอย่าง ไม่มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ — ทุกอย่างอยู่ในเบราว์เซอร์

แสดงจำนวนโทเค็น AI ที่อินพุตและเอาต์พุตของคุณจะใช้ตามโมเดลที่เลือก GPT-4o / GPT-4 / GPT-3.5 ใช้ BPE tokenizer อย่างเป็นทางการเพื่อนับให้แม่นยำ ส่วน Claude, Gemini, Llama และ Mistral ใช้การประมาณตามจำนวนตัวอักษรนำหน้าด้วย "~"

ใช่ เวอร์ชัน Prettier ของคุณ ตัวเลือกออปชัน และค่าที่ต้องการสำหรับ split-view / tokenizer จะถูกบันทึกใน localStorage ดังนั้นการรีโหลดจะคืนค่าทุกอย่าง URL hash สำหรับแชร์จะมีความสำคัญกว่าถ้ามีอยู่เมื่อคุณเปิดหน้านี้

เมื่อพาร์เซอร์ของ Prettier ไม่สามารถพาร์ซอินพุตของคุณได้ — ปกติเพราะพาร์เซอร์ที่เลือกไม่ตรงกับโค้ด (เช่นเลือก CSS แต่วาง JSX) — ข้อความข้อผิดพลาดจะปรากฏในแถบสีแดงเหนือ diff สลับพาร์เซอร์ให้ตรงกับโค้ดของคุณแล้วข้อผิดพลาดจะหายไป

ได้ tab Preview มี dropdown สำหรับ parser ของตัวเองอยู่ข้างปุ่มสลับ diff และแต่ละ parser มาพร้อมตัวอย่างที่ออกแบบมาเฉพาะ — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL รวมถึง TypeScript / JS การสลับ parser จะจัดรูปแบบตัวอย่างที่ตรงกันใหม่ตามออปชันปัจจุบันของคุณ ทำให้ออปชันเฉพาะภาษาอย่าง proseWrap, htmlWhitespaceSensitivity และ vueIndentScriptAndStyle มีที่ให้แสดงผลของมัน ตัวเลือกของคุณจะคงอยู่หลังการรีโหลด