VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具 。1.VSCode下载VSCode下载链接: https://code.visualstudio.com/
2.VSCode汉化

文章插图
3.VSCode常用插件(安装步骤同汉化) 3.1 Auto Close Tag (自动闭合html/XML标签)

文章插图
3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)

文章插图
3.3 Beautify (格式化 html ,js,css)

文章插图
3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

文章插图
3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)

文章插图
3.6 ESLint(js语法纠错,可以自定义配置)

文章插图
3.7 GitLens(方便查看git日志)

文章插图
3.8 HTML CSS Support (智能提示CSS类名以及id)

文章插图
3.9 HTML Snippets(智能提示HTML标签,以及标签含义)

文章插图
3.10 JAVAScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

文章插图
3.11 jQuery Code Snippets(jQuery代码智能提示)

文章插图
3.12 Markdown Preview Enhanced(实时预览markdown)

文章插图
3.13 markdownlint(markdown语法纠错)

文章插图
3.14 Material Icon Theme(vscode图标主题)

文章插图
【VSCode详细使用教程】
3.15 Icon fonts(图标字体)

文章插图
3.16 open in browser(右键快速在浏览器中打开html文件)

文章插图
3.17 Path Intellisense(自动提示文件路径)

文章插图
3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

文章插图
3.19 Vetur(Vue多功能集成插件,错误提示等)

文章插图
3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)

文章插图
3.21 npm Intellisense(require 时的包提示)

文章插图
4.VSCode快捷键 4.1 左侧是按键,右侧是功能(下同)

文章插图
4.2 基础编辑

文章插图
4.3 导航

文章插图
4.4 搜索和替换

文章插图
4.5 多光标和选择

文章插图
4.6 语言编辑

文章插图
推荐阅读
- 交换机ERPS是什么意思,ERPS环网详细配置指导
- 三种使用AI攻击网络安全的方法
- 用Python实现蒙特卡罗模拟的详细教程
- 开发中经常使用的5种设计模式
- 为啥阿里巴巴不建议MySQL使用Text类型?
- 贝瓷茶具欣赏,使用不同的茶具
- 长期使用不粘锅会致癌吗 不粘锅致癌吗?
- 超详细的MySQL工作原理 体系结构
- python之最详细字符串篇
- 巴达古茶山的详细介绍,云南主要茶山巴达介绍