คุณฟอร์แมตโค้ดใน Visual Studio Code (VSCode) ได้อย่างไร

อะไรคือสิ่งที่เทียบเท่ากับCtrl+ K+ FและCtrl+ K+ Dใน Windows ใน Visual Studio สำหรับการจัดรูปแบบหรือรหัส "beautifying" ในโปรแกรมแก้ไข Visual Studio Code?

การจัดรูปแบบรหัสมีอยู่ใน Visual Studio Code ผ่านทางลัดต่อไปนี้:

• บน Windows Shift+ Alt+F
• บน Mac Shift+ Option+F
• บน Linux Ctrl+ Shift+I

หรือคุณสามารถหาทางลัดเช่นเดียวกับทางลัดอื่น ๆ ผ่าน 'สั่ง Palette' ที่จัดไว้ให้ในการแก้ไขด้วยCtrl+ Shift+ P(หรือCommand+ Shift+ Pบน Mac) แล้วค้นหารูปแบบเอกสาร

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

Visual Studio Code บน Windows - Shift+ Alt+F

Visual Studio Code บน MacOS - Shift+ Option+F

Visual Studio Code บน Ubuntu - Ctrl+ Shift+I

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

การจัดรูปแบบโค้ดขณะบันทึกไฟล์:

Visual Studio Code ช่วยให้ผู้ใช้สามารถกำหนดการตั้งค่าเริ่มต้นเอง

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

ไฟล์เมนู→ ค่ากำหนด → การตั้งค่าพื้นที่ทำงาน

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

หมายเหตุ: ตอนนี้คุณสามารถจัดรูปแบบไฟล์ TypeScript อัตโนมัติ ตรวจสอบการอัปเดตของฉัน

คุณสามารถเพิ่มปุ่มลัดเข้าในเมนูไฟล์ → ค่ากำหนด → แป้นพิมพ์ลัด

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

หรือVisual Studioเช่น:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

1. คลิกขวาที่ไฟล์
2. เลือกFormat Documentจากเมนู:
   • ของ windows: Alt Shift F
   • ลินุกซ์: Alt Shift I
   • MacOS: ⌥ ⇧ F

การรวมกันเป็นปุ่มขวาShift+ +AltF

สำหรับ Fedora

1. คลิก File -> ->PreferencesKeyboard shortcuts
2. ใต้Default Keyboard Shortcutsค้นหา ( Ctrl+F ) editor.action.formatสำหรับ

ฉันอ่านแล้ว "key": "ctrl+shift+i"

คุณสามารถเปลี่ยนได้เช่นกัน อ้างถึงคำตอบนี้เกี่ยวกับวิธีการ ... หรือหากคุณรู้สึกเกียจคร้านเล็กน้อยเพื่อเลื่อนขึ้น:

คุณสามารถเพิ่มการผูกกุญแจใน "การตั้งค่า -> แป้นพิมพ์ลัด"

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

หรือ Visual Studio เช่น:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

โปรดทราบ: cmdรหัสนี้ใช้สำหรับ Mac เท่านั้น สำหรับ Windows และ Fedora (แป้นพิมพ์ Windows) ใช้Ctrl

แก้ไข :

ตามเวอร์ชั่นของ Visual Code 1.28.2นี่คือสิ่งที่ฉันพบ

editor.action.formatไม่มีอยู่แล้ว. มันได้รับการแทนที่โดยขณะนี้และeditor.action.formatDocumenteditor.action.formatSelection

พิมพ์editor.action.formatในช่องค้นหาเพื่อดูทางลัดที่มีอยู่

ในการเปลี่ยนชุดคีย์ให้ทำตามขั้นตอนเหล่านี้:

1. คลิกeditor.action.formatDocumentหรือeditor.action.formatSelection
2. ไอคอนปากกาชอบปรากฏทางซ้าย - คลิก
3. ป๊อปอัปจะปรากฏขึ้น กดคีย์ผสมที่ต้องการแล้วกด Enter

บน Linux มันคือCtrl+ Shift+I +

บน Windows มันคือAlt+ Shift+F +ทดสอบกับ HTML / CSS / JavaScript และ Visual Studio Code 1.18.0

สำหรับภาษาอื่นคุณอาจต้องติดตั้งแพ็คเกจภาษาเฉพาะ

Visual Studio Code 1.6.1รองรับ " Format On Save " ซึ่งจะรับส่วนขยายฟอร์แมตเตอร์ที่เกี่ยวข้องที่ติดตั้งโดยอัตโนมัติและจัดรูปแบบเอกสารทั้งหมดในการบันทึกแต่ละครั้ง

