10 个 VSCode 神器插件,效率翻倍

10 个 VSCode 神器插件，效率翻倍

提升开发效率，程序员必备

1. GitHub Copilot

安装量： 1000w+
评分： 4.8/5

功能特点：

AI 代码补全
支持多种语言
智能代码建议
注释生成代码
单元测试生成
代码解释功能

安装方法：

打开 VSCode
点击左侧扩展图标
搜索 “GitHub Copilot”
点击安装
登录 GitHub 账号
授权 Copilot

使用示例：

# 输入注释，自动生成代码
# 计算斐波那契数列
def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)

# 编写正则表达式
# 匹配邮箱地址
email_pattern = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'

快捷键：

Tab – 接受建议
Esc – 拒绝建议
Alt+] – 下一个建议
Alt+[ – 上一个建议
Ctrl+Enter – 打开 Copilot 面板

收费情况： 付费（学生免费）

个人版：$10/月
企业版：$19/用户/月
学生：免费（凭学生证）
开源项目维护者：免费

使用技巧：

写清晰的注释
提供函数签名
给出示例输入输出
保持代码风格一致

2. Prettier

安装量： 3000w+
评分： 4.7/5

功能特点：

代码格式化
支持多种语言
自动保存格式化
统一团队代码风格
可配置规则

安装方法：

搜索 “Prettier – Code formatter”
点击安装
设置为默认格式化器

配置方法：

创建 .prettierrc 文件：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always"
}

自动格式化设置：

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

支持的语言：

JavaScript/TypeScript
CSS/SCSS/Less
HTML
JSON
YAML
Markdown
PHP
Python
Ruby
Swift

收费情况： 免费

3. ESLint

安装量： 2500w+
评分： 4.6/5

功能特点：

JavaScript 代码检查
实时错误提示
代码规范检查
自动修复问题
可配置规则

安装方法：

搜索 “ESLint”
点击安装
运行初始化命令

配置方法：

创建 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn',
    'react/prop-types': 'off'
  }
}

自动修复：

# 修复所有文件
npx eslint . --fix

# 修复指定文件
npx eslint src/app.js --fix

VSCode 设置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

收费情况： 免费

4. Live Server

安装量： 2000w+
评分： 4.8/5

功能特点：

本地服务器
实时预览
前端开发必备
自动刷新页面
支持 HTTPS

使用方法：

右键 HTML 文件
选择 “Open with Live Server”
自动在浏览器打开
修改代码后自动刷新

快捷键：

Alt+L, Alt+O – 打开 Live Server
Alt+L, Alt+C – 关闭 Live Server

配置选项：

{
  "liveServer.settings.port": 5500,
  "liveServer.settings.host": "localhost",
  "liveServer.settings.root": "/",
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.ignoreFiles": [
    ".gitignore",
    "**/.git/**",
    "**/node_modules/**"
  ]
}

收费情况： 免费

5. GitLens

安装量： 1500w+
评分： 4.7/5

功能特点：

Git 增强功能
代码作者显示
提交历史查看
代码对比
分支可视化
提交图

核心功能：

查看代码历史：

鼠标悬停在代码行上
显示最后修改人和时间
点击查看完整提交信息
查看文件历史

代码对比：

# 查看当前文件与上一版本的差异
GitLens: Compare with Previous Version

# 查看与指定提交的差异
GitLens: Compare with Selected

分支管理：

可视化分支图
快速切换分支
查看分支历史

快捷键：

Ctrl+Shift+G – 打开 Git 视图
Alt+G, Alt+H – 显示文件历史
Alt+G, Alt+B – 显示分支

收费情况： 免费（有付费高级功能）

6. Path Intellisense

安装量： 1000w+
评分： 4.6/5

功能特点：

路径自动补全
智能提示
减少拼写错误
支持多种框架
自定义映射

配置方法：

