作为前端开发的我，在之前的开发过程中一直使用一个叫Atom的IDE。 还有更漂亮的主题插件，是nice。 Atom的界面认真漂亮，但是里面有很多插件真的不觉得卡吗？ vs代码比自动取款机更平滑，也比webstorm更轻。 在一次偶然变化的工作之后，项目团队要求IDE统一，让我了解了VS代码。 这里简单介绍一下VS Code日常开发的需求。
VS Code精选主题
主题插件的安装过程首先简要介绍了主题插件的安装过程。
首先，单击扩展商店，查找要查找的插件名称，如Atom One Dark Theme，然后单击安装。
第二部分，安装后，只需证明您的本地vs代码中有此插件，就需要将当前使用的主题插件切换到您想要的；
点击左下角设置按钮，进入命令面板；
搜索颜色主题关键词
点击所需主题完成切换。
一个编辑器的界面是否漂亮，真心很重要，之前一直迷恋自动取款机，完全是因为那个主题的界面太优雅了。 下图是笔者布置的VS Code界面截图，下面推荐几个好看的主题：
vs代码主题插件列表(推荐)1. One Dark Pro
One Dark Pro的主题界面效果如下(推荐指数5星) One Dark Pro
2. Atom One Dark Theme
Atom One Dark Theme的主题界面效果如下(推荐指数5星) Atom One Dark Theme
3. Eva Theme
Eva Theme的主题界面效果如下(推荐指数5星) Eva Theme
4. Material Palenight Theme
“Material Palenight Theme”的主题界面效果如下(推荐指数5星)“Material Palenight Theme”
有关visual studio代码主题插件的详细信息，请参见vs代码下载
vs代码选择插件vs代码所有插件都位于vs代码下载插件库中，如下图所示。
自动关闭标签
自动关闭标签：匹配标签并关闭对应的标签。 对HTML/XML很有用。
自动重命名标签
自动重命名标签：更改标签时同时更改打开和关闭标签； 对HTML/XML很有用。
html CSS支持
HTML CSS Support :这也是HTML必备插件之一。
CSS Peek
css Peek : html和css中的相关css跳转
科尔多纳
从Code Runner :代码编译执行结果来看，它支持多种语言
千兆历史
用于显示githistory:git分支提交日志的插件
千兆历史差异
Git History Diff :可以查找提交到每个git分支之上的节点，并比较差异。
Path Autocomplete
Path Autocomplete :路径智能修补程序插件。
路径智能
路径智能：路径智能提示插件。
保真
beautify :可扩展、易于使用的但是react工程的jsx文件用beautify插件格式化会乱掉，建议不要用，可设置JSON格式。
预编码格式器
Prettier - Code formatter :主要用于工程JavaScript/TypeScript/CSS的代码格式插件
Prettier Now
Prettier Now :一个相对全面的代码格式插件，支持语言。 主要支持jsx /tsx和sass/le
ss等(问的react工程基本上就是用这2个Prettier插件格式化代码)Terminal
Terminal ： vs code 内置的命令行插件，也比较实用。
Bookmarks
Bookmarks ： 这个插件支持在文件特定的行做标记，更好的提高开发效率。
Bracket Pair Colorizer
Bracket Pair Colorizer ：很多括号的情况下，这个插件可以做一个颜色的区分，代码一目了然。
Chinese (Simplified) Language Pack for Visual Studio Code
Chinese (Simplified) Language Pack for Visual Studio Code ： 适用于 VS Code 的中文（简体）语言包。
filesize
filesize ： 编辑器底部显示当前文件的大小。
Markdown Preview Enhanced
Markdown Preview Enhanced ： 本地Markdown文档预览插件。
vscode-icons
vscode-icons ： 一套vs code的图标插件。
npm
npm ： 不多说npm。
open-in-browser
open-in-browser ： 一键在浏览器中打开
Live Server
Live Server ：一键开启本地服务。
fileheader
fileheader ：感觉用得上 新建文件作者注释
在自定义设置页面(comd+,)，可以设置一些作者信息,然后打开命令面板(comd+shift+P),输入fileheader回车即可
Local History
Local History ：个人感觉很有用 本地代码的一个保存日志，在没有git,svn，或者很长时间没有提交过代码的情况下，感觉挺实用，再也不怕代码回滚。
GitLens -- Git supercharged
GitLens -- Git supercharged ： GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者，无缝地导航和探索Git存储库，通过强大的比较命令获得有价值的见解。
VS Code常用快捷键
VS Code的快捷键有很多，需要具体的请仔细参考 VS Code => 左下角设置按钮 => 键盘快捷方式
我们也可以自定义快捷键，在keybindings.json里面设置覆盖即可
快捷键完全是个人操作习惯，这里不多介绍，我常用的有这几个：
打开命令面板 cmd + shift + p / F1打开设置页面 cmd + ,删除一行 cmd + E(自定义)添加书签 cmd + option + k代码格式化 control + opiton + B复制代码 VS Code git代码管理实战git现在是很常见的代码管理工具，VS Code 也有内置的git插件，当然，要是你觉得不完美，可以安装一些常用的git插件等，简单介绍下VS Code 下git的提交步骤。
这里我以GitHub上面新建的一个仓库为例，仓库新建后默认分支是master，这里我在GitHub上新建了2个远程分支develop01和develop02，wsddh在VS Code中点击切换到某一个远程分支的时候，VS Code会自动给你创建一个和当前远程分支对应的本地分支，如origin/develop02 对应develop02，如origin/master 对应master,如上图所示。
现在我们在master分支上面提交代码，
第一步，先暂存要提交的文件第二步，填下提交日志第三步，点击对勾按钮完成提交
提交好了之后还需要拉取git远程分支的代码才能推送。
第四步，拉取远程代码，解决冲突第五步，推送到远程分支上
然后就没有然后了?，提交完成。
假如你因为工作需求的原因，需要在不同的分支上面提交不同的代码，那就涉及到分支的切换了。首先第一步，切换分支之前先提交代码，不然老是有报错日志，切换了分支后，本地的代码也会对应分支改变。
如上图，master切换成develo01之后，master分支上刚提交的代码成了develo01上对应的代码。
git提交代码这部分，还可以使用相关git代码管理工具实现呢，如SourceTree、Tower等工具都很好用，这边也整理了一篇文章，欢迎收藏
你问我答 1.VS Code 怎么更改默认的设置？笔者使用的是mac，使用快捷键 Com + , 打开用户默认设置界面，左边是默认设置，右边是自定义设置，根据个人工作场景而定吧，就像我这边就统一格式化代码缩进4格等,还可以设置忽略一些文件夹等。
{ "explorer.confirmDelete": false, // 主题 "workbench.iconTheme": "vscode-icons", // 小地图 "editor.minimap.enabled": true, // 主题风格One Dark Pro "workbench.colorTheme": "One Dark Pro", "window.zoomLevel": 1, "extensions.autoUpdate": false, // 字体大小 "editor.fontSize": 13, "editor.snippetSuggestions": "top", "diffEditor.ignoreTrimWhitespace": true, // 设置格式化缩进4格 "prettier.tabWidth": 4, "vetur.format.defaultFormatter.html": "prettier", "gitlens.advanced.messages": { "suppressShowKeyBindingsNotice": true }, "gitlens.historyExplorer.enabled": true, "atomKeymap.promptV3Features": true, "editor.multiCursorModifier": "ctrlCmd", //粘贴自动格式化 "editor.formatOnPaste": false, //保存自动格式化 "editor.formatOnSave": false, // 用来忽略工程打开的文件夹 "files.exclude": { "**/.vscode": true, "**/.DS_Store": true, "**/.history":true, "**/nbproject":true }, // 用来忽略搜索的文件夹 "search.exclude": { "**/node_modules/**": true, "**/bower_components/**": true, "**/image/**": true, "**/*.xml": true, "**/.history/**":true, "**/nbproject/**":true, "**/vscode/**":true }, // 创建和更新代码的头部信息作者 "fileheader.Author": "Baldwin", "fileheader.LastModifiedBy": "Baldwin",}复制代码 2.假如我几天没有提交代码了（git），今天突然发现代码youbug，需要还原到昨天版本，VS Code能做到吗？能。参考上面的 VS Code插件 Local History