VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
1.VSCode下载
VSCode下载链接: https://code.visualstudio.com/
2.VSCode汉化
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/bc4a0c14caaee90dd6d3d2018324778a.jpg)
3.VSCode常用插件(安装步骤同汉化)
3.1 Auto Close Tag (自动闭合html/XML标签)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/3605958a151ac54316e1b8b5871c8d01.jpg)
3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/b869d43df4f0988628b232d5c3c53a6e.jpg)
3.3 Beautify (格式化 html ,js,css)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/e95e4bdd80356a22ea5412dc89749a69.jpg)
3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/b15f8aceb1a7f0621f98a5e461b1667b.jpg)
3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/19812f089dfc7bf726ebb1e17f644be1.jpg)
3.6 ESLint(js语法纠错,可以自定义配置)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/910a3d8cf3272646d6027ab8bb949fea.jpg)
3.7 GitLens(方便查看git日志)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/72e419469ccf5ecf5dfe273885c0a65c.jpg)
3.8 HTML CSS Support (智能提示CSS类名以及id)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/8af624cb62ecffb2110c7128f0fe2ea4.jpg)
3.9 HTML Snippets(智能提示HTML标签,以及标签含义)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/3757cd5ea3a259679710d35909ec167f.jpg)
3.10 JAVAScript(ES6) code snippets(ES6语法智能提示,以及快速输入)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/f7ac62a85bc3d8da229b69b120911c55.jpg)
3.11 jQuery Code Snippets(jQuery代码智能提示)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/b273e756af7687bce02d87606723e634.jpg)
3.12 Markdown Preview Enhanced(实时预览markdown)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/d51d480626b75102adaa5e5302398631.jpg)
3.13 markdownlint(markdown语法纠错)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/5f38aab67b8f2689a61764edf6430f08.jpg)
3.14 Material Icon Theme(vscode图标主题)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/b4d3a068aaa6555ca0f004dd06d1daae.jpg)
3.15 Icon fonts(图标字体)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/2d3f8e3c2bc8a7ff3ac8e504086ebb4b.jpg)
3.16 open in browser(右键快速在浏览器中打开html文件)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/bb7ae251dcc9070c47df876f17d7a03d.jpg)
3.17 Path Intellisense(自动提示文件路径)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/4b649a2de63de4b268cc95888f2bda4c.jpg)
3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/7eb888a082a55d2d05bbca1db125b175.jpg)
3.19 Vetur(Vue多功能集成插件,错误提示等)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/03b84c4a13f3ffeb39903f4c6692186e.jpg)
3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/bdd7a58bddbdbaeadfa6ed8553b0b5e3.jpg)
3.21 npm Intellisense(require 时的包提示)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/026d49f45c9be4d67ce436cad16ce991.jpg)
4.VSCode快捷键
4.1 左侧是按键,右侧是功能(下同)
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/4f5c29a51166a8b828d4f1efd90ebb1c.jpg)
4.2 基础编辑
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/6209c2791bbf177e6af67c2d80121482.jpg)
4.3 导航
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/d89c76fe2c30831689f5e846ac1d3c8a.jpg)
4.4 搜索和替换
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/178a8c7c666faa94931e1bbc8c7b2657.jpg)
4.5 多光标和选择
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/ae521fead6a5697702b740b36a5261cd.jpg)
4.6 语言编辑
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/3c9bf93f1ab9ce09dfd3b2562a886c88.jpg)
4.7 编辑器管理
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/b8c2b168c514287451682686859b265c.jpg)
4.8 文件管理
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/78dd4558ed7a4c4c7e14568c2bc7fe98.jpg)
4.9 显示
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/d6cc32c7b9e63fe6f1663d0600f9bdbf.jpg)
4.10 调试
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/de2e8fa2b21263b2ed3e536c973de88d.jpg)
4.11 集成终端
![VSCode详细使用教程](https://www.isolves.com/d/file/p/2020/11-10/16a888d09e14dbbd493a538165eb7241.jpg)