1、VS Code介绍
官网：https://code.visualstudio.com/
VSCode全称是Visual Studio Code，是微软在15年推出的免费跨平台的编辑器，并且具有很强大的功能。
- 支持几乎所有的主流的开发语法高亮。
- 智能代码补全
- 自定义快捷键
- 强大的插件扩展
- 跨平台
- ......
常说「工欲善其事，必先利其器」，一款好用的编辑器帮助我们提高工作效率。
2、插件搜索
VS Code 有着丰富且快速增长的插件生态，如今，已经有超过一万个插件。不仅有中心化的插件市场，而且在 VS Code 编辑器里也可以轻松搜索插件，直接进行安装与管理。
点击左侧工具栏的最后一个就是插件商店，我们可以搜索需要的插件内容。
3、基本插件
Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包
对于一些英文不太好的小伙伴，上来第一件事肯定是要切换成中文语言环境，安装汉化包插件之后，按快捷键Ctrl+Shift+P调出命令面板，输入Configure Display Language，选择zh-ch，然后重启vs code即可。
open-in-browser 在浏览器中查看
VS Code没有提供直接在浏览器中运行程序的内置功能，所以我们需要安装此插件，在浏览器中查看我们的程序运行效果。
Auto Rename Tag 自动生成重命名标签
输入标签名称的时候自动重命名配对的HTML / XML标签，特别方便。
Bracket Pair Colorizer 颜色识别匹配括号
给匹配的括号上色，可以自定义配置
TODO Highlight 高亮
如果我们在编写代码时想在某个地方做一个标记，后续再来完善或者修改里面的内容，可以利用此插件高亮显示，之后可以帮助我们快速定位到需要修改的代码行。
默认情况下TODO:和FIXME:为高亮提醒的关键字，你可以以自定义关键字。
自定义关键字你可以通过：command + , (Windows / Linux: File -> Preferences -> User Settings) 打开VS Code的settings.json文件。
添加todo标签及注解。
按F1，输入todo命令，列出所有todo高亮标签。
vscode-icons 图标插件
VsCode中的图标插件，可以控制vscode中的文件管理的树目录显示图标
Code Spell Checker 单词拼写检查
我们在编写代码的时候经常会不小心拼写错误造成软件运行失败，安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议，大大帮我们减轻了排除bug的压力。
filesize 显示文件大小
在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
WakaTime 统计你的工作量
可以统计你使用VScode每个项目的时长，一周一统计，它会将你每周的每个项目的工作时长统计好之后发到你的邮箱。
CSS Peek快速查找CSS
这个扩展支持所有正常的符号定义跟踪功能，但它针对的是css选择器(类、id和HTML标记)。这包括：
查找：以内联方式加载css文件并在那里进行快速编辑(Alt+F12)；
转到定义：直接跳转到css文件或在新编辑器中打开它(F12)；
鼠标悬停：用鼠标悬停在符号上显示定义(Ctrl+ Hover)；
此外，如果您已经知道类名或ID名，您可以快速跳转到正确的CSS/SCSS/LESS代码。
Live Server 自动刷新和架设本地服务器环境
一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
（1）安装完成后，打开命令面板，输入settings，点击首选项
（2）打开命令面板，输入settings，点击首选项
（3）设置完毕后，重启vscode，并选择需要浏览的文件，右键开启服务，就可以在浏览器中浏览网页啦
Live Server的配置
{
"liveServer.settings.port": 8080, //设置本地服务的端口号
"liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [//设置忽略的文件
".vscode/**",
"**/*.scss",
"**/*.sass"
]
————————————————
版权声明：本文为CSDN博主「Starzkg」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43272781/article/details/103875811
其他开启方法
1、在窗口的最底部有Go Live可以点击，一旦点击，就会自动在浏览器中打开HTML文件
2、快捷键
(alt+L, O) 打开服务
(alt+L, C) 关闭服务
3、按F1,然后在输入栏中输入
Live Server: Open Live Server to start a server 打开服务，
或者 Live Server: Close Live Server to stop a server 关闭服务
VSC Netease Music 网易云音乐（程序员版）
daily-anime 追番神器
4、常用设置
自动保存设置
目前有四个选项：
off：关闭自动保存。
afterDelay：当文件修改后的时间超过"Files：Auto Save Delay"中配置的值时自动进行保存。
onFocusChange：编辑器失去焦点时自动保存更新后的文件。
onWindowChange：窗口失去焦点时自动保存更新后的文件。
快速格式化代码
Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true
5、结语
上面主要是介绍了关于怎么使用Vscode打造一个适合自己的写作环境，其实还有更多的插件没有介绍，比如说怎么使用Markdown跟Git结合，怎么在Vscode中打造一个看板，每天写下自己的计划。
好的编辑器，总是能有各种方式帮助我们解决我们的问题，提高效率。当然，适合自己的编辑器才是最好的。为了让VsCode提高自己的效率，大家还是多多使用插件吧。
