vsCode插件

493 阅读2分钟

1.chinese

image.png 作用:把vscode的界面变成中文

2.Vetur

image.png 作用:vue2语法高亮,安装了这个插件,代码在vue文件中才有颜色。另外还可以格式化vue文件 vue3的话,请装Volar

3.eslint

image.png 作用:代码检查,我一般都不用这个,波浪线影响我的思维

4.Prettier - Code formatter

image.png 作用:代码格式化

5.open in browser

image.png 作用:允许在默认浏览器或应用程序中打开当前文件

6.Auto Close Tag(自动闭合标签)

image.png 作用:自动重命名成对的 HTML/XML 标记。

7.Auto Rename Tag(自动重命名标签)

image.png 作用:自动重命名成对的 HTML/XML 标记

8.Git History

image.png 作用:一般就是看文件的提交人,修改时间,日期,commit信息等

9.Bracket Pair Colorizer

image.png 作用:给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色 其实主要是就为了看出来div是哪个层级的

10.JavaScript(ES6) code snippets

image.png 作用:ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

11.Live Server

image.png 作用:用于将某个静态文件用一个服务容器来对外服务【类似开启了一个静态资源服务器】,说人话就是Live Server 是一个具有实时加载功能的小型服务器,使用它进行 web 页面开发就好像在服务器上修改页面一样。同时它因为具有实时加载功能,代码修改后页面会进行实时刷新,可以直观的看到网页的修改效果。 主要就是热更新,其实用vue脚手架或者react脚手架开发的话,基本上就不用了

12.Vue VSCode Snippets

image.png vue2、vue3的语法提示,可自定义语法片段

问题说明

a.换公司了,或者换电脑了,vscode不想一个一个装插件。

b.原本插件自己就配制了很多,一个个下载了还得自己去配置,很麻烦

解决:

1.打开之前电脑,找到原电脑VS Code的插件安装目录: 一般是在:C:\Users\用户名.vscode\extensions 不是的话就要去找下插件的安装目录 image.png 2.复制文件目录 extensions

image.png 3.在 新的电脑上同样找到安装目录下的.vscode,替换掉extensions 或者复制之前extensions下的插件文件,粘贴到当前新目录就好了

4.重启VSCode,插件会自动加载。