VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
1.VSCode下载
VSCode下载链接: https://code.visualstudio.com/
2.VSCode汉化
![](/d/20211017/e6b608e3c31614e2e3e7f3fef7d57891.gif)
3.VSCode常用插件(安装步骤同汉化)
3.1 Auto Close Tag (自动闭合HTML/XML标签)
![](/d/20211017/e55bb82077c4341bb17ae210c12194e4.gif)
3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)
![](/d/20211017/0976689e8bc969fa61daab4d13c37150.gif)
3.3 Beautify (格式化 html ,js,css)
![](/d/20211017/8d06a97f2e6e6d3949d07386e35b01f3.gif)
3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)
![](/d/20211017/9f2db00450594a61d14eaf89e10f0c6f.gif)
3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)
![](/d/20211017/cef19e15091ecd50d8d49b16a6232326.gif)
3.6 ESLint(js语法纠错,可以自定义配置)
![](/d/20211017/546a7724c17f8a4faa5e2ee79b4ce767.gif)
3.7 GitLens(方便查看git日志)
![](/d/20211017/dfca6676443ff7fcbf7c7f22d8046a65.gif)
3.8 HTML CSS Support (智能提示CSS类名以及id)
![](/d/20211017/327359e7815a0dc4c5957f57fdc19273.gif)
3.9 HTML Snippets(智能提示HTML标签,以及标签含义)
![](/d/20211017/8f3098b2d68f060b8cf8db736752cf38.gif)
3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)
![](/d/20211017/ffd262e27386c3b115d82033c1747150.gif)
3.11 jQuery Code Snippets(jQuery代码智能提示)
![](/d/20211017/2aedfa80b2e5d58437e9e7d2b8426786.gif)
3.12 Markdown Preview Enhanced(实时预览markdown)
![](/d/20211017/a2a74bb35d9f49ec85737ea70357216b.gif)
3.13 markdownlint(markdown语法纠错)
![](/d/20211017/7925d55091d780d853a01acc12a752be.gif)
3.14 Material Icon Theme(vscode图标主题)
![](/d/20211017/cfd1b3f84e0ab125b195cce7311f633a.gif)
3.15 Icon fonts(图标字体)
![](/d/20211017/d79ba7c9832853ef7610a0140d8ff188.gif)
3.16 open in browser(右键快速在浏览器中打开html文件)
![](/d/20211017/53b00d08751b7f6e95092eae360cbed4.gif)
3.17 Path Intellisense(自动提示文件路径)
![](/d/20211017/f5a662ab66af796cba6f4a1b58dbec3f.gif)
3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)
![](/d/20211017/088c83b9fb78572b7e2377753a1eae56.gif)
3.19 Vetur(Vue多功能集成插件,错误提示等)
![](/d/20211017/33795de29a1025346cb477243499918a.gif)
3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)
![](/d/20211017/20aba1ae22d074bbeadd79049a1feb96.gif)
3.21 npm Intellisense(require 时的包提示)
![](/d/20211017/b89578abb473eaae7e8e97a14913cc02.gif)
4.VSCode快捷键
4.1 左侧是按键,右侧是功能(下同)
![](/d/20211017/0410cbc375b08a9955917d51d63779e7.gif)
4.2 基础编辑
![](/d/20211017/0fb184e9129f351e977f29c8eaa11262.gif)
4.3 导航
![](/d/20211017/0461dfb77dbae8ffc9c8608e3dcbed4b.gif)
4.4 搜索和替换
![](/d/20211017/eb5ee14f8e7f2f0874b7f8207a0daf1e.gif)
4.5 多光标和选择
![](/d/20211017/8945a4e2692ef1488dd5544b670ccf36.gif)
4.6 语言编辑
![](/d/20211017/282b9a707b4354371a34562e82166bed.gif)
4.7 编辑器管理
![](/d/20211017/bd48a600d747f92059d4024b000cc798.gif)
4.8 文件管理
![](/d/20211017/0adb3b876eede928486f8c1d8906d69f.gif)
4.9 显示
![](/d/20211017/66e3d8c85b8b8db53ab5f5e72a6bebe0.gif)
4.10 调试
![](/d/20211017/6701473151e6d3a81116f79fa7aad61f.gif)
4.11 集成终端
![](/d/20211017/4be7c81eeec55ba35073f3a7c77aca64.gif)
到此这篇关于VSCode常用知识小结的文章就介绍到这了,更多相关VSCode小结内容请搜素脚本之家以前的文章或下面相关文章,希望大家以后多多支持脚本之家!
您可能感兴趣的文章:- vsCode安装使用教程和插件安装方法
- vscode常用插件整理汇总
- VsCode插件整理(小结)
- 常用VsCode 快捷键(Window & Mac)GIF演示