Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】

蔚落 2024-03-23 12:53 38阅读 0赞

### 一、VsCode 常见的配置 ###

#### 1、取消更新 ####

![5cd0aec93770d45880963b4eb4f83eaf.png][]

*  把插件的更新也一起取消了

![5b28150124104480fc418ac8d19bf3fd.png][]

#### 2、设置编码为utf-8：默认就是了，不用设置了 ####

#### 3、设置常用的开发字体：Consolas, 默认就是了，不用设置了 ####

*  字体对开发也很重要，不同字体，字母形态都不太一样，尤其是标点符号，逗号和分号的区分，有的字体看着这两者就很像

#### 4、设置ctr+滚轮，改变字体大小 ####

![eedd2982f5e0a3c5625baf2382bd28de.png][]

#### 5、设置行号：默认就有，不用设置了 ####

#### 6、自动保存： ####

![2bf08ba900fb5770edce387de42f57ce.png][]

#### 7、设置选项卡多行展示 ####

*  这样打开了很多个文件，就不会导致有的打开的文件被隐藏

![42318960b5967b23ddcce17b3b3b04c3.png][]

#### 8、设置查看当前类或文件的结构 OUTLINE ####

*  相当于idea 查看当前类或接口的结构 Structure

![f635e5df9fb31453fdb2a9a9dd259e5a.png][]

### 二、VsCode 常用好用插件 ###

#### 1、实时刷新网页的插件：LiveServer ####

![0bb9a120ca857a0a3198779f96413216.png][]

#### 2、open in browser ####

支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

![97a0970fc47bd8451fc6a8288f4f74f2.png][]

> 补充一下：LiveServer 和 open in browser 区别：注意观察浏览器地址栏
> 
>  *  open in browser：直接打开HTML文件就是通过File协议打开的
>  *  LiveServer: 通过http 协议打开的，地址栏会上看到主机名， Live Server启动了一个本地开发服务器，静态和动态页面都可以实时重载。

#### 3、自动闭合HTML/XML标签：Auto Close Tag ####

![d2dc17c183514643291a3257922c2889.png][]

#### 4、图片自动检查：Image preview ####

![6d7930f4cff7e0b812d781e25868db6e.png][]

#### 5、资源树目录：vscode-icon ####

它不仅能够给文件夹、文件添加上舒适的图标，而且可以自动检测项目，根据项目不同功能配上不同图标

![256a05a82f47c341a0b0ad3b125bb3a5.png][]

#### 6、AI 智能提示的插件：Tabnine ####

用IDE编写代码的时候可以给出智能提示，写的越多提示的越准确

![294e850f6cf8b69b053ad3281011ea61.png][]

--------------------

> #### 选择性安装的插件 ####
> 
> 像颜色提示、主题那种，还有语法检查、语法智能提示等

#### 本地历史代码记录： local history ####

#### git相关的插件：Git History ####

*  Git History提供了一个可视化的git日志。不再需要在终端查看git日志。可以比较各个分支、提交和跨提交的文件。

#### HTML CSS Support ####

*  智能提示CSS类名以及id

#### HTML Snippets ####

*  智能提示HTML标签，以及标签含义

#### JavaScript(ES6) code snippets ####

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

#### jQuery Code Snippets ####

*  jQuery代码智能提示

#### CSS Peek ####

*  使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

### 一、VsCode 开发相应项目推荐安装的插件 ###

#### 1、开发 Vue 项目必装的插件 ####

##### (1)【vue2】安装一个方便阅读 vue 代码的插件：Vetur #####

*  安装之后，vue 代码，文本颜色开始发生变化\[注释是绿色的哈哈哈\]，不安装，代码全是白色的。

> Vetur插件介绍：功能包括-**语法高亮**，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

*  vue3 使用的是插件 Vue Language Features (Volar)

![db987b3fb5ebb8136a7e6f05b21feeca.png][]

#### 2、开发 Lua 项目必装的插件 ####

##### (1) 安装一个方便阅读 lua 代码的插件：lua #####

![cb0fb139587fcb077ca1b869690a35d6.png][]

**如果本文对你有帮助的话记得给一乐点个赞哦，感谢！**

[5cd0aec93770d45880963b4eb4f83eaf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/41f149b636634d1c89f23f5fb5c12a4a.png
[5b28150124104480fc418ac8d19bf3fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/d976637a0a654d709c25c7469f140421.png
[eedd2982f5e0a3c5625baf2382bd28de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/8abbc9b18a134294b7658692005fe5bb.png
[2bf08ba900fb5770edce387de42f57ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/89f7624bd77b4692b1dae0f6aef105e9.png
[42318960b5967b23ddcce17b3b3b04c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e0b22cf659594799bc44bf8f9cafdec2.png
[f635e5df9fb31453fdb2a9a9dd259e5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7d8ded209d9d4b30a5262934e7e2fd03.png
[0bb9a120ca857a0a3198779f96413216.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7c9ae14e10cc47cd8de9784651ae7655.png
[97a0970fc47bd8451fc6a8288f4f74f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b11b971f61db41c5a27a963c58b1a07a.png
[d2dc17c183514643291a3257922c2889.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/95b8640f7c0945d2804d9abb244702d8.png
[6d7930f4cff7e0b812d781e25868db6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/fe91bd3a4dcf4a119f13a11b8a8bbcaf.png
[256a05a82f47c341a0b0ad3b125bb3a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3f8c796392af46978242018ec768a9ef.png
[294e850f6cf8b69b053ad3281011ea61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/4b6034fe86934768baa09e8db2405c72.png
[db987b3fb5ebb8136a7e6f05b21feeca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/527143f38ed846a881f1ef95a96b47c3.png
[cb0fb139587fcb077ca1b869690a35d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a98c4d4fdbd144f88d4c5e244dfb4243.png