ฉันจะกำหนดปัจจัยการแปลงแบบแท็บต่อพื้นที่ได้อย่างไร

ฉันจะกำหนดปัจจัยการแปลงแบบแท็บต่อพื้นที่ได้อย่างไรเมื่อใช้ Visual Studio Code

ตัวอย่างเช่นตอนนี้ใน HTML ดูเหมือนว่าจะสร้างสองช่องว่างต่อการกดTABแต่ใน TypeScript มันผลิต 4

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

"editor.detectIndentation": falseคุณสามารถปิดการเยื้องคาดเดาผ่าน

คุณสามารถปรับแต่งสิ่งนี้ได้อย่างง่ายดายผ่านการตั้งค่าทั้งสามสำหรับWindowsในเมนูไฟล์ →การตั้งค่า → การตั้งค่าผู้ใช้และสำหรับMacในเมนูรหัส →การตั้งค่า → การตั้งค่าหรือ⌘,:

// The number of spaces a tab is equal to. This setting is overridden
// based on the file contents when `editor.detectIndentation` is true.
"editor.tabSize": 4,

// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces`
// will be detected based on the file contents. Set to false to keep
// the values you've explicitly set, above.
"editor.detectIndentation": false

ฉันใช้เวอร์ชั่น 1.21 แต่ฉันคิดว่านี่อาจใช้ได้กับเวอร์ชันก่อนหน้าด้วย

ลองดูที่ด้านขวาล่างของหน้าจอ คุณควรจะเห็นบางสิ่งบางอย่างที่บอกหรือSpacesTab-Size

Mine แสดงที่ว่าง, →

1. คลิกที่ช่องว่าง (หรือขนาดแท็บ )
2. เลือกเยื้องการใช้ช่องว่างหรือเยื้องการใช้แท็บ
3. เลือกจำนวนช่องว่างหรือแท็บที่คุณต้องการ

ใช้งานได้เฉพาะกับเอกสารเท่านั้นไม่ใช่ทั้งโครงการ หากคุณต้องการใช้กับโครงการคุณต้องเพิ่ม"editor.detectIndentation": falseการตั้งค่าผู้ใช้ของคุณด้วย

ดีถ้าคุณชอบวิธีการที่นักพัฒนา, Visual Studio tabSizeรหัสช่วยให้คุณสามารถระบุประเภทไฟล์ที่แตกต่างกันสำหรับ นี่คือตัวอย่างของฉันที่settings.jsonมีสี่ช่องว่างเริ่มต้นและ JavaScript / JSON สองช่องว่าง:

{
  // I want my default to be 4, but JavaScript/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },

  // This one forces the tab to be **space**
  "editor.insertSpaces": true
}

PS: ถ้าคุณไม่ทราบวิธีเปิดไฟล์นี้ (โดยเฉพาะใน Visual Studio Code รุ่นใหม่) คุณสามารถ:

1. เกียร์ล่างซ้าย→
2. การตั้งค่า→ การตั้งค่าเปิดขวาบน

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

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

เราสามารถควบคุมขนาดแท็บตามประเภทไฟล์ด้วยEditorConfigและEditorConfig สำหรับ VS Code extension จากนั้นเราสามารถทำAlt+ Shift+Fที่เฉพาะเจาะจงกับแต่ละชนิดของแฟ้ม

การติดตั้ง

ext install EditorConfig

ตัวอย่างการกำหนดค่า

.editorconfig

[*]
indent_style = space

[*.{js,ts,json}]
indent_size = 2

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig แทนที่สิ่งที่ settings.json กำหนดค่าสำหรับตัวแก้ไข editor.detectIndentationไม่มีความจำเป็นต้องเปลี่ยนเป็น

หากคุณใช้ส่วนขยายที่สวยกว่าในรหัส Visual Studio ให้ลองเพิ่มลงในไฟล์ settings.json:

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me

