Vscode：常用插件 & 快捷键 & 配置等

qq_38969618

已于 2023-02-09 11:23:48 修改

阅读量7.7k

点赞数 1

分类专栏：前端实用开发工具快捷键&库&插件&网址&代码规范等文章标签： elementui vue.js javascript

于 2021-12-02 09:52:06 首次发布

本文链接：https://blog.csdn.net/qq_38969618/article/details/121670508

版权

前端实用开发工具快捷键&库&插件&网址&代码规范等专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、常用插件：

1.git相关的：

（1）在代码中显示git提交日志（包含Git账号&commit信息，给Vscode添加Git功能）：

GitLens — Git supercharged

（2）显示图形化的瀑布时间线Git记录，可基于某个分支创建新分支或搜某个commit：Git Graph

使用方法参考：vscode 插件 Git Graph 使用_沉迷月色831的博客-CSDN博客_git graph

2.修改标签时，自动重命名标签：Auto Rename Tag

3.彩虹括号（高亮突出括号匹配）：Bracket Pair Colorizer

4.编写便于阅读的注释（只能作用于js类文件，普通.html不能用）：Better Comments

使用方式：在js的单行注释或多行注释语句前：加特殊标志符即可。

// * 表示重点
// ! 表示错误和警告
// ? 表示询问和问题
// // 表示删除
// TODO 表示代办事项

5.描述性图标（区分不同文件和文件夹）：vscode-icons、Material Icon Theme、Simple icons.

6.在代码中显示引入或导入的估计大小：Import Cost

7.高亮缩进(每行代码之前的)：indent-rainbow

8.源码阅读做标记或书签类：Todo Tree、Bookmark

这2种标记都可以在VScode左侧边栏查看，并点击直接跳转到源码标记处。

Todo Tree使用：在注释语句中添加大写TODO关键字即可，如：// TODO xxx文本描述

Bookmarks使用：添加或删除书签快捷键：Ctrl + Alt + K

9、 koroFileHeader：自动添加文件头&函数注释模板语句：

文件头：Ctrl + Alt +i 函数注释：Ctrl + Alt +t

10、Svg Preview：在vscode中查看svg格式图片。

11、

二、常用快捷键：

快捷键	功能	备注
ctrl+shift+k	删除当前行

1.全局查找某个文件：ctrl + p

2.所有命令之母： ctrl + shift + p

3.查看函数或符号定义（定义需使用关键词如function声明的）：

直接跳转到定义文件：F12

以预览方式查看定义文件：Alt+F12

4.前进或后退到光标所在源码的上一个光标所在位置：alt + 键盘左右方向键

5.单行注释：ctrl + / 多行注释：Alt+Shift+A

三、快速生成HTML标签

1.带有某个类的div：div.类名

2多个标签（乘法运算符）：div*10

四、其他使用操作

1.配置User Snippets常用代码片段（用法：输入关键词-》Tab-》自动生成目标代码）

左下角"设置" -> "用户代码片段" -> 对应编程语言的json配置文件如：javascript.json ->编写json配置即可。

{
	"Print to console":{
		"prefix": "lg",  // 输入的关键词
		"body": [
			"\tconsole.log(\"这是我要打印的内容\",$0);"  // tab键点击后生成的目标代码片段; $0变量位置即光标定位的位置;双引号需转义；
		],
		"description":"Print the console" // 输入关键词后VScode给的提示语，默认不写是key
	}
}

// 变量可枚举的2种提示用法
"body" : [
    "printf(\"%${1:you can use i,s,c,f}\", $2);"  // 花括号+冒号
    "printf(\"%${1|i,s,c,f|}\", $2);"  // 花括号+2个竖杠
]

// 文件注释头
"header comment": {
		"prefix": "hc",
		"body": [
			"$BLOCK_COMMENT_START", // 注释开头特殊变量
			" * Author: lucy",
			" * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE", // 当前年月日特殊变量
			"$BLOCK_COMMENT_END"
		]
}

Snippers快速生成工具：GitHub - pawelgrzybek/snippet-generator: Snippet generator for Visual Studio Code, Sublime Text and Atom