使用 Visual Studio Code 时如何自定义制表符到空格的转换系数?
例如,现在在 HTML 中,每按一下 似乎会产生两个空格TAB,但在 TypeScript 中它会产生 4 个空格。
使用 Visual Studio Code 时如何自定义制表符到空格的转换系数?
例如,现在在 HTML 中,每按一下 似乎会产生两个空格TAB,但在 TypeScript 中它会产生 4 个空格。
默认情况下,Visual Studio Code 将尝试根据您打开的文件猜测您的缩进选项。
您可以通过 关闭缩进猜测"editor.detectIndentation": false
。
您可以通过菜单File → Preferences → User Settings中的Windows和Mac菜单Code → Preferences → Settings中的这三个设置轻松自定义此设置或:⌘,
// 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
好吧,如果您喜欢开发人员的方式,Visual Studio Code 允许您为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 中),你可以:
默认情况下,Visual Studio Code 会自动检测当前打开文件的缩进。如果您想关闭此功能并进行所有缩进,例如两个空格,您可以在用户设置或工作区设置中执行以下操作。
{
"editor.tabSize": 2,
"editor.detectIndentation": false
}
我们可以使用EditorConfig及其用于 VS Code扩展的 EditorConfig按文件类型控制选项卡大小。然后我们可以使++特定于每种文件类型。AltShiftF
CTRL使用+打开 VS Code 命令面板P并粘贴:
ext install EditorConfig
[*]
indent_style = space
[*.{js,ts,json}]
indent_size = 2
[*.java]
indent_size = 4
[*.go]
indent_style = tab
EditorConfig 会覆盖任何 settings.json 为编辑器配置的内容。没有必要改变editor.detectIndentation
。
如果您在 Visual Studio Code 中使用更漂亮的扩展,请尝试将其添加到 settings.json 文件中:
"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,
"prettier.tabWidth": 4,
"prettier.useTabs": true // This made it finally work for me
我们敬爱的社区成员已经提供了很多很好的答案。我实际上想添加 C# 代码 tabSize 并找到了这个线程。我找到了很多解决方案,官方的VS Code 文档很棒。我只想分享我的 C# 设置:
"[csharp]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
只需将上面的代码复制并粘贴到您的settings.json
文件中并保存即可。谢谢
那是lonefy.vscode-js-css-html-formatter
罪魁祸首。禁用它,然后安装HookyQR.beautify
.
现在保存你的标签不会被转换。
您要确保您的 editorconfig 与您的用户或工作区设置配置不冲突,因为当我的编辑器配置撤消这些更改时,我认为设置文件设置没有被应用,我有点烦恼。
如果这个帖子上接受的答案不起作用,试试这个:
我在我的编辑器中安装了 Visual Studio Code 的 EditorConfig,它不断覆盖我的用户设置,这些设置使用空格缩进文件。每次我在编辑器选项卡之间切换时,即使我已将缩进转换为空格,我的文件也会自动使用制表符缩进!!!
在我卸载这个扩展之后,切换编辑器选项卡之间的缩进不再改变,而且我可以更舒适地工作,而不是每次切换文件时都必须手动将选项卡转换为空格——这很痛苦。
使用 TypeScript 时,无论工具栏中显示什么,默认选项卡宽度始终为 2。您必须在用户设置中设置“prettier.tabWidth”才能更改它。
Ctrl+ P,类型→用户设置,添加:
"prettier.tabWidth": 4
@alex-dima 2015 年的解决方案将更改所有文件的选项卡大小和空间,@Tricky 2016 年的解决方案似乎只更改当前文件的设置。
截至 2017 年,我找到了另一种适用于每种语言的解决方案。Visual Studio Code 没有为Elixir使用正确的选项卡大小或空间设置,所以我发现我可以更改所有 Elixir 文件的设置。
我点击了状态栏中的语言(在我的例子中是“Elixir”),选择了“Configure 'Elixir' language based settings...”,然后编辑了 Elixir 特定的语言设置。我只是从左侧的默认设置中复制了“editor.tabSize”和“editor.insertSpaces”设置(我很高兴显示了这些设置),然后在右侧进行了修改。
它工作得很好,现在所有 Elixir 语言文件都使用正确的选项卡大小和空间设置。
菜单文件→首选项→设置
添加到用户设置:
"editor.tabSize": 2,
"editor.detectIndentation": false
如果您已经打开了一个文档,则右键单击您的文档,然后单击“格式化文档”以使您现有的文档遵循这些新设置。
我必须像以前的答案一样进行很多设置编辑,所以我不知道经过大量修改后哪个使它起作用。
在我关闭并打开我的 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,
}
从评论:
有没有办法改变每种语言的 tabSize ?例如,在同一工作区中使用不同语言编辑多个文件(例如 Ruby、JavaScript、CSS 等)时 - Ruby 将是 2 个空格,但 CSS 将是 4 个……通常
这就是为什么使用 VSCode 1.63(2021 年 11 月),您可以:
多语言特定编辑器设置
您现在可以一次为多种语言配置特定于语言的编辑器设置。
以下示例显示了如何同时自定义 javascript 和 typescript 语言的设置:"[javascript][typescript]": { "editor.maxTokenizationLineLength": 2500 }
在你的情况下:
"[ruby][html]": {
"editor.insertSpaces": true,
"editor.tabSize": 2
},
"[csharp][typescript]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
我尝试将编辑器更改.tabSize
为 4,但.editorConfig
覆盖了我指定的任何设置,因此无需更改用户设置中的任何配置。您只需要编辑 .editorConfig 文件:
set indent_size = 4
如果这是针对 Angular 2 的,并且 CLI 正在生成您想要不同格式的文件,您可以编辑这些文件以更改生成的内容:
npm_modules/@angular/cli/blueprints/component/files/__path__/*
不强烈推荐,因为 npm 更新会删除你的工作,但它为我节省了很多时间。
User3550138 是正确的。lonefy.vscode-js-css-html-formatter
覆盖其他答案中提到的所有设置。但是,您不必禁用或卸载它,因为它可以配置。
打开扩展侧边栏并单击此扩展可以找到完整的说明,它将在编辑器工作区中显示配置说明。至少它在 Visual Studio Code 版本 1.14.1 中对我有用。