ในVisual Studio Codeเวอร์ชั่น 1.31.1 หรือใหม่กว่า (ฉันคิดว่า): เหมือนกับ sed Alex Dimaคุณสามารถปรับแต่งสิ่งนี้ได้อย่างง่ายดายผ่านการตั้งค่าเหล่านี้สำหรับ

• Windows ในเมนูไฟล์ → ค่ากำหนด → การตั้งค่าผู้ใช้หรือใช้ปุ่มลัดCtrl+Shift +P
• Mac ในเมนูรหัส → การตั้งค่า → การตั้งค่าหรือ⌘,

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

นั่นคือlonefy.vscode-js-css-html-formatterการตำหนิ HookyQR.beautifyปิดการใช้งานและติดตั้ง

ตอนนี้บันทึกแท็บของคุณจะไม่ถูกแปลง

ที่มุมล่างขวาคุณมี Spaces: Spaces: 2

ที่นั่นคุณสามารถเปลี่ยนการเยื้องตามความต้องการของคุณ: ตัวเลือกการเยื้อง

เมื่อใช้ TypeScript ความกว้างแท็บเริ่มต้นจะเป็นสองเสมอโดยไม่คำนึงถึงสิ่งที่ระบุในแถบเครื่องมือ คุณต้องตั้งค่า "prettier.tabWidth" ในการตั้งค่าผู้ใช้ของคุณเพื่อเปลี่ยน

Ctrl+ P, พิมพ์ →การตั้งค่าผู้ใช้เพิ่ม:

"prettier.tabWidth": 4

หากคำตอบที่ยอมรับในโพสต์นี้ใช้งานไม่ได้ลองดู

ฉันมีEditorConfig สำหรับ Visual Studio Code ที่ติดตั้งในตัวแก้ไขของฉันและมันยังคงแทนที่การตั้งค่าผู้ใช้ของฉันซึ่งถูกตั้งค่าให้เยื้องไฟล์โดยใช้ช่องว่าง ทุกครั้งที่ฉันสลับระหว่างแท็บตัวแก้ไขไฟล์ของฉันจะถูกเยื้องโดยอัตโนมัติด้วยแท็บแม้ว่าฉันจะแปลงการเยื้องเป็นช่องว่าง !!!

ทันทีหลังจากที่ฉันถอนการติดตั้งส่วนขยายนี้การเยื้องจะไม่เปลี่ยนแปลงระหว่างแท็บสลับแก้ไขและฉันสามารถทำงานได้สะดวกสบายมากกว่าที่จะต้องแปลงแท็บเป็นช่องว่างด้วยตนเองทุกครั้งที่ฉันสลับไฟล์ - ซึ่งเป็นเรื่องที่เจ็บปวด

มีคำตอบที่ดีมากมายจากสมาชิกชุมชนอันเป็นที่รักของเรา ฉันอยากจะเพิ่มแท็บ C # codeSize และพบกระทู้นี้ มีวิธีแก้ไขปัญหามากมายที่ฉันพบและเอกสาร VS Codeเป็นทางการนั้นยอดเยี่ยม ฉันแค่ต้องการแชร์การตั้งค่า C # ของฉัน:

"[csharp]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

เพียงแค่คัดลอกและวางโค้ดด้านบนลงในsettings.jsonไฟล์ของคุณแล้วบันทึก ขอบคุณ

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

เพิ่มการตั้งค่าผู้ใช้:

"editor.tabSize": 2,
"editor.detectIndentation": false

จากนั้นคลิกขวาที่เอกสารของคุณหากคุณเปิดไว้แล้วคลิกจัดรูปแบบเอกสารเพื่อให้เอกสารที่มีอยู่ของคุณเป็นไปตามการตั้งค่าใหม่เหล่านี้