{
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src",
    "@components": "${workspaceFolder}/src/components",
    "@utils": "${workspaceFolder}/src/utils",
    "@assets": "${workspaceFolder}/src/assets"
  },
  "path-intellisense.showHiddenFiles": true,
  "path-intellisense.extensionOnImport": true
}

使用示例：

// 输入 @ 自动提示
import Component from '@/components/Component'
import { helper } from '@utils/helper'
import logo from '@assets/logo.png'

收费情况： 免费

7. One Dark Pro

安装量： 800w+
评分： 4.8/5

功能特点：

热门主题
护眼配色
语法高亮清晰
支持多种语言
可自定义

安装方法：

搜索 “One Dark Pro”
点击安装
按 Ctrl+K Ctrl+T 选择主题

配置选项：

{
  "workbench.colorTheme": "One Dark Pro",
  "oneDarkPro.bold": true,
  "oneDarkPro.italic": true,
  "oneDarkPro.vivid": true
}

收费情况： 免费

8. Material Icon Theme

安装量： 700w+
评分： 4.9/5

功能特点：

文件图标美化
美观直观
快速识别文件类型
支持自定义
文件夹颜色

配置方法：

{
  "material-icon-theme.activeIconPack": "react",
  "material-icon-theme.folders.color": "#42a5f5",
  "material-icon-theme.folders.associations": {
    "src": "source",
    "dist": "build",
    "utils": "tools"
  }
}

收费情况： 免费

9. REST Client

安装量： 500w+
评分： 4.7/5

功能特点：

API 测试
替代 Postman
直接在 VSCode 中测试
支持环境变量
支持认证

使用示例：

创建 api.http 文件：

### 获取用户列表
GET https://api.example.com/users
Content-Type: application/json
Authorization: Bearer {{token}}

### 创建用户
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "张三",
  "email": "zhangsan@example.com"
}

### 使用环境变量
@baseUrl = https://api.example.com
@token = your-token-here

GET {{baseUrl}}/users
Authorization: Bearer {{token}}

环境变量文件：
创建 api.env 文件：

baseUrl = https://api.example.com
token = your-token-here

发送请求： 点击 “Send Request” 按钮

收费情况： 免费

10. Docker

安装量： 400w+
评分： 4.5/5

功能特点：

容器管理
镜像构建
容器部署
可视化操作
日志查看

核心功能：

查看容器：

左侧 Docker 图标
查看所有运行中的容器
启动/停止/删除容器
查看容器日志

构建镜像：

右键 Dockerfile
选择 “Build Image”
输入镜像名称
完成构建

Docker Compose：

右键 docker-compose.yml
选择 “Compose Up”
启动所有服务

收费情况： 免费

其他推荐插件

代码相关：

IntelliCode – AI 智能提示
Code Spell Checker – 拼写检查
Bracket Pair Colorizer – 括号颜色匹配
TODO Highlight – 待办事项高亮

效率工具：

Todo Tree – 待办事项管理
Bookmarks – 代码书签
Tabnine – AI 代码补全
Codeium – 免费 AI 代码助手

前端专用：

Auto Rename Tag – 自动重命名标签
CSS Peek – CSS 快速查看
Image preview – 图片预览
Live Sass Compiler – Sass 编译

后端专用：

Docker – 容器管理
REST Client – API 测试
SQLTools – 数据库工具
Thunder Client – API 客户端

参考资源

VSCode 官方文档^[1]
VSCode 插件市场^[2]
GitHub Copilot 文档^[3]
Prettier 官方文档^[4]
ESLint 官方文档^[5]

收藏备用，提升开发效率！

引用链接

[1]VSCode 官方文档: https://code.visualstudio.com/docs

[2]VSCode 插件市场: https://marketplace.visualstudio.com/vscode

[3]GitHub Copilot 文档: https://docs.github.com/en/copilot

[4]Prettier 官方文档: https://prettier.io/docs/en/

[5]ESLint 官方文档: https://eslint.org/docs/user-guide/getting-started