Skip to content

插件推荐

VS Code有一个很强大的功能就是支持插件扩展, 让你的编辑器仿佛拥有了三头六臂

官方插件市场: https://marketplace.visualstudio.com/vscode

基本插件

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code: 中文语言包

Git 相关插件

GitLens: Git管理插件

GitLensGit管理上有很多强大的功能, 如:

  • 将光标放置在代码的当前行, 可以看到这样代码的提交者以及提交时间
  • 查看某个commit的代码改动记录
  • 查看不同的分支
  • 可以将两个commit进行代码对比
  • 以将两个branch分支进行整体的代码对比

Git History: 查询所有的Git记录

Local History: 维护文件的本地历史记录, 当代码意外丢失时可以救急

代码智能提示相关

Vue 插件

VeturVS Code官方钦定Vue插件, Vue开发者必备

Vue多功能集成插件, 包括: 语法高亮、智能提示、element、错误提示、格式化、自动补全、debugger等

React 插件

ES7 React

Redux

GraphQL

React-Native snippets

JS 插件

JavaScript(ES6) code snippets: ES6语法智能提示, 支持快速输入

javascript console utils: 快速打印log日志, 如选中name变量, 使用⌘ + Shift + L即可自动出现console.log(name)

TS 插件

TypeScript Importer

Pretty TypeScript Errors

拼写及标签相关插件

Code Spell Checker: 帮助捕获常见的单词拼写错误, 可以检测驼峰命名

Auto Close Tag: 自动闭合配对的标签

Auto Rename Tag: 自动重命名配对的标签

代码显示增强相关

highlight-icemode: 选中相同的代码时, 让高亮显示更加明显

使用后可以在设置中添加"editor.selectionHighlight": false关闭VS Code自带的高亮

Material Icon Theme: 根据文件的后缀名来显示不同的图标

indent-rainbow: 突出显示代码缩进

Better Comments: 为注释添加更醒目, 带分类的色彩

代码格式化相关

Prettier: 代码格式化

Prettier是一个代码格式化工具, 只关注格式化, 不具备校验功能, 在一个多人协同开发的团队中, 统一的代码编写规范非常重要

一套规范可以让我们编写的代码达到一致的风格, 提高代码的可读性和统一性, 自然维护性也会有所提高, 代码的展示也会更加美观

ESLint: 代码格式的校验

日常开发中, 建议用Prettier代码格式化, 然后用ESLint格式校验

JS-CSS-HTML Formatter: 保存文件时, 自动格式化HTMLCSSJS代码

图片相关

Polacode-2025: 生成代码截图

可以把代码片段保存成美观的图片, 主题不同, 代码的配色方案也不同, 也可以自定义设置图片的边框颜色、大小、阴影

Image Preview: 图片预览, 鼠标移动到图片url上时, 会自动显示图片的预览和图片尺寸

CSS 样式相关

CSS Peek: 增强HTMLCSS之间的关联, 快速查看该元素上的CSS样式

Vue CSS Peek: 由于CSS Peek不支持Vue, 该插件提供了对Vue文件的支持

Color Info: CSS中使用颜色的相关信息

在颜色上悬停鼠标, 可以预览色彩模型的(HEXRGBHSLCMYK)相关信息

Mardown 相关

Markdown Preview Github Styling: 以GitHub风格预览Markdown样式

Markdown All in One: 更高效地在VS Code中编写Markdown文档

markdownlint: Markdown格式检查

Markdown Table: 更高效的编写Markdown表格

通用工具相关

sftp: 文件传输

将本地文件通过ftp的形式上传到局域网的服务器

Live Server: 小型本地服务器

在本地启动一个服务器, 代码写完后可以实现热更新, 实时地在网页中看到运行效果

WakaTime: 统计在VS Code中写代码的时间

Code Time: 记录编程时间, 统计代码行数

File Tree to Text Generator: 快速生成文件的目录树

minapp: 小程序开发支持

主题相关

Dracula Theme: 吸血鬼主题, 本人也一直在用

Material Theme

Nebula Theme

One Dark Pro

One Monokai Theme

Monokai Pro

Ayu

Snazzy Plus

Dainty

GitHub Plus Theme: 白色主题

Horizon Theme: 红色主题