ทำไมสตริงนี้ยังเป็นอัญประกาศคู่ทั้งที่เปิด singleQuote แล้ว

เพราะมันมี apostrophe หรืออัญประกาศเดี่ยวอยู่ข้างใน Prettier เลือกอัญประกาศที่ต้อง escape น้อยกว่า และจะย้อนกลับมาใช้ความชอบของคุณเมื่อเสมอกันเท่านั้น

singleQuote มีผลกับ JSX ไหม

ไม่ การใส่อัญประกาศให้แอตทริบิวต์ JSX ควบคุมด้วย jsxSingleQuote ซึ่งมีค่าเริ่มต้นเป็น false เพื่อให้ JSX คงอัญประกาศคู่ตามธรรมเนียมของ HTML

มีผลกับ JSON หรือ package.json ไหม

ไม่ JSON อนุญาตเฉพาะอัญประกาศคู่ Prettier จึงปล่อยไว้ตามเดิมไม่ว่าจะตั้งค่าอย่างไร

`singleQuote` — ความชอบที่ Prettier จะข้ามให้เองเมื่อการ escape จะแย่ลง

ตัวเลือก Single Quote ของ Prettier

singleQuote บอกว่าคุณชอบใช้อัญประกาศตัวไหนกับสตริงใน JavaScript มันเป็นความชอบมากกว่ากฎ เพราะ Prettier จะเลือกอัญประกาศที่ทำให้ต้องใส่ escape น้อยกว่าเสมอ สตริงที่มีเครื่องหมาย apostrophe อยู่ข้างในจึงยังคงใช้อัญประกาศคู่ แม้จะตั้ง singleQuote: true ไว้ก็ตาม

Use single quotes instead of double quotes.

คำอธิบายของ Prettier เอง จากเอกสารตัวเลือกอย่างเป็นทางการ

ค่าเริ่มต้น: false
ชนิด: boolean
แฟล็ก CLI: --single-quote

ออปชันนี้ทำอะไร

ค่าเริ่มต้นคือ false หมายถึงอัญประกาศคู่ ตั้งเป็น true แล้ว Prettier จะชอบอัญประกาศเดี่ยว แต่ใช้เป็นเพียงตัวตัดสินเมื่อเสมอกันเท่านั้น

กฎที่ Prettier ใช้จริงคือการทำให้ escape น้อยที่สุด อัญประกาศตัวไหนต้องใช้แบ็กสแลชน้อยกว่าจะชนะ และความชอบของคุณจะมีผลก็ต่อเมื่อจำนวนเท่ากัน นี่คือเหตุผลที่โค้ดเบสซึ่งตั้ง singleQuote: true ยังมีสตริงที่ใช้อัญประกาศคู่อยู่ และนั่นถูกต้องแล้ว ไม่ใช่บั๊ก

const plain = 'ไม่มีอัญประกาศข้างใน';
const apostrophe = "it's got one";

ทั้งสองบรรทัดคือผลลัพธ์ของ singleQuote: true

ถ้าจะคงอัญประกาศเดี่ยวไว้ในบรรทัดที่สอง จะต้อง escape เครื่องหมาย apostrophe ด้วยแบ็กสแลช ซึ่งยาวขึ้นหนึ่งตัวอักษรและอ่านยากขึ้นอย่างเห็นได้ชัด Prettier จึงปฏิเสธ

สิ่งที่มันไม่แตะ

ไฟล์ JSON และรูปแบบที่คล้าย JSON รูปแบบนี้อนุญาตเฉพาะอัญประกาศคู่ ออปชันจึงถูกเพิกเฉยที่นั่น รวมถึงคีย์ prettier ใน package.json ด้วย
แอตทริบิวต์ JSX มีออปชันของตัวเองชื่อ jsxSingleQuote เพราะธรรมเนียมที่ใช้กันในมาร์กอัป JSX ต่างจากใน JavaScript รอบข้าง
เทมเพลตลิเทอรัล สตริงแบ็กทิกจะไม่ถูกเขียนใหม่เป็นอัญประกาศ เพราะอาจเปลี่ยนพฤติกรรม
คีย์ของอ็อบเจกต์ การตัดสินว่าคีย์จะถูกใส่อัญประกาศหรือไม่คือ quoteProps ออปชันนี้เลือกแค่ว่าจะใช้อักขระตัวไหนเมื่อจะใส่อัญประกาศแล้ว

ทำไมค่าเริ่มต้นถึงเป็นอัญประกาศคู่

อัญประกาศคู่เป็นค่าเริ่มต้นส่วนใหญ่เพราะปลอดภัยกว่าในเนื้อหาภาษาอังกฤษ เครื่องหมาย apostrophe พบได้ทั่วไปในร้อยแก้ว และสตริงที่ผู้ใช้เห็นก็มักเป็นร้อยแก้วเสียมากกว่า อัญประกาศคู่จึงลดการ escape ทั่วทั้งโค้ดเบสโดยไม่ต้องมีใครมาคิด

มันยังตรงกับ JSON ด้วย ซึ่งแปลว่าสตริงที่คัดลอกไปมาระหว่างไฟล์ JavaScript กับไฟล์ JSON ไม่ต้องปรับอะไร เมื่อพิจารณาว่ามีการตั้งค่าจำนวนมากที่ย้ายไปมาระหว่างสองรูปแบบนี้ ความสะดวกเล็ก ๆ นั้นก็มีค่าจริง

