开发工具笔记-了解vscode

• visual studio code提供了界面整洁，主要功能分布在左侧和顶部，使用的时候直接点击即可，还可以同时打开多个窗口同时编辑多个文档。
• 活动栏从上到下依次为，打开侧边栏，搜索，使用git，debug，扩展、账户，管理。
• 侧边栏，新建项目文件和文件夹
• 编辑栏，编写代码的区域
• 面板栏，从左到右依次为，问题，输出，调试控制台，终端(terminal)，最重要的是terminal，用来输入相关命令
• 状态栏，点击该区域可以调出面板栏。

visual studio code给我么们提供了便捷的快捷键，打开活动栏下方的管理，可以看到键盘快捷方式，在这里我们可以进行一些自定义快捷键的配置。

• 复制粘贴，ctrl + c, ctrl + v
• 整行复制粘贴，无需选中内容，光标在行内任意位置，ctrl + c, ctrl + v 即可。
• 查找， ctrl + f， 按 f3查找下一个。光标在输入框的时候，回车即可查找下一个。
• 替换， ctrl + h
• 保存， ctrl + s
• 行注释， ctrl + /
• 块注释，选中, shift + alt + a
• 上方复制粘贴一行， alt+ shift + 上方向键
• 下方赋值粘贴一行，alt+ shift + 下方向键
• 插入到下一行(光标跳转) ctrl + enter
• 文件夹查找，ctrl + shift + f (活动栏的搜索而已，不记得也可以)
• 格式化代码， alt + shift + f (右键格式化代码的快捷方式)
• 快捷键映射，将其他编辑器的快捷键映射到 vscode 上，例如 sublime txt, atom。设置方式为，文件 > 首选项 > 键映射。 自定义快捷键， 文件 > 首选项 > 键盘快捷方式
• 多行编辑， 按住 alt，鼠标点击不同的位置

插件

• 在活动栏的扩展里，visual studio code还提供了更强大的插件市场，部分插件安装成功后，重启即可使用。

• CSS Peek: html 与 css 关联，ctrl 显示html 元素样式，ctrl + 单击跳转到样式定义。安装后重启 vscode 生效。(推荐)

• Prettier ： 代码格式化
• Icon Fonts ： 图标集，如 Font Awesome, Glyphicons , 图标集元素名称自动补齐。
• Auto Rename Tag: 自动重命名标签，修改开始标签，自动修改结束标签。(推荐)
• HTML Boilerplate : HTML 模板，自定义模板
• color info： 颜色提示，显示颜色的各种格式，color picker
• Auto close Tag: 自动闭合标签

• HTML CSS Support : HTML 中 css class 智能提示，提示已经引入的样式表中的类名或 ID

• eslint 一款javascript代码风格检查工具

• coderunner 运行各种各样的代码
• gitlens 查看git修改记录
• tslint 一款typescript代码风格检查工具
• vscode-icon 给你很多好看的图标

visual studio code 内置了终端：单击顶部终端选项，即可看到终端命令面板，不用再去切换到外部的终端命令行，且支持多个终端，还可以自定义终端类型。