vscode怎么安装扩展

1. 什么是VSCode扩展

VSCode是一款极其强大的开发工具，它的强大之处就在于它的扩展系统。通过安装扩展，我们可以大大提升我们的工作效率和开发体验。说白了，扩展就是增强了VSCode的功能，帮助我们更好地完成编码、调试、测试等各种工作。

2. 如何打开扩展商店

VSCode 的扩展商店是我们安装扩展的关键。打开 VSCode，你可以找到左侧面板中的 Extensions 图标。点击后，你可以在搜索框中输入关键词搜索要安装的扩展，也可以选择类别来进行扩展的浏览。点击安装按钮即可进行扩展的安装。

3. 扩展推荐

3.1 Live Server

有时候我们需要实时看到我们的网页所做的修改，并且进行调整和优化。这时候 Live Server就可以派上用场了。它可以为我们提供一个本地服务器，实时对 HTML、CSS、JavaScript和 JSON 文件进行调整。你可以随时看到最新版本的网页，同时进行 Debug 调试。

npm install -g live-server

然后打开你的项目文件夹，在项目文件夹下右键，选择“Open With Liv Server”。这样就可以在浏览器中看到实时更新的版本了。

3.2 GitLens

GitLens 是一个可以增强 Visual Studio Code 中 Git 功能的插件。它可以为我们提供更加详细的代码修改历史记录、行级别的注释、详细的分支记录等等。有了它的帮助，我们可以轻松地管理版本控制、协作开发。

3.3 Prettier - Code formatter

在写代码的时候，保持一定的代码格式是非常重要的。Prettier 就是一个可以帮助我们自动规范化代码格式的扩展。同时，它也支持大多数的代码格式配置，可以让你的代码更加灵活、规范。

npm install --save-dev --save-exact prettier

在 VSCode 中找到 Prettier 设置，然后在右上角点击 Edit in settings.json。

{

    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3.4 Bracket Pair Colorizer 2

当我们写代码的时候，现在代码块的嵌套结构是非常常见的。这时候如果我们能够使用颜色来区分就能更容易进行代码的查看和理解了。Bracket Pair Colorizer 2 就是能帮我们把相同等级关系的括号加上不同的颜色，让我们更容易地观察代码结构。

4. 总结

通过以上的介绍，相信你已经对 VSCode 的扩展系统和各种扩展有了更加深入的了解。当然，这些扩展只是众多非常强大的扩展之一，你还可以根据自己的需要进行尝试。相信在不断地使用和尝试中，你会发现一个更加高效、轻松的代码世界正在慢慢地摆在你面前。