VSCode常用插件和好用配置有哪些

Visual Studio Code（简称VSCode）是一款由微软开发的免费、开源的代码编辑器。它支持多种编程语言，具有丰富的插件生态系统，能够极大地提升开发效率。本文将介绍一些常用的VSCode插件和配置，帮助你更好地使用这款强大的编辑器。

目录

1. 常用插件
   • 1.1 代码格式化
   • 1.2 代码补全
   • 1.3 版本控制
   • 1.4 调试工具
   • 1.5 主题和图标
   • 1.6 其他实用插件
2. 好用配置
   • 2.1 编辑器设置
   • 2.2 快捷键配置
   • 2.3 工作区配置
   • 2.4 集成终端
   • 2.5 调试配置
3. 总结

常用插件

代码格式化

1. Prettier - Code formatter

   • 功能: 自动格式化代码，支持多种语言（JavaScript、TypeScript、CSS、HTML等）。
   • 使用方法: 安装后，可以通过右键菜单或快捷键格式化代码。
   • 配置: 可以在.prettierrc文件中自定义格式化规则。

2. ESLint

   • 功能: 用于JavaScript和TypeScript的代码检查和格式化。
   • 使用方法: 安装后，VSCode会自动检测项目中的ESLint配置文件，并在编辑器中显示错误和警告。
   • 配置: 可以在.eslintrc文件中自定义规则。

代码补全

1. IntelliSense for CSS class names in HTML

   • 功能: 自动补全HTML文件中的CSS类名。
   • 使用方法: 安装后，在HTML文件中输入class属性时，会自动提示项目中定义的CSS类名。

2. Python

   • 功能: 提供Python语言的代码补全、调试、格式化等功能。
   • 使用方法: 安装后，VSCode会自动识别Python文件并提供相应的功能。

3. TabNine

   • 功能: 基于的代码补全工具，支持多种语言。
   • 使用方法: 安装后，在编写代码时会自动提示可能的代码片段。

版本控制

1. GitLens

   • 功能: 增强VSCode的Git功能，提供代码作者、提交历史、代码比较等功能。
   • 使用方法: 安装后，可以在代码行旁边看到提交信息，并通过右键菜单查看详细历史。

2. Git History

   • 功能: 查看Git提交历史、分支、标签等信息。
   • 使用方法: 安装后，可以通过命令面板或右键菜单查看Git历史。

调试工具

1. Debugger for Chrome

   • 功能: 在VSCode中调试JavaScript代码，支持Chrome浏览器。
   • 使用方法: 安装后，配置launch.json文件，即可在VSCode中启动调试。

2. PHP Debug

   • 功能: 用于调试PHP代码。
   • 使用方法: 安装后，配置launch.json文件，即可在VSCode中启动调试。

主题和图标

1. Material Theme

   • 功能: 提供多种Material Design风格的主题。
   • 使用方法: 安装后，在设置中选择喜欢的主题。

2. vscode-icons

   • 功能: 为文件和文件夹提供丰富的图标。
   • 使用方法: 安装后，VSCode会自动应用图标。

其他实用插件

1. Bracket Pair Colorizer

   • 功能: 为匹配的括号添加颜色，方便识别代码块。
   • 使用方法: 安装后，VSCode会自动为括号着色。

2. Live Server

   • 功能: 启动一个本地开发服务器，实时预览HTML文件。
   • 使用方法: 安装后，右键点击HTML文件，选择“Open with Live Server”。

3. Remote - SSH

   • 功能: 通过SSH远程连接服务器，并在VSCode中编辑远程文件。
   • 使用方法: 安装后，通过命令面板连接远程服务器。

好用配置

编辑器设置

1. 字体和字号

   • 配置: 在settings.json中设置editor.fontFamily和editor.fontSize，例如：

     
     "editor.fontFamily": "Consolas, 'Courier New', monospace",
     "editor.fontSize": 14
     

2. 自动保存

   • 配置: 在settings.json中设置files.autoSave，例如：

     
     "files.autoSave": "afterDelay"
     

3. 缩进和制表符

   • 配置: 在settings.json中设置editor.tabSize和editor.insertSpaces，例如：

     
     "editor.tabSize": 4,
     "editor.insertSpaces": true
     

快捷键配置

1. 自定义快捷键

   • 配置: 在keybindings.json中自定义快捷键，例如：

     
     {
      "key": "ctrl+shift+l",
      "command": "editor.action.selectAll",
      "when": "editorTextFocus"
     }
     

2. 常用快捷键

   • 格式化代码: Shift + Alt + F
   • 查找文件: Ctrl + P
   • 查找符号: Ctrl + Shift + O
   • 切换终端: Ctrl +`

工作区配置

1. 工作区设置

   • 配置: 在工作区根目录下创建.vscode/settings.json文件，配置工作区特定的设置，例如：

     
     {
      "files.exclude": {
          "**/.git": true,
          "**/.DS_Store": true
      }
     }
     

2. 任务配置

   • 配置: 在工作区根目录下创建.vscode/tasks.json文件，配置自定义任务，例如：

     
     {
      "version": "2.0.0",
      "tasks": [
          {
              "label": "Build",
              "type": "shell",
              "command": "npm run build",
              "group": {
                  "kind": "build",
                  "isDefault": true
              }
          }
      ]
     }
     

集成终端

1. 终端配置

   • 配置: 在settings.json中设置terminal.integrated.shell，例如：

     
     "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
     

2. 终端快捷键

   • 新建终端: Ctrl + Shift +`

调试配置

1. 调试配置

   • 配置: 在工作区根目录下创建.vscode/launch.json文件，配置调试选项，例如：

     
     {
      "version": "0.2.0",
      "configurations": [
          {
              "type": "node",
              "request": "launch",
              "name": "Launch Program",
              "program": "${workspaceFolder}/app.js"
          }
      ]
     }
     

2. 调试快捷键

   • 启动调试: F5
   • 停止调试: Shift + F5
   • 单步跳过: F10
   • 单步进入: F11

总结

VSCode是一款功能强大的代码编辑器，通过安装合适的插件和配置，可以极大地提升开发效率。本文介绍了一些常用的插件和配置，涵盖了代码格式化、补全、版本控制、调试、主题等多个方面。希望这些内容能帮助你更好地使用VSCode，提升开发体验。