เปิดใช้งาน "Format On Save" โดยการตั้งค่า

"editor.formatOnSave": true

และมีแป้นพิมพ์ลัดพร้อมใช้งาน (Visual Studio Code 1.7ขึ้นไป):

จัดรูปแบบเอกสารทั้งหมด : Shift+ Alt+F

การเลือกรูปแบบเท่านั้น : Ctrl+ K, Ctrl+F

บน Ubuntu มันCtrl+ +ShiftI

เพียงคลิกขวาที่ข้อความและเลือก "Format code"

Visual Studio Code ใช้เป็นการjs-beautifyภายใน แต่ไม่มีความสามารถในการปรับเปลี่ยนสไตล์ที่คุณต้องการใช้ ส่วนขยาย "beautify" ช่วยให้คุณเพิ่มการตั้งค่า

ไฟล์เมนู→การตั้งค่า → การตั้งค่า

"editor.formatOnType": true

เมื่อคุณป้อนเครื่องหมายอัฒภาคมันจะถูกจัดรูปแบบ

"editor.formatOnSave": trueหรือคุณยังสามารถใช้

Shift+ Alt+ Fทำงานได้ดีใน 1.17.2 ขึ้นไป

ด้วยเหตุผลบางอย่างAlt+ Shift+ Fไม่ได้ทำงานสำหรับฉันบน Mac Visual Studio รหัส 1.3.1 และที่จริงคำสั่ง "รูปแบบเอกสาร" ไม่ได้ทำงานที่ทั้งหมด แต่คำสั่งฟอร์แมตทำงานได้ดีมาก

ดังนั้นคุณสามารถใช้Command+ Shift+ Pและพิมพ์ตัวจัดรูปแบบหรือสร้างทางลัดของคุณเองในเมนูไฟล์ → ค่ากำหนด → แป้นพิมพ์ลัด → Command+ K Command+ Sจากนั้นพิมพ์ตัวจัดรูปแบบและเพิ่มทางลัดของคุณ

ดูตัวอย่าง:

การจัดรูปแบบรหัสใน Visual Studio

ฉันพยายามฟอร์แมตใน Windows 8 แล้ว

เพียงทำตามภาพหน้าจอด้านล่าง

1. คลิกที่ View บนแถบเมนูด้านบนจากนั้นคลิกที่ Command Palette

   

2. จากนั้นจะปรากฏช่องที่เราต้องพิมพ์รูปแบบ

   Shift+ Alt+F

   

ใน Visual Studio รหัสShift+ Alt+ Fจะทำในสิ่งCtrl+ K+ Dจะทำใน Visual Studio

ทางลัดรูปแบบใน C # ใช้งานไม่ได้จนกว่าฉันจะติดตั้งMonoสำหรับ Mac OS X, DNVMและDNX DNX

ก่อนที่ฉันจะติดตั้ง Mono ทางลัดรูปแบบอัตโนมัติ ( Shift+ Alt+ F) ใช้งานได้กับ.jsonไฟล์เท่านั้น

บน Mac, Shift+ Alt+Fใช้ได้กับฉัน

คุณสามารถตรวจสอบการผูกกุญแจในเมนูได้เสมอ:

ไฟล์เมนู→ ค่ากำหนด → แป้นพิมพ์ลัดและตัวกรองตาม ' คีย์ ' รูปแบบ

ในขณะที่การเปลี่ยนพฤติกรรมเริ่มต้นสำหรับรหัส Visual Studio ต้องการส่วนขยายคุณสามารถแทนที่พฤติกรรมเริ่มต้นในพื้นที่ทำงานหรือระดับผู้ใช้ ใช้ได้กับทุกภาษาที่รองรับ (ฉันสามารถรับประกัน HTML, JavaScript และ C #)

ระดับพื้นที่ทำงาน

ประโยชน์ที่ได้รับ

• ไม่ต้องการนามสกุล
• สามารถใช้ร่วมกันระหว่างทีม

ผลลัพธ์

• .vscode/settings.json ถูกสร้างในโฟลเดอร์รูทโปรเจ็กต์

ทำอย่างไร?

1. ไปที่: ไฟล์เมนู→ ค่ากำหนด → การตั้งค่าพื้นที่ทำงาน

2. เพิ่มและบันทึก"editor.formatOnType": trueลงใน settings.json (ซึ่งจะแทนที่พฤติกรรมเริ่มต้นสำหรับโครงการที่คุณทำงานด้วยการสร้างไฟล์. vscode / settings.json)

   

ระดับสภาพแวดล้อมของผู้ใช้

ประโยชน์ที่ได้รับ

• ไม่ต้องการนามสกุล
• สภาพแวดล้อมการพัฒนาส่วนบุคคล tweeking เพื่อปกครองพวกเขาทั้งหมด (การตั้งค่า :))

