一种转换代码缩进的方法

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200美元免费额度!

一个问题

如果您复制了一个使用两个空格缩进的代码示例,并且想要将其转换为四个空格缩进,那么*最快*和最简单的选项是什么?

Matt StaufferTwitter

几年前我写过一篇关于如何在Sublime Text中执行此操作的文章。我认为在VS Code中差别不大。

但这里还有另一种方法:使用CodePen

步骤 1:复制并粘贴到 CodePen

假设您在其他地方找到了一些代码,只需复制并粘贴到其中即可

步骤 2:调整代码缩进设置

如果您已经有 CodePen 帐户,那么您可能已经设置好了,因此默认设置就是您喜欢的设置。但如果不是,请在“Pen 设置”区域中进行调整

Showing the Pen Settings modal open in CodePen over a demo. the settings show code indentation options for spaces and tabs and for indentation width.
代码以复制/粘贴的方式使用了 2 个空格,现在我们将其作为设置更改为 4 个空格。

步骤 3:格式化代码

您可以在此处手动执行此操作

如果您保存了 Pen 并启用了“保存时格式化”选项,则可能根本不需要使用该选项,因为它会自动发生。

它会很快切换到新的 4 个空格的首选项


CodePen 在后台使用 Prettier 来执行此操作。因此,您可以在任何可以访问 Prettier 工作版本的地方执行此操作,但在 CodePen 上可能更容易,因为无需编辑配置或任何内容来调整您想要的方式。Prettier 也有 自己的游乐场,这可能与 CodePen 一样简单,除了在 CodePen 上您可能已经设置了您的首选项,从而节省了一个步骤。