老鬼的博客 来都来啦，那就随便看看吧~
vscode常用插件
发布于: 2022-06-19 更新于: 2022-06-19 分类于:  阅读次数: 

一：介绍

1
vscode是一款微软开发的强大的编程工具，可以集成各种插件

二：下载

1
2
3
4
5
6
7
8
9
打开Chomre 百度搜索vscode，找到官方的网址进行下载，
这里会遇到一个问题，就是下载超级慢并且很容易超时，
如下方法可以加快下载速度：
1.打开Chomre的下载内容
2.复制出来刚下载的vscode的下载地址
	- https://az764295.vo.msecnd.net/stable/30d9c6cd9483b2cc586687151bcbcd635f373630/VSCodeUserSetup-x64-1.68.1.exe
3.将如上的地址域名az764295.vo.msecnd.net换成vscode.cdn.azure.cn即可
	- https://vscode.cdn.azure.cn/stable/30d9c6cd9483b2cc586687151bcbcd635f373630/VSCodeUserSetup-x64-1.68.1.exe
4.将新的下载点击放在浏览器中下载

9.png

9.png

1
2
下载好以后默认的右下角会提示下载中文插件，重启vscode以后就会
显示中文的操作界面。

9.png

三：常用插件

3.1 Live Server

1
2
此插件就是在你本地启动一个服务，然后通过此服务可以
在浏览器中直接访问你的网页。

12.png

3.2 Markdown Preview Enhanced

1
2
3
4
实时更方便直观的预览.md的文件
结合Markdown PDF插件使用要不然无法导出PDF，
需要下载：princexml
https://www.princexml.com/download/
  • Markdown Preview Enhanced

13.png

  • Markdown PDF

13.png

3.3 Github Theme

1
Github的主题，白的色比较亮，个人比较喜欢

3.4 vscode-icons

1
是一组文件或者文件夹的显示的样子

13.png

3.5 Auto Close Tag

1
自动闭合HTML/XML标签

13.png

3.6 Path Intellisense

1
自动提示文件路径，支持各种快速引入文件

13.png

3.7 Image preview

1
鼠标悬浮在链接上可及时预览图片

13.png

3.8 vscode-drawio

1
2
这款神器可以让我们在vscode里面快乐的画流程图。新建 .drawio 
后缀文件并拖入vscode中, 即可得到如下界面

13.png

3.9 JavaScript Booster

1
2
3
4
5
6
7
这款神器可以在我们代码写的不规范或者有待调整的地方，在光标聚焦后，会有一个小灯泡。
会提示对应的不合理原因和改进方案。极大的提高了我们的代码优雅度，强烈推荐

让您的生活更轻松，使用代码操作为您执行重复性任务！他们可以提供很多帮助，只需跟随灯泡！

当在JavaScript（或TypeScript / Flow）中编辑代码时，此VS Code扩展提供了各种代码操作（快速修复）。
只需注意左侧的灯泡，然后按一下它即可了解如何在光标下转换代码。

13.png

3.10 Better Comments

1
2
3
4
5
！ ， 红色注释
? , 蓝色注释
// , 灰色删除线注释
todo ,橘红色注释
* , 浅绿色注释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
settings.json加入如下配置，要不然不生效，
这里定义了tag的名字和颜色。
// Better Comments插件配置
"better-comments.tags": [
	{
		"tag":"@",
		"color":"blue",
		"strikethrough":false,
		"backgroundColor":"transparent"
	},
	{
		"tag":"!",
		"color":"#FF2D00",
		"strikethrough":false,
		"backgroundColor":"transparent"
	},
	{
		"tag":"?",
		"color":"#3498DB",
		"strikethrough":false,
		"backgroundColor":"transparent"
	},
	{
		"tag":"//",
		"color":"#474747",
		"strikethrough":true,
		"backgroundColor":"transparent"
	},
	{
		"tag":"todo",
		"color":"#FF8C00",
		"strikethrough":false,
		"backgroundColor":"transparent"
	},
	{
		"tag":"*",
		"color":"#98C379",
		"strikethrough":false,
		"backgroundColor":"transparent"
	}
],

13.png

3.11 koro1FileHeader

1
2
3
4
快速生成文件注释和方法注释的插件：
windows下：
Ctrl + win + t : 快速生成方法注释
Ctrl + win + i : 快速生成文件注释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
settings.json配置：

// 文件头部注释
"fileheader.customMade": {
	"Descripttion":"",
	"Author":"Renjie",
	"Date":"Do not edit",
	"LastEditors":"RenJie",
	"LastEditTime":"Do not Edit"
},
//函数注释
"fileheader.cursorMode": {
	"name":"",
	"msg":"",
	"param":"",
	"return":""
},

13.png

*************感谢您的阅读*************