ผลลัพธ์

• ผู้ใช้settings.jsonถูกปรับเปลี่ยน (ดูที่ตั้งตามระบบปฏิบัติการด้านล่าง)

ทำอย่างไร?

1. ไปที่: เมนูไฟล์ → ค่ากำหนด → การตั้งค่าผู้ใช้

2. เพิ่มหรือเปลี่ยนค่า"editor.formatOnType": falseเป็นเป็น"editor.formatOnType": trueในการตั้งค่าผู้ใช้

settings.jsonตำแหน่งผู้ใช้รหัส Visual Studio ของคุณคือ:

ตำแหน่งไฟล์การตั้งค่าขึ้นอยู่กับแพลตฟอร์มของคุณไฟล์การตั้งค่าของผู้ใช้จะอยู่ที่นี่:

• ของ windows: %APPDATA%\Code\User\settings.json
• Mac: $HOME/Library/Application Support/Code/User/settings.json
• Linux: $HOME/.config/Code/User/settings.jsonไฟล์การตั้งค่าพื้นที่ทำงานอยู่ภายใต้โฟลเดอร์. vscode ในโครงการของคุณ

รายละเอียดเพิ่มเติมสามารถค้นหาได้ที่นี่

ค่าเริ่มต้นคีย์นี้ใช้ไม่ได้กับฉันในเอกสาร HTML, CSS และ JavaScript

หลังจากค้นหาฉันพบปลั๊กอินยอดนิยมJS-CSS-HTML ฟอร์แมตเตอร์ที่มีการติดตั้ง 133,796ครั้ง

หลังจากการติดตั้งเพียงแค่โหลด windows และตีCtrl+ Shift+ Fและจะทำงาน!

เลือกข้อความคลิกขวาที่ตัวเลือกและเลือกตัวเลือก "command palette":

หน้าต่างใหม่จะเปิดขึ้น ค้นหา "format" และเลือกตัวเลือกที่มีการจัดรูปแบบตามความต้องการ

เพียงติดตั้งVisual Studio Keymapโดย Microsoft แก้ไขปัญหา. : p

ใน Mac ใช้⌘+ Kแล้ว+⌘F

สำหรับผู้ที่ต้องการปรับแต่งไฟล์ JavaScript ที่จะจัดรูปแบบคุณสามารถใช้ส่วนขยายใด ๆในJSfilesคุณสมบัติ เช่นเดียวกับ HTML

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

สิ่งนี้จะช่วยให้ beautify on save สำหรับ TypeScript และคุณสามารถเพิ่ม XML ลงในตัวเลือก HTML

หากคุณต้องการกำหนดสไตล์ของการจัดรูปแบบเอกสารคุณควรใช้Beautify extention

อ้างถึงภาพหน้าจอนี้:

คุณต้องติดตั้งปลั๊กอินที่เหมาะสมก่อน (เช่น XML, C #, ฯลฯ )

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

วิธีที่ง่ายที่สุดที่ฉันใช้ใน Visual Studio Code (Ubuntu) คือ:

เลือกข้อความที่คุณต้องการจัดรูปแบบด้วยเมาส์

คลิกขวาและเลือก"การเลือกรูปแบบ"

ไม่ใช่อันนี้. ใช้สิ่งนี้:

เมนูไฟล์ → การตั้งค่า → การตั้งค่าพื้นที่ทำงาน , "editor.formatOnType" : ความจริง

ใช้ส่วนขยาย ...

เปิดใช้งานการจัดรูปแบบอัตโนมัติของรหัสเมื่อคุณบันทึกไฟล์

เปิดตัว Visual Studio และรหัสด่วนเปิด ( Ctrl+ P) Enterวางคำสั่งต่อไปและกด

ext ติดตั้งรูปแบบในการบันทึก

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

รหัส Visual Studio บน Linux:

Ctrl+ [เพื่อปลดบล็อคโค้ดและ

Ctrl+ ]เพื่อสร้างการเยื้อง