Làm cách nào tôi có thể tùy chỉnh hệ số chuyển đổi từ tab sang không gian?

Làm cách nào để tôi tùy chỉnh hệ số chuyển đổi từ tab sang không gian khi sử dụng Visual Studio Code?

Chẳng hạn, ngay bây giờ trong HTML, nó dường như tạo ra hai khoảng trắng trên mỗi lần nhấn TAB, nhưng trong TypeScript, nó tạo ra 4.

Theo mặc định, Visual Studio Code sẽ cố gắng đoán các tùy chọn thụt lề của bạn tùy thuộc vào tệp bạn mở.

Bạn có thể tắt đoán thụt đầu dòng thông qua "editor.detectIndentation": false.

Bạn có thể tùy chỉnh dễ dàng thông qua ba cài đặt này cho Windows trong menu Tệp → Tùy chọn → Cài đặt người dùng và cho Mac trong menu Mã → Tùy chọn → Cài đặt hoặc ⌘,:

// 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

Tôi đang chạy phiên bản 1.21, nhưng tôi nghĩ điều này cũng có thể áp dụng cho các phiên bản trước.

Hãy nhìn vào phía dưới bên phải của màn hình. Bạn sẽ thấy một cái gì đó nói Spaceshoặc Tab-Size.

Của tôi cho thấy không gian, →

1. Nhấp vào Spaces (hoặc Tab-Size )
2. Chọn thụt lề sử dụng không gian hoặc thụt lề bằng cách sử dụng tab
3. Chọn số lượng khoảng trắng hoặc tab bạn thích.

Điều này chỉ hoạt động trên mỗi tài liệu, không phải toàn dự án. Nếu bạn muốn áp dụng nó cho toàn dự án, bạn cũng cần thêm "editor.detectIndentation": falsevào cài đặt người dùng của mình.

Chà, nếu bạn thích cách nhà phát triển, Visual Studio Code cho phép bạn chỉ định các loại tệp khác nhau cho tabSize. Dưới đây là ví dụ về tôi settings.jsonvới bốn khoảng trắng mặc định và hai khoảng trắng / JavaScript:

{
  // 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: Chà, nếu bạn không biết cách mở tệp này (đặc biệt trong phiên bản mới của Visual Studio Code), bạn có thể:

1. Bánh răng phía dưới bên trái →
2. Cài đặt → trên cùng bên phải Mở Cài đặt

Theo mặc định, Visual Studio Code tự động phát hiện thụt lề của tệp đang mở. Nếu bạn muốn tắt tính năng này và thực hiện tất cả thụt lề, ví dụ: hai khoảng trắng, bạn sẽ thực hiện các thao tác sau trong Cài đặt người dùng hoặc Cài đặt không gian làm việc.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Chúng tôi có thể kiểm soát kích thước tab theo loại tệp bằng EditorConfig và EditorConfig cho tiện ích mở rộng Mã VS. Sau đó chúng tôi có thể tạo Alt+ Shift+ Fcụ thể cho từng loại tệp.

Cài đặt

ext install EditorConfig

Cấu hình ví dụ

.editorconfig

[*]
indent_style = space

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

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig ghi đè mọi cấu hình settings.json cho trình soạn thảo. Không cần phải thay đổi editor.detectIndentation.

Nếu bạn sử dụng tiện ích mở rộng đẹp hơn trong Visual Studio Code, hãy thử thêm phần này vào tệp settings.json:

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

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

Trong Visual Studio Code phiên bản 1.31.1 trở lên (tôi nghĩ): Giống như sed Alex Dima , bạn có thể tùy chỉnh điều này dễ dàng thông qua các cài đặt này cho

• Windows trong menu Tệp → Tùy chọn → Cài đặt người dùng hoặc sử dụng các phím ngắn Ctrl+ Shift+P
• Mac trong menu Mã → Tùy chọn → Cài đặt hoặc ⌘,

Bạn muốn đảm bảo rằng cấu hình trình soạn thảo của bạn không xung đột với cấu hình cài đặt người dùng hoặc không gian làm việc của bạn, vì tôi cảm thấy hơi khó chịu khi nghĩ rằng cài đặt tệp cài đặt không được áp dụng khi cấu hình trình chỉnh sửa của tôi hoàn tác các thay đổi đó.

Đó là lonefy.vscode-js-css-html-formatterđể đổ lỗi. Vô hiệu hóa nó, và cài đặt HookyQR.beautify.

Bây giờ lưu các tab của bạn sẽ không được chuyển đổi.

Ở góc dưới bên phải của bạn, bạn có Spaces: Spaces: 2

Ở đó bạn có thể thay đổi thụt lề theo nhu cầu của bạn: Tùy chọn thụt lề

Khi sử dụng TypeScript, chiều rộng tab mặc định luôn là hai bất kể nó nói gì trên thanh công cụ. Bạn phải đặt "prettier.tabWidth" trong cài đặt người dùng của mình để thay đổi nó.

Ctrl+ P, Loại → cài đặt người dùng, thêm:

"prettier.tabWidth": 4

Nếu câu trả lời được chấp nhận trên bài đăng này không hiệu quả, hãy thử lại:

Tôi đã cài đặt EditorConfig cho Visual Studio Code trong trình chỉnh sửa của mình và nó tiếp tục ghi đè cài đặt người dùng của tôi được đặt thành các tệp thụt lề bằng cách sử dụng khoảng trắng. Mỗi lần tôi chuyển đổi giữa các tab biên tập, tệp của tôi sẽ tự động được thụt lề bằng các tab ngay cả khi tôi đã chuyển đổi thụt lề sang dấu cách !!!

Ngay sau khi tôi gỡ cài đặt tiện ích mở rộng này, việc thụt lề không còn thay đổi giữa các tab trình chỉnh sửa và tôi có thể làm việc thoải mái hơn thay vì phải chuyển đổi thủ công các tab thành khoảng trắng mỗi khi tôi chuyển đổi tệp - điều đó thật đau đớn.

Đã có rất nhiều câu trả lời tốt được cung cấp bởi các thành viên cộng đồng yêu quý của chúng tôi. Tôi thực sự muốn thêm tab mã C #Size và tìm thấy chủ đề này. Có nhiều giải pháp tôi tìm thấy và các tài liệu VS Code chính thức là tuyệt vời. Tôi chỉ muốn chia sẻ cài đặt C # của mình:

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

chỉ cần sao chép và dán mã ở trên vào settings.jsontập tin của bạn và lưu lại. cảm ơn

Menu Tệp → Tùy chọn → Cài đặt

Thêm vào cài đặt người dùng:

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

sau đó nhấp chuột phải vào tài liệu của bạn nếu bạn đã mở và nhấp vào Định dạng Tài liệu để có tài liệu hiện có theo các cài đặt mới này.

Giải pháp của @ alex-dima từ năm 2015 sẽ thay đổi kích thước tab và khoảng trắng cho tất cả các tệp và giải pháp @ Tricky từ năm 2016 dường như chỉ thay đổi cài đặt cho tệp hiện tại.

Kể từ năm 2017, tôi đã tìm thấy một giải pháp khác hoạt động trên cơ sở mỗi ngôn ngữ. Visual Studio Code không sử dụng kích thước tab hoặc cài đặt không gian phù hợp cho Elixir , vì vậy tôi thấy rằng tôi có thể thay đổi cài đặt cho tất cả các tệp Elixir.

Tôi đã nhấp vào ngôn ngữ trong thanh trạng thái ("Elixir" trong trường hợp của tôi), chọn "Định cấu hình cài đặt dựa trên ngôn ngữ 'Elixir' ..." và chỉnh sửa cài đặt ngôn ngữ dành riêng cho Elixir. Tôi chỉ sao chép cài đặt "Editor.tabSize" và "Editor.insertSpaces" từ cài đặt mặc định ở bên trái (tôi rất vui vì chúng được hiển thị) và sau đó sửa đổi chúng ở bên phải.

Nó hoạt động rất tốt và hiện tại tất cả các tệp ngôn ngữ Elixir đều sử dụng kích thước tab và cài đặt không gian phù hợp.

Tôi đã phải thực hiện rất nhiều chỉnh sửa cài đặt như các câu trả lời trước đó, vì vậy tôi không biết cái nào làm cho nó hoạt động sau nhiều sửa đổi.

Không có gì làm việc cho đến khi tôi đóng cửa và openen IDE của tôi, nhưng ba điều cuối cùng tôi đã làm được vô hiệu hóa các lonefy.vscode-js-css-html-formatter, "html.format.enable": true,và khởi động lại 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,
}

Nếu đây là dành cho Angular 2 và CLI đang tạo các tệp mà bạn muốn được định dạng khác nhau, bạn có thể chỉnh sửa các tệp này để thay đổi những gì được tạo:

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

Không được khuyến khích ồ ạt vì một bản cập nhật npm sẽ xóa công việc của bạn, nhưng nó đã giúp tôi tiết kiệm rất nhiều thời gian.

Tôi đã cố gắng thay đổi trình chỉnh .tabSizesửa thành 4, nhưng .editorConfigghi đè bất kỳ cài đặt nào tôi đã chỉ định, do đó không cần thay đổi bất kỳ cấu hình nào trong cài đặt người dùng. Bạn chỉ cần chỉnh sửa tệp .editorConfig:

set indent_size = 4

Người dùng3550138 là chính xác. lonefy.vscode-js-css-html-formatterghi đè tất cả các cài đặt được đề cập trong các câu trả lời khác. Tuy nhiên, bạn không phải vô hiệu hóa hoặc gỡ cài đặt nó vì nó có thể được cấu hình.

Hướng dẫn đầy đủ có thể được tìm thấy bằng cách mở thanh bên tiện ích mở rộng và nhấp vào tiện ích mở rộng này và nó sẽ hiển thị hướng dẫn cấu hình trong không gian làm việc của trình soạn thảo. Ít nhất là nó đối với tôi trong Visual Studio Code phiên bản 1.14.1.