Vscode插件

前言

我日常使用 vscode 较多,因为 vscode 的轻量化和丰富的生态,并且我比较喜欢折腾,到处找些好用(可能有的也不实用)的插件,所以给大家推荐一下我收藏的 vscode 插件。
注:本文只涉及插件的基本功能,插件的详细配置请移步官方文档。本人基于 windows 系统使用,其他系统可能略有差异。
好马用好鞍,好看的编辑器功能,可以提升程序员的使用体验,可以让开发人员心情舒畅,写 bug 更有动力!

插件总览

官方

Chinese (Simplified) Language Pack for Visual Studio Code

官方的中文汉化包!没错,对我这种小白很重要!

通过使用“Configure Display Language”命令显式设置 VS Code 显示语言,可以替代默认 UI 语言。 按下“Ctrl+Shift+P”组合键以显示“命令面板”,然后键入“display”以筛选并显示“Configure Display Language”命令。按“Enter”,然后会按区域设置显示安装的语言列表,并突出显示当前语言设置。选择另一个“语言”以切换 UI 语言。 请参阅文档并获取更多信息。

Python && Python Debugger && Pylance(IntelliSense)

Python 相关插件

C/C++ Extension Pack && C/C++ && C/C++ Themes && CMake Tools

c 语言相关插件

美化

One Dark Pro

我正在使用的主题皮肤

background

给 Visual Studio Code 添加背景,就是整个编辑器的背景图,我喜欢全屏幕的背景图

Bring background images to your Visual Studio Code

Material Icon Theme

扁平化的主题图标库,为文件和文件夹提供 Material Design 图标的 Visual Studio Code 扩展。

indent-rainbow

代码前空格彩色显示,让代码更清晰易读

This extension colorizes the indentation in front of your text, alternating four different colors on each step. Some may find it helpful in writing code for Python, Nim, Yaml, and probably even filetypes that are not indentation dependent.

Prettier - Code formatter

  • [ ] 一个专注于代码格式化的工具,支持多种编程语言,确保项目中的代码格式一致性。
    (需要配置文件,适合团队开发,统一的代码风格)

ESLint

  • [ ] JavaScript 和 TypeScript 的流行代码检查工具,帮助识别和修复常见的编码错误,并强制执行编码风格。
    (需要配置文件,适合团队开发,统一的代码风格)

基础功能

Code Spell Checker

Visual Studio Code 的拼写检查,帮助识别代码注释和字符串中的拼写错误和错别字。写英语单词拼错时会有蓝色波浪线提示,对于我这种英文学渣刚刚好,不过有时自定义的特殊变量什么的也会有波浪线提示,无伤大雅。

A basic spell checker that works well with code and documents.The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Error Lens

为 Visual Studio Code 提供内联错误消息和代码操作,帮助更有效地识别和修复错误。红色高亮 error 的代码行以及报错信息,让 bug 无处遁形(bushi)

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Auto Rename Tag

在重命名 HTML/XML 标签时,自动重命名配对的标签。得腱鞘炎概率-1

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Image preview

可以预览引入的图像

Shows image preview in the gutter and on hover

Path Intellisense

自动补全文件路径

Visual Studio Code plugin that autocompletes filenames.

colorize

用于给我们代码中的颜色进行高亮展示的插件

This extension your styles files looking for colors and generate a colored background (using the color) for each of them.

Code Runner

允许您在 Visual Studio Code 中运行代码片段或整个文件,支持多种编程语言。

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig, Mojo, Erlang, SPWN, Pkl, Gleam, and custom command.

YAML

为 Visual Studio Code 中的 YAML 文件添加语言支持,提供语法高亮和格式化功能。

Provides comprehensive YAML Language support to Visual Studio Code, via the yaml-language-server, with built-in Kubernetes syntax support.

Rainbow CSV

顾名思义,让csv文件颜色区分

A Visual Studio Code extension that highlights CSV columns based on their type.

IntelliCode && IntelliCode API Usage Examples

利用机器学习提供智能代码补全,帮助您更快地编写代码,减少错误。

GBK to UTF8 for vscode

可以将文件在GBK与UTF8编码之间无瑕转换

当从 vscode 中打开带有 GBK 相关编码文件的时候, 会自动弹出提示框提示是否转换. 或者你可以在命令面板中通过 Convert encoding to UTF8 命令手动转换。

CSS Peek

查看 css 定义

