จะเปลี่ยนการเยื้องใน Visual Studio Code ได้อย่างไร

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

อาจจะเป็นการตั้งค่า แต่ภายใต้ชื่ออื่นเนื่องจากฉันไม่พบสิ่งที่เกี่ยวข้องกับการเยื้อง

UPDATE

ขณะนี้ฉันใช้ตัวจัดรูปแบบรหัส Prettierและแก้ปัญหาการจัดรูปแบบทั้งหมดโดยการจัดรูปแบบอัตโนมัติในการบันทึก (หากไม่มีข้อผิดพลาดทางไวยากรณ์)

คุณสามารถเปลี่ยนแปลงสิ่งนี้ในระดับสากลUserหรือWorkspaceระดับ

เปิดการตั้งค่า: การใช้ทางลัดctrl + ,หรือคลิกFile> Preferences> Settingsที่แสดงด้านล่าง

จากนั้นให้ทำการเปลี่ยนแปลง 2 อย่างต่อไปนี้: (พิมพ์tabSizeในแถบค้นหา)

1. ยกเลิกการทำเครื่องหมายในช่องของ Detect Indentation
2. เปลี่ยนขนาดแท็บเป็น 2/4 (แม้ว่าฉันคิดว่า 2 ถูกต้องสำหรับ JS :))

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

หากคุณต้องการที่จะใช้สิ่งนี้กับไฟล์ทั้งหมดและไม่ได้อยู่บนพื้นฐานของแต่ละไฟล์ให้แทนที่Editor: Tab SizeและEditor: Insert Spacesการตั้งค่าในการตั้งค่าผู้ใช้หรือการตั้งค่าพื้นที่ทำงานขึ้นอยู่กับความต้องการของคุณ

แก้ไข 1

ที่จะได้รับการตั้งค่าผู้ใช้หรือพื้นที่ทำงานของคุณไปที่การตั้งค่า -> การตั้งค่า ตรวจสอบว่าคุณอยู่ในแท็บผู้ใช้หรือพื้นที่ทำงานขึ้นอยู่กับความต้องการของคุณและใช้แถบค้นหาเพื่อค้นหาการตั้งค่า คุณอาจต้องการปิดการใช้งานEditor: Detect Indentationเนื่องจากการตั้งค่านี้จะแทนที่สิ่งที่คุณตั้งไว้ Editor: Insert SpacesและEditor: Tab Sizeเมื่อเปิดใช้งาน

หากต้องการเปลี่ยนการเยื้องตามภาษาการเขียนโปรแกรม :

1. เปิดคำสั่ง Palette ( CtrlShiftP| MacOS: ⇧⌘P)
2. การตั้งค่า: กำหนดค่าการตั้งค่าภาษาเฉพาะ ... (คำสั่ง ID: workbench.action.configureLanguageBasedSettings)
3. เลือกภาษาการเขียนโปรแกรม (เช่น TypeScript)

4. เพิ่มรหัสนี้:

   "[typescript]": {
       "editor.tabSize": 2
   }
   

ดูเพิ่มเติมที่: เอกสารรหัส VS

คุณอาจต้องการตั้งค่าเป็นeditor.detectIndentationเท็จนอกเหนือจากคำตอบของ Elliot-J

VSCode จะเขียนทับeditor.tabSizeและeditor.insertSpacesการตั้งค่าของคุณต่อไฟล์หากตรวจพบว่าไฟล์มีรูปแบบการเว้นวรรคหรือแท็บที่แตกต่างกัน คุณสามารถพบปัญหานี้หากคุณเพิ่มไฟล์ที่มีอยู่ให้กับโครงการของคุณหรือถ้าคุณเพิ่มไฟล์โดยใช้ตัวสร้างโค้ดเช่น Angular Cli การตั้งค่าด้านบนป้องกัน VSCode ไม่ให้ทำเช่นนี้

ทางลัดการจัดรูปแบบรหัส:

VSCode บน Windows - Shift + Alt + F

VSCode บน MacOS - Shift + Option + F

VSCode บน Ubuntu - Ctrl + Shift + I

นอกจากนี้คุณยังสามารถปรับแต่งทางลัดนี้โดยใช้การตั้งค่ากำหนดหากต้องการ

การเลือกคอลัมน์ด้วยแป้นพิมพ์ Ctrl + Shift + Alt + Arrow

ในกรณีของฉันextention " EditorConfig สำหรับรหัส VS " กำลังแทนที่การตั้งค่า VSCode หากคุณติดตั้งแล้วให้ตรวจสอบไฟล์. editorconfig ในโฟลเดอร์รูทของโครงการ

