[开发工具]VSCode使用

1 什么是 VSCode

VScode 全称为 Visual Studio Code，是微软公司开发的文本编辑器

2 为什么选择 VSCode

• 集成开发环境(Integrated Development Environment)

  • Visual Studio

  • Android Studio

  • Eclipse

  • Xcode

  • Netbeans

  • JetBrains 全家桶

    • PyCharm

    • WebStorm

    • Intellij IDEA

• 脚本编辑器(Text Editor)

  • VisaulStudioCode

  • Atom

  • Sublime

  • NotePad ++

  • Vim

  • Emacs

  • HBuilder

脚本编辑器其实就是纯文本编辑工具，集成开发环境通常集成过多的东西导致很臃肿，因此文件体积更小，启动速度更快的脚本编辑器越来越受到程序员们的追捧。VisualStudio如果将所有语言的开发包都安装上需要几十个G，而VScode的安装包大小只有不到 100M。

IDE适合大型开发，特别是需要编译运行还要依赖各种环境的 C++ 或者 Java ，IDE的配套环境真的可以省去很多麻烦，调试使用 IDE 的工具也很省心。脚本编辑器更加适合敏捷开发，比如 js python 这类的脚本语言。而且现在很多IDE也支持插件开发进行功能扩展，并不是脚本编辑器特有的功能了。

VSCode 优点

• 微软爸爸的财大气粗做后盾，维护很积极

• 图形化图标，交互比较友好

• 集成 Git 和 Cmd 以及 Debug 工具，Sublime 都没有内置

• 安装插件有图形化界面，可以不敲命令行，对新手很舒服

• 插件超级丰富，社区极度活跃，有问题基本都可以在 Github Issue 以及 Stack Overflow 上查到答案

3 VSCode 安装

下载地址

双击安装包 点击 安装，基本上点击下一步就可以了，几个要点可以重点说一下

• 我接受协议 必须勾选的

• 路径可以自定义，不过一般默认就可以了

• 添加到资源管理器上下文目录 这个操作可以添加右键 Code 打开当前目录，非常方便

• 将 Code 注册为受支持的文件类型的编辑器 这个操作会让 VScode 支持的代码文件全部编程变成 VScode 默认打开，文件图标也会随之更改，很好辨认

4 VSCode 使用

通过上面的步骤，我们已经顺利进入了软件的启动界面。然而看到的全部是英文，可能有些人会觉得很难受，有没有办法转换成中文界面呢？当然是可以的，我们只需要安装一个中文补丁就没问题了。

中文补丁插件

在插件搜索框搜索 Chinese

文件资源管理器

默认情况下 文件资源管理器 是空的，可以打开一个文件夹作为工作区。点击 打开文件夹 或者 拖拽文件夹进来都可以实现。

通过工作区可以管理当前文件夹里面的内容。

工作区上方的四个按钮可以帮助你创建文件和文件夹。

对文件右键还有更多的删除命令等等，也可以通过拖拽改变文件的位置。

跨文件搜索

通过跨文件搜索可以搜索当前工作区下的所有文件的内容。

通过这里找到的信息直接跳转到相应文件的相关行。

源代码管理

源代码管理提供了简单的 git 处理

基础的功能诸如 push pull commit 都封装好了

只需要点击按钮即可使用

启动和测试

启动和测试集成了 Debug 的模块和浏览器的 Debug 模块基本相同。这里可以通过 node.js 进行脚本测试

点击 F5 就可以启动 Debug 模式。

遇到设置红色的断点，代码执行就会暂停。

终端集成

通过快捷键 ctrl+` 可以呼叫出来

默认是 windows 的 cmd 窗口，也可以切换

也可以切换成其他的终端启动

5 VSCode 插件

Auto Close Tag

自动闭合HTML/XML标签

Auto Rename Tag

修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

Beautify

格式化代码工具，美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

open in browser

VScode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

Path Intellisense

自动提示文件路径，支持各种快速引入文件

6 VSCode 技巧

在VSCode中，合理的使?快捷键可以让编码效果事半功倍

快捷键

• 复制 Ctrl + C

• 粘贴 Ctrl + V

• 剪切 Ctrl + X

• 保存 Ctrl + S

• 删除一行 Ctrl+Shilft+K

• 选择所有选中的值 Ctrl + D

• 撤回到上?步 Ctrl + Z

• 恢复到下?步 Ctrl + Shift + Z

7 web服务器

IP地址

在互联?中，每个电脑都会拥有?个IP地址，查看IP地址可以在CMD中输? ipconfig 命令

ipconfig

在显示的内容中，我们可以找到对应本机的IP地址。这个就像是你的家庭住址?样，别?可以通过这个地 址找到你的电脑。

在IP中有两个特殊的地址，?个是 localhost ?个是 127.0.0.1 ，当我们在??的电脑上使?这两 个地址时，所指的就是??的本机。就想我们汉语中的 我 ，谁说 我 这个字的时候，都指他们??。

只有开启了对应的服务，我们才能实现通过IP访问到对应的服务。

web服务

web服务需要使?web服务器才能开启。常?的web服务器很多，我们可以使?上?插件 open in default browser ?带的插件来实现开启web服务器。

通过VSCode打开?件夹，在?件夹中新建?个html?件，通过浏览器打开会会?动开启服务，这时候可以让其他通过尝试访问对应的服务。