Softonic

เครื่องมือสร้างการตั้งค่า Prettier

ขั้นตอน 1 / 2
ถัดไป

เลือกค่าของตัวเลือก Prettier ที่ใช้บ่อย 10 รายการ แล้วคัดลอกการตั้งค่าที่สร้างขึ้น เครื่องมือนี้ส่งออกเป็น JSON, YAML หรือไฟล์ JavaScript แบบ CommonJS แต่จะไม่ตรวจสอบโปรเจกต์ ไม่ใช้ Prettier ตรวจความถูกต้องของการตั้งค่า และไม่เพิ่มปลั๊กอินหรือ overrides ให้

วิธีสร้างไฟล์การตั้งค่า

  1. 1

    กำหนดรูปแบบ

    เลือกความกว้างบรรทัด ความกว้างแท็บ แท็บหรือช่องว่าง เซมิโคลอน และรูปแบบเครื่องหมายคำพูด

  2. 2

    กำหนดรายละเอียดไวยากรณ์

    เลือกจุลภาคท้ายรายการ ช่องว่างในวงเล็บปีกกา วงเล็บของฟังก์ชันลูกศร รูปแบบขึ้นบรรทัดใหม่ และเครื่องหมายคำพูด JSX

  3. 3

    เลือกรูปแบบไฟล์

    สร้าง .prettierrc.json, .prettierrc.yaml หรือ .prettierrc.js แบบ CommonJS ที่ใช้ module.exports

  4. 4

    คัดลอกและตรวจสอบ

    บันทึกผลลัพธ์ไว้ในโปรเจกต์ แล้วเรียก npx prettier --check . ด้วย Prettier เวอร์ชันที่ติดตั้งอยู่

ตัวเลือกที่เครื่องมือนี้รองรับ

ตัวเลือก ค่าที่เลือกได้
printWidth 40–200
tabWidth 1–8
useTabs, semi, bracketSpacing, jsxSingleQuote true หรือ false
singleQuote true หรือ false
trailingComma none, es5 หรือ all
arrowParens always หรือ avoid
endOfLine lf, crlf, cr หรือ auto

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

รูปแบบผลลัพธ์

  • JSON สร้างออบเจ็กต์ JSON สำหรับ .prettierrc.json
  • YAML สร้างบรรทัดคู่คีย์และค่าสำหรับ .prettierrc.yaml
  • JavaScript ครอบออบเจ็กต์เดียวกันด้วย module.exports = { ... }; สำหรับ .prettierrc.js แบบ CommonJS

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

การจัดการข้อมูล

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

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

ไม่ เครื่องมือสร้างเฉพาะตัวเลือก 10 รายการที่แสดงในแบบฟอร์ม หากต้องการรายการอื่นที่รองรับ ให้ตรวจเอกสารของเวอร์ชันที่ติดตั้งแล้วเพิ่มด้วยตนเอง

ไม่ เครื่องมือสร้างเพียงข้อความการตั้งค่าและไม่ได้เรียกใช้ Prettier ให้บันทึกไฟล์แล้วเรียก npx prettier --check . ในโปรเจกต์ของคุณ

ไม่ได้ ผลลัพธ์เป็นออบเจ็กต์แบบแบนเพียงชุดเดียว หากโปรเจกต์ต้องใช้ ให้เพิ่ม overrides หรือตัวเลือกเฉพาะปลั๊กอินด้วยตนเอง

เพราะนี่คือรูปแบบ CommonJS ที่เครื่องมือสร้าง หากโปรเจกต์ต้องการการตั้งค่าแบบ ES module ให้ปรับคำสั่ง export และชื่อไฟล์ให้เหมาะสม

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

เครื่องมือนี้มีให้บริการในภาษาอื่น