前端入门之如何配置 VSCode：好用的个性化设置和推荐扩展

前言

在开发过程中，一个高效的开发环境可以提高你的工作效率，而 Visual Studio Code（以下简称 VSCode）正是众多开发者钟爱的编辑器之一，但是对于刚上手的小伙伴来说，很多设置及配置都不知道，导致开发效率大大降低，那么在本文中，我将分享一些个性化 VSCode 设置和一些必不可少的扩展，希望能够为你的开发工作带来便利和提升。

扩展

1.Prettier

Prettier 是一个非常实用的工具，它能够帮助你保持代码的一致性，并节省大量手动调整代码格式的时间，配合下文介绍的几个格式化设置则更加如鱼得水。另外，Prettier 不仅支持 JavaScript 和 TypeScript，还支持许多其他语言，如 HTML、CSS、JSON、Markdown 等。

虽然 Prettier 有一组默认的代码格式化规则，但你也可以根据需要进行配置，定制适合你项目的格式化规则。可以查阅官方网站的文档 prettier.io/docs/en/opt… 随后在当前文件夹下创建一个名为.prettierrc的配置文件，在里面写入配置即可，下图所示的配置意为对代码文件中使用的单双引号统一转换为单引号

2.Color Highlight

Color Highlight 扩展能够识别代码中的颜色值，并在代码中直接展示相应颜色的预览。这样，你就可以更直观地看到代码中的颜色，而不需要手动去查找或者记忆颜色值。

当你的代码中包含颜色值（如 hex、rgb、rgba、hsl、hsla 等）时，Color Highlight 会在代码中直接显示颜色的预览。

另外值得一提的是，你可以根据自己的需要自定义颜色预览的样式，比如修改颜色预览框的边框样式、背景色等。但是我没有改，因为默认设置也非常好用了

3.ImagePreview

这项扩展允许你在编辑器中直接预览图像文件，而无需切换到其他应用程序或查看器。这使得在编写代码的同时查看图像变得非常方便，特别是在涉及到前端开发或设计工作时。

当你在代码中引用图像文件时，Image Preview 扩展会自动在编辑器中显示图像的预览，让你能够直观地查看图像内容。并且，Image Preview 支持多种常见的图像格式，包括 PNG、JPEG、GIF、SVG 等。

4.Live Server

这个扩展也是老生常谈了，它提供了一个简单易用的实时预览功能，让你可以在本地开发环境中实时查看和调试网页。它支持 HTML、CSS 和 JavaScript 文件，并能够自动重新加载页面以反映你所做的更改，从而提高你的开发效率。你可以在右下角点击Go Live按钮来打开，也可以右击文件选择Open With Live Server选择来打开

5.Auto Rename Tag

Auto Rename Tag 扩展能够在你修改 HTML 或 XML 文件中的一个标签名时，自动修改对应的闭合标签名，从而保持标签名的一致性。这个功能特别适用于在编辑器中快速调整标签名的情况，避免了手动查找和修改闭合标签名的麻烦。

另外不知为何，先前我在安装此扩展时VsCode突然提示说Setting里已有类似功能，让我勾选后可以达到同样的效果。我勾选后发现确实可以自动更改标签，于是乎卸载了Auto Rename Tag扩展。 但是现在回去查找却忘了具体是哪个设置，如有大佬知道的话还请评论区告诉我一下。

6.One Monoai Theme && Monokai Pro

One Monokai Theme 是一款基于经典 Monokai 风格的代码主题，它采用了简洁、明亮的设计风格，使得代码在编辑器中更加突出和易于阅读。One Monokai Theme 提供了简洁清晰的配色方案，适用于日常的编码工作，并且在不同的语言和文件类型中都有良好的适配效果。

Monokai Pro 则是一款基于经典 Monokai 风格的代码主题，但提供了更加现代化和精致的外观。它融合了暗色主题的优雅和色彩的强烈对比，使得代码在编辑器中更加突出和易于阅读。Monokai Pro 提供了多种颜色方案和样式，以满足不同开发者的喜好。

这两款包含的主题都是非常漂亮且实用的，安装了此二扩展的各位可以依据爱好来选择。

个性化设置

1.Default Formatter

在这里你可以更改你的默认格式化的方式，如果你安装了上文所提到的Prettier扩展则可以选择此配置

2.Format On Save

勾选此选项后，VsCode会在每次你保存时对代码进行格式化，可以省去很多手动格式化的时间

3.Auto Save

此选项默认是关闭的，你可以更改设置让VsCode在对应情况进行自动保存，这里建议选择onFocusChange选项，如此一来只要VsCode窗口失去焦点则会进行自动保存，简直不要太方便

4.Tab Size

制表符大小根据自己的习惯来调，你可以选择较大的制表符大小，以获得更宽松的代码布局。不过我个人推荐设置为2，这样可以使代码更加紧凑和整洁，缩进的深度更加明显。这对于在代码中快速定位到特定的缩进级别或代码块是非常有用的。

另外，随着现代屏幕和窗口尺寸的增加，较小的制表符大小可以使得在更窄的窗口中显示更多的代码行，从而提高了编辑器的可用性和效率。