2.2 VS code 的安装、配置和使用

本节将分享的是vscode的安装、配置和使用。

为何选择 VS code 编辑器？

工欲上其事必先利器，选择一个好的 代码编辑器，是提高开发效率的重要途径。常用的前端开发编辑器有：Sublime，atom，WebStorm等。我们推荐的是微软推出的 vs code 跨平台的代码编辑器，因为：

• 它比Atom更加的流畅，比 webstorm 更轻量；
• 免费而且功能强大，自带很多功能，例如代码格式化，代码智能提示补全等；
• 对JavaScript和NodeJS的支持非常好，是所有编辑器中对 JS 的超集typescript 支持最好的，因为它本身就是基于微软的ts语言开发的。

如何安装？

直接到https://code.visualstudio.com/下载安装即可，打开官网后，它默认的下载版本为我们所用的系统对应的版本。当然，我们也可以选择版本，如windows 版本或Linux版本。下载成功后，一直点击下一步即可。

如何使用

常用操作特别简单，在编写代码时边看边学即可。

插件配置

插件需要安装，打开vs code后，点击左侧栏 最下面那个类似 正方形的图片，即可看到已安装的插件，同时也可以搜索自己想要的插件，搜出来后直接安装即可，推荐插件如下：

• HTML Snippets 超级实用且初级的 H5代码片段以及提示；
• Auto Rename Tag 自动重命名配对的HTML / XML标签；
• HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式；
• Css Peek 能在源代码中的字符串中找到对应的css（类和ID），显示在那个css文件里，还有在第几行；
• Color Picker 代码的颜色选择器；
• open in browser 在浏览器中打开，安装后在左侧目录中右键点击会出现 open in browser 选项；
• Path Intellisense 文件路径提示；
• Npm Intellisense 在import语句中自动完成npm模块引入的代码插件；
• vscode-icon 让 vscode 资源树目录加上图标，必备良品；

当然，还有各种基于vue或react的插件，大家输入对应关键字，搜索后根据需要去安装即可。

好了，代码编辑器我们就介绍到这里，更多的配置和使用 我们会在课程用到时再进行讲解。