ข้อโต้แย้งฝั่งตรงข้ามเป็นเรื่องความเคยชินมากกว่าตรรกะ ระบบนิเวศ JavaScript ส่วนใหญ่เขียนด้วยอัญประกาศเดี่ยว การทำตามจึงทำให้โค้ดของคุณดูปกติในสายตาผู้ร่วมพัฒนาที่มาจากที่อื่น ไม่มีฝ่ายไหนผิด ซึ่งก็คือเหตุผลที่มันเป็นออปชัน

ข้อแลกเปลี่ยนและข้อตกลงของทีม

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

ถ้าโปรเจกต์เน้น TypeScript และค่อนข้างใหม่ singleQuote: true จะตรงกับสิ่งที่ผู้ร่วมพัฒนาส่วนใหญ่เคยเห็นมา
ถ้าโปรเจกต์มีข้อความภาษาอังกฤษที่ผู้ใช้เห็นเยอะ ค่าเริ่มต้นจะช่วยประหยัดการ escape
ไม่ว่าจะเลือกอะไร ให้คาดหวังว่าจะมีข้อยกเว้นในผลลัพธ์ ผู้รีวิวที่ทักสตริงอัญประกาศคู่ในโค้ดเบสอัญประกาศเดี่ยวคือคนที่เข้าใจออปชันผิด ไม่ใช่คนที่เจอข้อบกพร่อง

ESLint และเอดิเตอร์

กฎ quotes ของ ESLint ทับซ้อนกับออปชันนี้โดยตรงและจะขัดกัน โดยเห็นชัดที่สุดในกรณีการลด escape ข้างต้น eslint-config-prettier จะปิด quotes พร้อมกับกฎเชิงรูปแบบที่เหลือ ให้วางไว้ท้ายสุดในคอนฟิก

{
  "singleQuote": true,
  "jsxSingleQuote": false
}

สองการตั้งค่าที่มักมาคู่กัน

คู่นี้ คืออัญประกาศเดี่ยวใน JavaScript และอัญประกาศคู่ใน JSX เป็นการตั้งค่าที่พบบ่อยที่สุดในโค้ดเบส React เพราะแอตทริบิวต์ JSX อ่านเหมือน HTML และแอตทริบิวต์ HTML ตามธรรมเนียมใช้อัญประกาศคู่

ข้อผิดพลาดที่พบบ่อย

รายงานพฤติกรรมลด escape ว่าเป็นบั๊ก มันคือกฎที่ตั้งใจและมีเอกสารกำกับ
คาดหวังว่ามันจะเปลี่ยนแอตทริบิวต์ JSX นั่นคือ jsxSingleQuote
คาดหวังว่ามันจะเปลี่ยน JSON รูปแบบนั้นห้ามใช้อัญประกาศเดี่ยว
เปิดกฎ quotes ของ ESLint ทิ้งไว้ ซึ่งจะทำให้เกิด lint error ที่ Prettier จะสร้างขึ้นใหม่ทันทีในการจัดรูปแบบครั้งถัดไป

ใช้ใน .prettierrc

ใส่ singleQuote ลงในไฟล์ตั้งค่า Prettier ของคุณ:

{
  "singleQuote": false
}

ลองใช้ในตัวสร้าง

ตัวอย่างจริง

โค้ดเดียวกันที่จัดรูปแบบด้วยแต่ละค่าของ singleQuote

`singleQuote: true`

const user = {
  name: 'Ada',
  'user-id': 7,
  roles: ['admin', 'editor'],
  active: true,
};
const greet = (name) => `Hello ${name}`;
const label = user.active
  ? 'active member of the team'
  : 'inactive member of the team';
export function summarize(items) {
  return items
    .filter((i) => i.active)
    .map((i) => i.name)
    .join(', ');
}

`singleQuote: false`

const user = {
  name: "Ada",
  "user-id": 7,
  roles: ["admin", "editor"],
  active: true,
};
const greet = (name) => `Hello ${name}`;
const label = user.active
  ? "active member of the team"
  : "inactive member of the team";
export function summarize(items) {
  return items
    .filter((i) => i.active)
    .map((i) => i.name)
    .join(", ");
}

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

ทำไมสตริงนี้ยังเป็นอัญประกาศคู่ทั้งที่เปิด singleQuote แล้ว: เพราะมันมี apostrophe หรืออัญประกาศเดี่ยวอยู่ข้างใน Prettier เลือกอัญประกาศที่ต้อง escape น้อยกว่า และจะย้อนกลับมาใช้ความชอบของคุณเมื่อเสมอกันเท่านั้น
singleQuote มีผลกับ JSX ไหม: ไม่ การใส่อัญประกาศให้แอตทริบิวต์ JSX ควบคุมด้วย jsxSingleQuote ซึ่งมีค่าเริ่มต้นเป็น false เพื่อให้ JSX คงอัญประกาศคู่ตามธรรมเนียมของ HTML
มีผลกับ JSON หรือ package.json ไหม: ไม่ JSON อนุญาตเฉพาะอัญประกาศคู่ Prettier จึงปล่อยไว้ตามเดิมไม่ว่าจะตั้งค่าอย่างไร

ตัวเลือก Common อื่น ๆ

สร้างจาก Prettier 3.9.6

singleQuote — ความชอบที่ Prettier จะข้ามให้เองเมื่อการ escape จะแย่ลง