11 扩展与插件之推荐的扩展

在上篇中，我们讲解了如何查找和安装 VSCode 扩展。很多时候，选择合适的扩展可以大幅提升我们的工作效率。本篇将为大家推荐一些实用的 VSCode 扩展。这些扩展旨在帮助开发者在不同的开发场景中提升生产力，让我们的代码更容易管理，调试和部署。

1. 代码编辑与格式化

Prettier

Prettier 是一个流行的代码格式化工具，支持多种语言。它以统一的格式输出代码，非常适合团队开发，保持代码风格一致。

安装方法：
在图库中搜索 Prettier，点击安装即可。

使用方法：

• 可以通过快捷键 Shift + Alt + F 格式化当前文件。
• 在 settings.json 中配置为保存时自动格式化：

"editor.formatOnSave": true

ESLint

ESLint 是一款强大的 JavaScript 代码检查工具，可以帮助你发现代码中的潜在错误并强制执行代码质量标准。

安装方法：
同样在扩展市场搜索 ESLint 并安装。

使用方法：
创建一个 .eslintrc.json 文件用于设置 ESLint 的规则。

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "warn"
  }
}

2. 调试与测试

Debugger for Chrome

Debugger for Chrome 允许你直接在 VSCode 中调试运行在 Chrome 中的 JavaScript 代码，简化了调试流程。

安装方法：
搜索 Debugger for Chrome 并安装。

使用方法：
在工作区添加一个调试配置：

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

启动调试时，点击绿色的 运行 按钮，VSCode 将自动打开 Chrome 并连接调试。

3. 项目管理与辅助

GitLens

GitLens 是一个强大的 Git 扩展，能够让你更好地理解和管理代码版本。它提供了丰富的 git 提示和可视化功能。

安装方法：
在库中搜索 GitLens 并安装。

使用方法：
安装后，GitLens 会在侧边栏显示 Git 相关信息。例如，你可以轻松查看每行代码的最后修改者和提交历史，只需将光标悬停在代码上即可。

Live Server

Live Server 可以为你的静态网页提供一个实时预览的本地服务器。每当你保存文件时，浏览器将自动更新，极大地提高了开发效率。

安装方法：
搜索 Live Server 并安装。

使用方法：
右键点击 HTML 文件，选择 “Open with Live Server”，即可在浏览器中查看效果。

4. 语言支持与智能提示

Python

对于 Python 开发者，Python 扩展提供了丰富的功能，包括代码片段、Linting、调试支持等等。

安装方法：
搜索 Python 并安装。

使用方法：
安装后，VSCode 自动识别 Python 项目，可以配置 Python 解释器：

"python.pythonPath": "C:\\Python39\\python.exe"

配合 Jupyter 扩展，可以直接在 VSCode 中运行和测试 Jupyter Notebook。

C/C++

对于 C/C++ 开发者，C/C++ 扩展提供了智能补全、调试、代码导航等功能。

安装方法：
搜索 C/C++ 并安装。

使用方法：
在工作区中创建一个 .vscode 文件夹，并添加 c_cpp_properties.json 文件配置路径。

{
  "configurations": [
    {
      "name": "Win32",
      "includePath": [
        "${workspaceFolder}/**"
      ],
      "defines": [],
      "compilerPath": "C:/Path/To/g++.exe",
      "cStandard": "c11",
      "cppStandard": "c++17",
      "intelliSenseMode": "gcc-x64"
    }
  ],
  "version": 4
}

结语

以上推荐的扩展可以为你的 VSCode 使用体验增添不少便利。根据你的开发需求，选择合适的扩展并合理配置，将会使你的工作流程更加高效。在接下来的篇章中，我们将讨论如何配置这些扩展，使其更好地符合你的个性化需求。