นี่คือตัวอย่างการกำหนดค่า "indent_size" ตั้งค่าจำนวนช่องว่างสำหรับแท็บ

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

คำอธิบายที่ง่ายขึ้นพร้อมรูปภาพสำหรับผู้ที่ googled "เปลี่ยนการเยื้องในรหัส VS"

ขั้นตอนที่ 1: คลิกที่การตั้งค่า> การตั้งค่า

ขั้นตอนที่ 2: การตั้งค่าที่คุณต้องการคือ "ตรวจจับการเยื้อง" และเริ่มพิมพ์ คลิกที่ "ตัวแก้ไข: ขนาดแท็บ"

ขั้นตอนที่ 3: เลื่อนลงไปที่ "ตัวแก้ไข: ขนาดแท็บ" และพิมพ์ 2 (หรืออะไรก็ได้ที่คุณต้องการ)

การเปลี่ยนแปลงจะถูกบันทึกโดยอัตโนมัติ

ตัวอย่างการเปลี่ยนแปลงของฉัน

หากต้องการตั้งค่าไฟล์ที่มีอยู่ทั้งหมดและไฟล์ใหม่เป็นช่องว่างการระบุเป็น 2 เพียงแค่ใส่ไว้ใน settingns.json ของคุณ (ในรูทของ json):

"[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features",
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "editor.detectIndentation":false
 }

คุณสามารถเพิ่มประเภทภาษาของการกำหนดค่า:

"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false
} 

วิธีเปลี่ยนการเยื้องเป็น 4 ช่องว่างในไฟล์ทั้งหมดในรหัส VS เป็น 2 ช่องว่าง

• เปิดการค้นหาไฟล์
• เปิดใช้งานนิพจน์ทั่วไป
• ป้อน: ( {2})(?: {2})(\b|(?!=[,'";\.:\*\\\/\{\}\[\]\(\)]))ในช่องค้นหา
• ป้อน: $1ในช่องแทนที่

วิธีเปลี่ยนการเว้นวรรค 2 ช่องในไฟล์ทั้งหมดในรหัส VS เป็น 4 ช่องว่าง

• เปิดการค้นหาไฟล์
• เปิดใช้งานนิพจน์ทั่วไป
• ป้อน: ( {2})(\b|(?!=[,'";\.:\\*\\\/{\}\[\]\(\)]))ในช่องค้นหา
• ป้อน: $1$1ในช่องแทนที่

หมายเหตุ: คุณต้องเปิด PERL Regex ก่อน นี่คือวิธี:

• เปิดการตั้งค่าและไปที่ไฟล์ JSON
• เพิ่มสิ่งต่อไปนี้ในไฟล์ JSON "search.usePCRE2": true

หวังว่าจะมีคนเห็นสิ่งนี้

ปัญหา: คำตอบที่ยอมรับไม่ได้แก้ไขการเยื้องในเอกสารปัจจุบัน

วิธีแก้ไข: เรียกใช้Format Documentเพื่อประมวลผลเอกสารตามการตั้งค่าปัจจุบัน (ใหม่)

ปัญหา: เอกสาร HTML ในโครงการของฉันเป็นประเภท "Django HTML" ไม่ใช่ "HTML" และไม่มีฟอร์แมตเตอร์

วิธีแก้ไข: เปลี่ยนเป็นไวยากรณ์ "HTML" จัดรูปแบบแล้วเปลี่ยนกลับเป็น "Django HTML"

ปัญหา: ฟอร์แมตเตอร์ HTML ไม่ทราบวิธีจัดการแท็กเทมเพลต Django และเลิกทำรังที่ฉันใช้อย่างระมัดระวัง

การแก้ไข: ติดตั้งส่วนขยายIndent 4-2ซึ่งดำเนินการเยื้องอย่างเคร่งครัดโดยไม่คำนึงถึงไวยากรณ์ภาษาปัจจุบัน (ซึ่งเป็นสิ่งที่ฉันต้องการในกรณีนี้)

ฉันต้องการเปลี่ยนการเยื้องของไฟล์ HTML ที่มีอยู่จาก 4 ช่องว่างเป็น 2 ช่องว่าง

ฉันคลิกปุ่ม 'Spaces: 4' ในแถบสถานะและเปลี่ยนเป็นสองในกล่องโต้ตอบถัดไป

ฉันใช้ส่วนขยาย 'เป็นกลุ่ม' ฉันไม่ต้องเยื้องอีกครั้งโดยไม่ต้องเป็นกลุ่ม

เมื่อต้องการเยื้องไฟล์ปัจจุบันของฉันอีกครั้งฉันใช้สิ่งนี้:

gg

=

G

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

ฟอร์แมตเมนูเอกสาร