在使用Visual Studio代码时,如何自定义制表符到空格的转换因子?
例如,现在在HTML中,每次按TAB键会产生两个空格,但在TypeScript中会产生4个空格。
在使用Visual Studio代码时,如何自定义制表符到空格的转换因子?
例如,现在在HTML中,每次按TAB键会产生两个空格,但在TypeScript中会产生4个空格。
默认情况下,Visual Studio Code将根据您打开的文件尝试猜测缩进选项。
你可以通过"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,但我认为这也适用于其他版本。
看看屏幕的右下角。您应该看到显示空格或制表符大小的内容。
我的是空格→
点击空格(或Tab-Size) 选择“使用空格缩进”或“使用制表符缩进” 选择所需的空格或制表符数量。
这只适用于每个文档,而不是整个项目。如果你想在项目范围内应用它,你还需要在你的用户设置中添加"editor.detectIndentation": false。
默认情况下,Visual Studio Code自动检测当前打开文件的缩进。如果您想关闭此功能并使所有缩进,例如,两个空格,您可以在用户设置或工作区设置中执行以下操作。
{
"editor.tabSize": 2,
"editor.detectIndentation": false
}
我们可以用EditorConfig和它的EditorConfig for VS Code扩展来控制文件类型的选项卡大小。然后,我们可以对每种文件类型使用Alt + Shift + F。
安装
用CTRL + P打开VS Code命令面板并粘贴如下:
ext install EditorConfig
示例配置
editorconfig。
[*]
indent_style = space
[*.{js,ts,json}]
indent_size = 2
[*.java]
indent_size = 4
[*.go]
indent_style = tab
settings.json
EditorConfig覆盖任何设置。Json为编辑器配置。不需要更改editor.detectIndentation。
Note
如果你正在谈论tabSize的更漂亮,请参阅答案的第2部分
第一部分:VS代码方式
如果你喜欢开发人员的方式,Visual Studio Code允许你为tabSize指定不同的文件类型。下面是我的设置示例。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的新版本中),你可以:
左下档→ 设置→右上方打开设置
第二节:如果使用更漂亮
如果你使用的是prettier,情况可能会有所不同,prettier有两个级别的设置:
用户级别,你可以点击扩展和点击设置找到关键字tabWidth 项目级别,您可以从. pretierrc文件中的根项目级别添加/更新
User3550138正确。lonefy。vcode -js-css-html-formatter覆盖其他答案中提到的所有设置。但是,您不必禁用或卸载它,因为它可以配置。
可以通过打开扩展侧边栏并单击该扩展来找到完整的说明,它将在编辑器工作区中显示配置说明。至少在Visual Studio Code版本1.14.1中对我来说是这样的。
如果这是针对Angular 2的,并且CLI正在生成你想要不同格式的文件,你可以编辑这些文件来改变生成的内容:
npm_modules/@angular/cli/blueprints/component/files/__path__/*
不推荐大量的npm更新,因为它会删除你的工作,但它为我节省了很多时间。
@ alexo -dima从2015年开始的解决方案将改变所有文件的制表符大小和空格,@Tricky从2016年开始的解决方案似乎只改变当前文件的设置。
截至2017年,我找到了另一种针对每种语言的解决方案。Visual Studio Code没有为Elixir使用合适的标签大小或空间设置,所以我发现我可以更改所有Elixir文件的设置。
我点击状态栏中的语言(在我的例子中是“Elixir”),选择“Configure 'Elixir' language based settings…”,并编辑Elixir特定的语言设置。我只是复制了“编辑器”。tabSize和编辑器。“insertSpaces”设置从左边的默认设置(我很高兴显示这些设置),然后在右边修改它们。
它工作得很好,现在所有Elixir语言文件都使用了适当的制表符大小和空间设置。
菜单文件→首选项→设置
添加到用户设置:
"editor.tabSize": 2,
"editor.detectIndentation": false
然后右键单击你的文档,如果你已经打开了一个,然后单击格式化文档,让你现有的文档遵循这些新的设置。
我试着换编辑器。tabSize改为4,但是. editorconfig将覆盖我所指定的任何设置,因此不需要更改用户设置中的任何配置。你只需要编辑.editorConfig文件:
set indent_size = 4
当使用TypeScript时,默认的选项卡宽度总是2,不管它在工具栏中说什么。你必须设置“更漂亮”。tabWidth"在你的用户设置中更改它。
Ctrl + P,输入→用户设置,添加:
"prettier.tabWidth": 4
如果这篇文章中接受的答案不奏效,试试这个:
我在编辑器中安装了用于Visual Studio Code的EditorConfig,它一直覆盖我的用户设置,这些设置被设置为使用空格缩进文件。每次我在编辑器选项卡之间切换时,我的文件都会自动用选项卡缩进,即使我已经将缩进转换为空格!!
在我卸载了这个扩展后,缩进不再改变切换编辑器选项卡之间,我可以更舒适地工作,而不是必须手动转换选项卡到空格每次我切换文件-这是痛苦的。
在Visual Studio Code版本1.31.1或更高版本中(我认为):像sed Alex Dima一样,您可以通过这些设置轻松地自定义
Windows菜单中的文件→首选项→用户设置或使用短键Ctrl + Shift + P Mac在菜单代码→首选项→设置或⌘,
如果您在Visual Studio Code中使用更漂亮的扩展,请尝试将此添加到设置中。json文件:
"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,
"prettier.tabWidth": 4,
"prettier.useTabs": true // This made it finally work for me
我不得不像之前的答案一样做了很多设置编辑,所以我不知道在做了很多修改后它能正常工作。
在我关闭并打开我的IDE之前没有任何工作,但我所做的最后三件事是禁用lonefy。html.format vscode-js-css-html-formatter。”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,
}
我们亲爱的社区成员已经提供了很多很好的答案。我实际上想添加c#代码tabSize,并找到了这个线程。我找到了很多解决方案,官方VS Code文档很棒。我只是想分享我的c#设置:
"[csharp]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
只需复制并粘贴上述代码到您的设置。Json文件并保存。谢谢
评论如下:
有没有办法改变每一种语言的tabSize ?例如,当在同一个工作区中编辑多个不同语言的文件时(如Ruby, JavaScript, CSS等)- Ruby将是2个空格,但CSS将是4个…通常
这就是为什么,VSCode 1.63(2021年11月),你有:
多种语言特定的编辑器设置 现在,您可以一次为多种语言配置特定于语言的编辑器设置。 下面的例子展示了如何同时自定义javascript和typescript语言的设置: “[javascript](打印稿)":{ “编辑器。maxTokenizationLineLength”:2500 }
在你的情况下:
"[ruby][html]": {
"editor.insertSpaces": true,
"editor.tabSize": 2
},
"[csharp][typescript]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
你也可以在终端中改变制表符的大小,使用VSCode 1.75(2023年1月)。
一个更简单的方法是使用Visual Studio Code提供的内置通配符过滤器@lang:。
步骤
点击设置图标(左下) 选择设置 在搜索设置输入框中输入@lang:javascript tabsize
这将过滤所有的设置,只留下javascript的tabSize选项。输入您想要的tab因子,它将应用于该语言。
请注意 要将这些设置应用到用户配置文件,请确保选择了user选项卡。如果选择Workspace选项卡,VSCode将在你的项目文件夹中创建一个带有设置的. VSCode文件夹。json文件;这意味着您所做的任何更改都只应用于当前工作空间(项目文件夹) 你可以将它用于任何其他语言,例如@lang:php tabsize