VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
1.VSCode下载
VSCode下载链接: https://code.visualstudio.com/
2.VSCode汉化
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905035249395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.VSCode常用插件(安装步骤同汉化)
3.1 Auto Close Tag (自动闭合HTML/XML标签)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905040557623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905040817386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.3 Beautify (格式化 html ,js,css)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905041156614.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905041421420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905041607759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.6 ESLint(js语法纠错,可以自定义配置)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905041752261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.7 GitLens(方便查看git日志)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905041937618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.8 HTML CSS Support (智能提示CSS类名以及id)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019090504211780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.9 HTML Snippets(智能提示HTML标签,以及标签含义)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905042242138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905042414787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.11 jQuery Code Snippets(jQuery代码智能提示)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905042539867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.12 Markdown Preview Enhanced(实时预览markdown)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905042711730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.13 markdownlint(markdown语法纠错)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905042829351.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.14 Material Icon Theme(vscode图标主题)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905043050380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.15 Icon fonts(图标字体)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905043351790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.16 open in browser(右键快速在浏览器中打开html文件)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905043622757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.17 Path Intellisense(自动提示文件路径)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905043815649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019090504400933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.19 Vetur(Vue多功能集成插件,错误提示等)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905044319727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905044538974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
3.21 npm Intellisense(require 时的包提示)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905044757990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.VSCode快捷键
4.1 左侧是按键,右侧是功能(下同)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905045932985.png)
4.2 基础编辑
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905050245832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.3 导航
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905050502114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.4 搜索和替换
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905050628107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.5 多光标和选择
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905050728168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.6 语言编辑
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905050834270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.7 编辑器管理
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905050942268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.8 文件管理
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905051029273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.9 显示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905051128126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.10 调试
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905051222108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
4.11 集成终端
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905051323194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ==,size_16,color_FFFFFF,t_70)
本文作者:Yaphets.Lee
转载请注明出处,感谢! 原文链接 VSCode详细使用教程_Yaphets.Lee的博客-CSDN博客_vscode使用教程 https://blog.csdn.net/weixin_45601379/article/details/100550421