การเยื้องและการจัดรูปแบบ CSS ของ Visual Studio code

ผมอยากจะทราบว่ามีวิธีการอัตโนมัติเปิดใช้งานใด ๆ เยื้องไฟล์ CSS ในรหัสภาพสตูดิโอที่มีทางลัดALT+ SHIFT+ F?

มันทำงานได้ดีกับ JavaScript แต่ไม่แปลกกับ CSS

ใช่ลองติดตั้งส่วนขยาย vscode-CSS-จัดรูปแบบ
มันก็เพิ่มฟังก์ชันการทำงานในรูปแบบ.cssไฟล์และทางลัดอยู่เหมือนกันAlt+ +ShiftF

ปรับแต่ง css / sass / scss / less

เพื่อเรียกใช้สิ่งนี้

ป้อน alt+shift+f

หรือ

กดF1หรือctrl+shift+p แล้วเข้าสวยงาม ..

อีกอันหนึ่ง - JS-CSS-HTML Formatter

ฉันคิดว่าทั้งสองส่วนขยายนี้ใช้js-beautify เป็นการภายใน

เสียเวลาไปหนึ่งชั่วโมงเพื่อค้นหาตัวเลือกที่ดีที่สุด

เพียงแค่รวบรวมไว้เพื่อให้อ่านง่ายและเลือกหนึ่ง

หมายเหตุ:

• CSS และ SASS / SCSS / LESS เกี่ยวข้องกันทั้งหมด
• HTML, Javascript, typescript, JSON - โค้ด VS กำลังจัดรูปแบบอยู่แล้ว
• CSS และที่เกี่ยวข้อง - โค้ด VS ไม่มีการจัดรูปแบบ ณ วันนี้

ตัวเลือก:

• ในการจัดรูปแบบ css / sass / scss / less:
  • สวยกว่า
    • สนับสนุนที่เกี่ยวข้องกับ css ทั้งหมดไม่ใช่คนอื่นฉันเลือกสิ่งนี้มันใช้งานได้ดี
• ในการจัดรูปแบบ JavaScript / TypeScript / CSS:
  • ปรับแต่ง css / sass / scss / less
    • แต่ JS, TS ได้รับการสนับสนุนโดยรหัส VS แล้ว
• ในการจัดรูปแบบไฟล์ JS, CSS, HTML, JSON (ตัด js-beautify)
  • JS-CSS-HTML Formatter
    • แต่ JS, HTML, JSON รองรับโค้ด VS แล้ว
• เพื่อจัดรูปแบบ CSS
  • CSS Formatter
    • แต่รองรับเฉพาะ CSS เท่านั้นไม่เกี่ยวข้องทั้งหมด - ไม่ได้รับการดูแล 6+ เดือน

ในการจัดรูปแบบ:

กดAlt+ Shift+ Fใน VS Code หลังจากติดตั้ง Prettier

หลังจากเปิดbootstrap.min.cssในเครื่องในรหัสสตูดิโอวิชวลแล้วจะมีลักษณะไม่เยื้อง พยายามใช้เครื่องหมายALT + Shift + Fแต่ไร้ผล

จากนั้นติดตั้ง

นามสกุลCSS Formatter

โหลดใหม่และALT + Shift + Fเยื้องไฟล์ CSS ของฉันอย่างมีเสน่ห์

บิงโก !!!

มีหลายให้เลือกจากในแกลเลอรี่ แต่อย่างหนึ่งที่ฉันใช้ซึ่งมีระดับมากของ configurability ที่ยังเหลืออยู่ไม่สร้างความรำคาญกับส่วนที่เหลือของการตั้งค่าเป็นบรรเจิดโดยมิเชล Melluso ทำงานได้ทั้งบน CSS และ SCSS และให้คุณเยื้อง 3 ช่องว่างโดยให้ส่วนที่เหลือของโค้ดอยู่ที่ 2 ช่องซึ่งเป็นสิ่งที่ดี

คุณสามารถฉกได้จากGitHubและดัดแปลงด้วยตัวเองหากคุณรู้สึกเช่นนั้น

ฉันแนะนำให้ใช้Prettierเนื่องจากสามารถขยายได้มาก แต่ก็ยังใช้งานได้อย่างสมบูรณ์แบบนอกกรอบ:

1. CMD + Shift + P -> Format Document

หรือ

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

ไปที่เมนู Files -> Preference -> Extentions จากนั้นพิมพ์ CSS Formatter รอให้โหลดแล้วคลิกติดตั้ง

ติดตั้งส่วนขยาย HookyQR.beautify มันจะทำให้จาวาสคริปต์, JSON, CSS, Sass และ HTML ของคุณสวยงามใน Visual Studio Code เป็นส่วนขยายที่มีการใช้งานมากที่สุดสำหรับวัตถุประสงค์นี้

Beautify ( Github ) & Prettier ( Github ) เป็นปลั๊กอินที่ดีที่สุดสำหรับการพัฒนาเว็บใน Visual Studio Code

ในการจัดรูปแบบโค้ดใน Visual Studio เมื่อคุณต้องการให้กด: (Ctrl + K) & (Ctrl + F)

กฎการจัดรูปแบบอัตโนมัติสามารถพบและเปลี่ยนแปลงได้ใน: Tools / Options -> (แถบด้านข้างซ้าย): Text Editor / CSS (หรือภาษาอื่น ๆ ที่คุณต้องการเปลี่ยน)

สำหรับภาษา CSS ตัวเลือกมี จำกัด มาก คุณยังสามารถทำการเปลี่ยนแปลงบางอย่างใน: ... / Text Editor / All Languages