This extension adds support for Go To Definition and Go To Symbol in Workspace for css/scss/less classes and IDs found in HTML/React/Vue/Svelte/Pug/ejs/etc

拓展功能

CodeSnap

右键菜单:代码快照,分享代码方便截图保存复制仍能有一个美观的格式

Live Server

右键菜单:启动一个带有实时重新加载功能的本地开发服务器,用于 Web 开发项目。热更新功能,能够在浏览器实时预览 html 网页渲染。

Launch a local development server with live reload feature for static & dynamic pages.

vscode-pets

资源管理器下方会有 pet 栏,一个有趣的扩展,向 Visual Studio Code 工作区添加虚拟宠物,增添一丝乐趣和陪伴。写代码累了就给 pets 扔个球吧!

会了吧

侧边栏(会了吧):打开源码文件,回自动分析其中的英文单词,边写代码边学英语!

安装后,点击源码文件,会自动分析所有包含的单词,不在 已掌握单词列表 中的单词会自动添加到 陌生单词 列表

Project Manager

侧边栏(项目管理器):当有多个项目时的管理器,避免切换项目文件夹的麻烦。要先将工作区保存为项目

Todo Tree

侧边栏(待办事项):TODO事项

This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).

MySQL && Database Client JDBC

侧边栏(Database && NoSQL):轻量化的数据库客户端

docker

侧边栏(Docker):轻量化的docker管理工具

The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container.

Thunder Client

  • [ ] 侧边栏(Thunder Client):轻量化发请求工具,测 API

Thunder Client is a lightweight Rest API Client Extension for VS Code, hand-crafted by Ranga Vadhineni with a focus on simplicity, clean design and local storage.

Embedded IDE

在 vscode 上提供 8051, AVR, STM8, Cortex-M, MIPS MTI, RISC-V … 项目的 开发, 编译, 烧录 等功能。

WSL

vscode+WSL->linux

The WSL extension lets you use VS Code on Windows to build Linux applications that run on the Windows Subsystem for Linux (WSL). You get all the productivity of Windows while developing with Linux-based tools, runtimes, and utilities.

Remote - SSH && Remote - SSH: Editing Configuration Files && Remote Explorer

The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations.

AI

ChatGPT - 中文版

右键菜单&&侧边栏(ChatGPT - 中文版):GPT模型日常免费使用,无需翻墙,AI秒回答,稳定运行近两年
新模型同步最快,支持Key,GPT4o,Claude3,和国内外大模型等一系列主流模型

TONGYI Lingma

右键菜单&&侧边栏(通义灵码):通义灵码,是一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云 SDK/API 的使用场景调优,为开发者带来高效、流畅的编码体验。

CodeGeeX: AI Coding Assistant

右键菜单&&侧边栏(CodeGeeX):CodeGeeX是智谱AI旗下的一款基于大模型的智能编程助手,它可以实现代码的生成与补全,自动为代码添加注释,不同编程语言的代码间实现互译,针对技术和代码问题的智能问答,当然还包括代码解释,生成单元测试,实现代码审查,修复代码bug等非常丰富的功能。

GitHub Copilot && GitHub Copilot Chat

右键菜单&&侧边栏(Chat):github 的 ai 代码助手,根据上下文提供建议和补全,帮助编写代码的工具。

Git

GitHub Pull Requests

侧边栏(github 拉取请求):在 Visual Studio Code 中查看和管理 GitHub 拉取请求和问题

GitLens — Git supercharged

侧边栏(GitLens && GitLens Inspect):增强 Visual Studio Code 的 Git 功能,提供仓库历史的洞察、逐行责任注释等功能。(部分收费)

Git Graph

在源代码管理中:可视化您的仓库的 Git 历史记录,帮助您理解分支、合并和提交关系。

View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

Git History

在源代码管理中&&右键菜单:允许您在 Visual Studio Code 中查看和搜索 Git 历史记录。

Markdown

Markdown PDF

右键菜单:This extension converts Markdown files to pdf, html, png or jpeg files.

Markdown All in One

提供各种有用的功能,用于处理 Markdown 文件,包括快捷方式、生成目录等。例如给文字关联超链接,具体移步官方文档自行探索

All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

markdownlint

规范 markdown 写法小助手,同时用来格式化md文档
Markdown/CommonMark linting and style checking for Visual Studio Code

Markdown Preview Enhanced

让 markdown 预览有更多功能