VSCode好用的插件

文章目录

  • 前言
  • [1.Snippet Creator & easy snippet(自定义代码)](#1.Snippet Creator & easy snippet(自定义代码))
  • [2.Indent Rainbow(代码缩进)](#2.Indent Rainbow(代码缩进))
  • [3.Chinese (Simplified) Language Pack(中文包)](#3.Chinese (Simplified) Language Pack(中文包))
  • [4.Path Intellisense(路径提示)](#4.Path Intellisense(路径提示))
  • 5.Beautify(格式化)
  • [6. Bracket Pair Colorizer(不同括号颜色)](#6. Bracket Pair Colorizer(不同括号颜色))
  • [7.open in browser(打开浏览器)](#7.open in browser(打开浏览器))
  • [8.HTML CSS Support(HTML&CSS自动补齐)](#8.HTML CSS Support(HTML&CSS自动补齐))
  • [9.JavaScript (ES6) code snippets(ES6语法提示)](#9.JavaScript (ES6) code snippets(ES6语法提示))
  • 10.JSON(JSON管理)
  • [11.IntelliJ IDEA Keybindings](#11.IntelliJ IDEA Keybindings)
  • [12.Error Lens(错误提示)](#12.Error Lens(错误提示))
  • [13.Image Preview(图片在线预览)](#13.Image Preview(图片在线预览))
  • 其他VSCode文章

前言

好用的插件可以快速提升开发者的生产力,下面介绍个人比较常用的VSCode插件。

VSCode插件安装

1.Snippet Creator & easy snippet(自定义代码)

  • snippet-creator适合快速输入,如果要进一步调整,那就需要用到easy snippet了。虽然easy snippet也有快速插入的功能,但貌似有点问题

  • easy snippet有个单独的视图界面,在这个界面中分组列出了所有的用户代码片段,可以在这个视图中进行删除,编辑,新增

使用方法:编写自定义代码,全选后->F1(或ctrl+shift+p)->create snippet->名称->按键(快捷键设置)->描述。
1)编写自定义代码,全选后,按下F1,搜索create snippet


2)分别设置名称,按键(快捷键设置)和描述




3)结果图,以后只需要按下psvm就可加载如下代码

2.Indent Rainbow(代码缩进)

Indent Rainbow使用颜色编码可以更轻松地跟踪特定代码块的起始和结束位置。通过这个扩展,你只需要跟随颜色,就可以轻松地浏览你的代码,更好地理解和管理代码的结构。

3.Chinese (Simplified) Language Pack(中文包)

4.Path Intellisense(路径提示)

5.Beautify(格式化)

格式化 html ,js,css

6. Bracket Pair Colorizer(不同括号颜色)

给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

7.open in browser(打开浏览器)

vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

8.HTML CSS Support(HTML&CSS自动补齐)

在编写样式表的时候,自动补全功能大大缩减了编写时间。

9.JavaScript (ES6) code snippets(ES6语法提示)

10.JSON(JSON管理)

11.IntelliJ IDEA Keybindings

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

12.Error Lens(错误提示)

13.Image Preview(图片在线预览)

其他VSCode文章

相关推荐
?? Daisy1 小时前
Codex 接入第三方 API:CLI 与编辑器扩展的配置方法(2026-10)
编辑器
kite01211 天前
TraeCode 与 TraeWork 合并:AI 时代 IDE 的三种形态与未来开发工具
ide·ade·traework·traecode
weixin_461769401 天前
VS Code 中创建 Jupyter 文件(.ipynb)
ide·python·jupyter
浪潮IT馆1 天前
Android Studio 非最新版本下载安装教程
android·ide·android studio
初雪云1 天前
UniApp 云打包拿到 IPA 后,真正的发布工作才刚开始
ios·自动化·编辑器·产品经理·iphone
慧都小项1 天前
组件改名,引用同步更新:WebStorm的重构能力用在哪里?
ide·重构·webstorm
幸运小圣2 天前
Buffer 新手入门【Node.js】
node.js·编辑器·vim
*wait for?2 天前
VScode使用uv-创建python虚拟环境
ide·vscode·编辑器
lzx_0022 天前
Linux 开发工具(二) 简单认识一下编辑器 —— vim
linux·编辑器·vim
意法半导体STM322 天前
【官方原创】LAT1724 STM32CubeIDE for VSCode 修改链接文件中的起始地址无效?
vscode·stm32·单片机·嵌入式硬件·mcu·stm32cube