VSCode详细使用教程

      VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。

1.VSCode下载

VSCode下载链接: https://code.visualstudio.com/

2.VSCode汉化

VSCode详细使用教程_第1张图片

3.VSCode常用插件(安装步骤同汉化)

      3.1 Auto Close Tag (自动闭合HTML/XML标签)

VSCode详细使用教程_第2张图片

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

VSCode详细使用教程_第3张图片

      3.3 Beautify (格式化 html ,js,css)

VSCode详细使用教程_第4张图片

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

VSCode详细使用教程_第5张图片

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

VSCode详细使用教程_第6张图片

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

VSCode详细使用教程_第7张图片

      3.7 GitLens(方便查看git日志)

VSCode详细使用教程_第8张图片

      3.8 HTML CSS Support (智能提示CSS类名以及id)

VSCode详细使用教程_第9张图片

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

VSCode详细使用教程_第10张图片

      3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

VSCode详细使用教程_第11张图片

      3.11 jQuery Code Snippets(jQuery代码智能提示)

VSCode详细使用教程_第12张图片

      3.12 Markdown Preview Enhanced(实时预览markdown)

VSCode详细使用教程_第13张图片

      3.13 markdownlint(markdown语法纠错)

VSCode详细使用教程_第14张图片

      3.14 Material Icon Theme(vscode图标主题)

VSCode详细使用教程_第15张图片

      3.15 Icon fonts(图标字体)

VSCode详细使用教程_第16张图片

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

VSCode详细使用教程_第17张图片

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

VSCode详细使用教程_第18张图片

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

VSCode详细使用教程_第19张图片

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

VSCode详细使用教程_第20张图片

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

VSCode详细使用教程_第21张图片

      3.21 npm Intellisense(require 时的包提示)

VSCode详细使用教程_第22张图片

4.VSCode快捷键

      4.1 左侧是按键,右侧是功能(下同)

VSCode详细使用教程_第23张图片

      4.2 基础编辑

VSCode详细使用教程_第24张图片

      4.3 导航

VSCode详细使用教程_第25张图片

      4.4 搜索和替换

VSCode详细使用教程_第26张图片

      4.5 多光标和选择

VSCode详细使用教程_第27张图片

      4.6 语言编辑

VSCode详细使用教程_第28张图片

      4.7 编辑器管理

VSCode详细使用教程_第29张图片

      4.8 文件管理

VSCode详细使用教程_第30张图片

      4.9 显示

VSCode详细使用教程_第31张图片

      4.10 调试

VSCode详细使用教程_第32张图片

      4.11 集成终端

VSCode详细使用教程_第33张图片

本文作者:Yaphets.Lee

转载请注明出处,感谢!

你可能感兴趣的:(前端开发工具,前端开发工具)