前言
首先，这些内容是我翻阅vscode设置和在网络上搜索发现的。
如果想要下载vscode插件，仅需点开左侧栏的“扩展”图标即可搜索。
设置的话可以在设置界面搜索，但是用到的大部分是常用设置。
这个仅对于新手来说比较适用，大佬们有更好用的欢迎评论。
设置
自动保存
建议设置成：OnFocusChange；意思是当你的焦点发生变化时就会自动保存，这个焦点变化包括从vscode的内部窗口切换到另一个内部窗口，或者从vscode切换到外部窗口。所以只要动一动就会保存，再也不用担心忘记保存了。
自动折行
可以使你的代码过长时，将其折向下一行，而不是超到窗口外面。这样的好处是如果某行代码过长，也可以清晰的看出内容，而不需要手动拖动滚动条来查看。
可选项有开启（意思是在可视区域的边界处折行），wordWrapColumn（在设置的列处折行，比如你设置的80列，就会在某行达到80个字符长度的位置折行，注意：中文算两个字符长度），bounded（在前两者较小的那个位置处折行）
建议设置成 bounded
插件
重要推荐
Open in Browser
这个插件可以让你们直接将HTML在浏览器中打开（快捷键Alt+B），不然的话还需要很麻烦的打开，算是一个方便的小工具。
HTML Snippets、HTML CSS Support
这两个插件是在编写HTML和CSS时的代码提示插件，代码提示的原理是VSCode的一个特性，叫用户代码片段。
比如我在css的选择器中输入“back”，就会提示：
然后通过上下来选择，回车就可以快速打出。
关于用户代码片段，这个功能可以让你打出一个触发词后，出现一个选项，然后按下回车，就可以打出一个模板代码。而且是可以自定义的
你可以在打开左下角的设置，点击“用户代码片段”
img
之后会出现一个框，你在里面选择在哪个语言中添加一个代码片段（可以选择全局）
img
之后就可以进入修改或者添加，这里以js为例
img
body里的内容就是模板的内容，本质是一个数组，其中每一项都是一个字符串，每串字符在变为实际模板内容后后都会跟一个换行。也可以这样说，body中的每一项都是单独的一行。
Bracket Pair Colorizer
小伙伴们有没有在写代码时，找不到准确的括号内（指的是中括号，括号和花括号）写代码呢？使用这个插件可以让你的括号每对都会自动搭配颜色，方便区分每对括号，找准位置。而且显示你光标所在位置的父级括号的位置（黄色的那个线）。非常的好用。
Better Comments
不知道大家有没有遇到过这种情况，你写注释为了区分某个函数的位置，结果因为注释颜色浅，导致经常寻找需要花费很长时间。而 Better Comments 这个插件完美的解决了这个问题，他提供了一种花里胡哨的注释方式：在注释内的开头输入某些字符，可以使该行的注释的样式发生变化（如上图所示），最关键的是你可以自定义注释的样式（比如最后一个注释，“tag”就是触发这个样式的字符）可以根据自己的需求设置一些显眼的注释样式，方便好看。
可以设置的样式项，只需要打开扩展，找到这个扩展，右键点击，然后点击扩展设置，之后找到“打开setting.json”即可
设置
TODO tree
可以在注释中写上TODO项，之后就可以在画白圈这个地方看到你此工作区下所有的TODO项。
除了TODO，还可以写FIXME（修复我，就是需要修复的BUG的位置），[ ]（中括号一个空格，未完成的事项），[x]（已完成的事项），XXX（表示性能较差的地方）而且同样支持自定义标签。可以让你在写代码时更有条理
一般推荐
Auto Rename Tag
这个插件可以让你在修改HTML标签（应该所有超文本语言都可以使用）时，修改开始标签名会自动同步到结束标签上，反之也同样可以。
Better Align
可以使用Shift+Ctrl+P打开命令窗口，输入Align，就能将选中的代码对齐。对齐是针对":"对齐的，以":"为界，所有的":"都在中间。
Codelf
这个插件用于变量命名，可以在选中一段字符后，点击右键，然后点击“codelf”来哦跳转到外部网站查看关于这个词的相关命名。（直接打开网站搜也是一样的，所以这个插件的用处不大，但是网站的用处还是很大的）
Color Hightlight
颜色高亮，可以让你写颜色代码（也就是 # 开头的rgb颜色，也包括rgba()等）的背景色变为该颜色。
Error lens
可以将你的错误或者警告信息显示的对应的位置，不需要你再打开控制台来查找了（这个只能用来看编译时错误，就是实际运行前出现的错误）。
Local History
这个扩展可以在每次保存文件时，再保存一个备份，方便代码出现问题时，翻阅老版本的代码。
