插件推荐
VS Code
有一个很强大的功能就是支持插件扩展, 让你的编辑器仿佛拥有了三头六臂
官方插件市场: https://marketplace.visualstudio.com/vscode
基本插件
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
: 中文语言包
Git 相关插件
GitLens
: Git
管理插件
GitLens
在Git
管理上有很多强大的功能, 如:
- 将光标放置在代码的当前行, 可以看到这样代码的提交者以及提交时间
- 查看某个
commit
的代码改动记录- 查看不同的分支
- 可以将两个
commit
进行代码对比- 以将两个
branch
分支进行整体的代码对比
Git History
: 查询所有的Git
记录
Local History
: 维护文件的本地历史记录, 当代码意外丢失时可以救急
代码智能提示相关
Vue 插件
Vetur
是VS 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
: 保存文件时, 自动格式化HTML
、CSS
、JS
代码
图片相关
Polacode-2025
: 生成代码截图
可以把代码片段保存成美观的图片, 主题不同, 代码的配色方案也不同, 也可以自定义设置图片的边框颜色、大小、阴影
Image Preview
: 图片预览, 鼠标移动到图片url
上时, 会自动显示图片的预览和图片尺寸
CSS 样式相关
CSS Peek
: 增强HTML
和CSS
之间的关联, 快速查看该元素上的CSS
样式
Vue CSS Peek
: 由于CSS Peek
不支持Vue
, 该插件提供了对Vue
文件的支持
Color Info
: CSS
中使用颜色的相关信息
在颜色上悬停鼠标, 可以预览色彩模型的(
HEX
、RGB
、HSL
和CMYK
)相关信息
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
: 红色主题