โซลูชันของ @ alex-dima จากปี 2015 จะเปลี่ยนขนาดและพื้นที่ว่างของแท็บสำหรับไฟล์ทั้งหมดและโซลูชันของ @ Tricky จากปี 2559 จะเปลี่ยนเฉพาะการตั้งค่าสำหรับไฟล์ปัจจุบันเท่านั้น

ในปี 2560 ฉันพบวิธีแก้ไขปัญหาอื่นที่ใช้งานได้ตามภาษา Visual Studio Code ไม่ได้ใช้ขนาดแท็บที่เหมาะสมหรือการตั้งค่าพื้นที่สำหรับElixirอย่างเหมาะสมดังนั้นฉันจึงพบว่าฉันสามารถเปลี่ยนการตั้งค่าสำหรับไฟล์ Elixir ทั้งหมดได้

ฉันคลิกที่ภาษาในแถบสถานะ ("Elixir" ในกรณีของฉัน) เลือก "กำหนดค่าการตั้งค่าตามภาษา 'Elixir' ... " และแก้ไขการตั้งค่าภาษาเฉพาะของ Elixir ฉันเพิ่งคัดลอกการตั้งค่า "editor.tabSize" และ "editor.insertSpaces" จากการตั้งค่าเริ่มต้นทางด้านซ้าย (ฉันดีใจที่ได้แสดง) และจากนั้นแก้ไขทางด้านขวา

มันใช้งานได้ดีและตอนนี้ไฟล์ภาษา Elixir ทั้งหมดใช้ขนาดแท็บและการตั้งค่าพื้นที่ที่เหมาะสม

ฉันต้องทำการแก้ไขการตั้งค่ามากมายเช่นคำตอบก่อนหน้านี้ดังนั้นฉันจึงไม่รู้ว่าสิ่งใดที่ทำให้มันทำงานได้หลังจากการปรับเปลี่ยนมากมาย

ไม่มีอะไรทำงานจนกว่าฉันจะปิดและ openen IDE ของฉัน แต่สุดท้ายสามสิ่งที่ฉันไม่ได้ปิดการใช้งานlonefy.vscode-js-css-html-formatter, "html.format.enable": true,และรีสตาร์ท Visual Studio

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.colorTheme": "Default Light+",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.tabSize": 2,
        "editor.detectIndentation": false,
        "editor.insertSpaces": true
    },
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "editor.tabSize": 2,
    "typescript.format.insertSpaceAfterConstructor": true,
    "files.autoSave": "afterDelay",
    "html.format.indentHandlebars": true,
    "html.format.indentInnerHtml": true,
    "html.format.enable": true,
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
}

หากนี่คือสำหรับ Angular 2 และ CLI กำลังสร้างไฟล์ที่คุณต้องการจัดรูปแบบแตกต่างกันคุณสามารถแก้ไขไฟล์เหล่านี้เพื่อเปลี่ยนสิ่งที่สร้างขึ้น:

npm_modules/@angular/cli/blueprints/component/files/__path__/*

ไม่แนะนำอย่างหนาแน่นเนื่องจากการอัปเดต npm จะลบงานของคุณ แต่ช่วยให้ฉันประหยัดเวลาได้มาก

ฉันพยายามเปลี่ยนเครื่องมือแก้ไข.tabSizeเป็น 4 แต่.editorConfigแทนที่การตั้งค่าใด ๆ ที่ฉันได้ระบุไว้ดังนั้นไม่จำเป็นต้องเปลี่ยนการกำหนดค่าใด ๆ ในการตั้งค่าผู้ใช้ คุณเพียงแค่ต้องแก้ไขไฟล์. editorConfig:

set indent_size = 4

User3550138 ถูกต้อง lonefy.vscode-js-css-html-formatterแทนที่การตั้งค่าทั้งหมดที่กล่าวถึงในคำตอบอื่น ๆ อย่างไรก็ตามคุณไม่จำเป็นต้องปิดการใช้งานหรือถอนการติดตั้งเนื่องจากสามารถกำหนดค่าได้

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