28-尚硅谷-硅谷通用权限项目-前端基础知识-VSCode安装和使用

各位同学大家好，刚才呢，咱们把前端开发做了一个简单的概述，那下面呢，我们继续往下来做，下面进入到第二部分，咱们来安装一个前端的开发工具，并且讲解这工具到底该怎么进行使用，那下面咱们继续做一下，首先大家看我的课件里边，这位置有一个官方网址，咱通过网址能下载咱们的开发工具，我现在把网址已经打开了，这是我们这个工具简称就是VS扣的。然后这个工具呢，目前最新版是1.71，各位可以从里边直接下载就可以了，我这里边已经下载过了，虽然不是最新的，但是也是从里面下下来的。然后这个下载之后，第一部分咱把它需要进行安装，这安装我就不在课上演示了，过程很简单，没有什么特别地方，各位只需要下一步，下一步就可以了，但是里边特别说明就是我们在软。

件开发过程中，咱们在Windows中装到所有软件，我们要求就是不要装到有中文的目录下，虽然说这个软件装到中文下应该没有什么问题，但是还是要求各位不要放到有中文的目录下，这是咱们一个原则，所有软件装到目录都不要有中文，虽然有的可能没问题，但是咱们最好都不要带中文，然后这里边我已经安装过了，直接下一步，下一步可以了，安装之后我们来看一下啊，找到我这个安装的路径。然后找到里边有一个exe文件，就是它这个文件，我已经在桌面上建了快捷方式，然后咱们现在把它可以打开，咱们来看一下这个工具，我现在把工具已经打开了，然后大家看里边啊这么一个界面，呃，但是我说明啊，你第一次打开界面应该不是长我这个样子，我这里边做一些设置，包括做一些处理，所以下面呢，在那里边来做一些事情，做一些配置，做一些相关的一些操作。

我把这个在图里边给大家写一下。首先第一部分咱们就是下载Vs code的安装软件进行安装，这是第一部分。然后安装之后，第二部分咱们打开code，在里边先做第一件事情，安装一些插件，为了咱后面操作更加方便，所以第二部分再来装一些相关的插件。然后插件怎么做呢？给各位说明啊，在code里边有很多的插件，然后咱们的做法就是大家看这里。点击这个图标叫扩展，然后在里边咱们可以搜索插件进行安装，就是在这个位置我们可以做到。

我把这个给大家截个图。拿到我这里边来。这就是安装插件，我们再回到软件中，咱们看到具体点，首先我强调啊，它的插件有很多，我们这里边呢，推荐各位装四个就可以了，但是你可以装更多，但是还是不推荐装特别多的插件，如果你装很多插件，可能造成你的软件特别卡，所以咱装四个足够了，那四个插件是什么，给大家做个介绍。咱们看一下啊，首先第一个插件叫Chinese language是什么？就是默认情况下它是英文版，你装一个叫做Chinese language简体中文，然后它会做一个中文的这么一个显示，这是第一个，然后第二个叫live server server什么意思，是不是服务器啊，就是它这个东西呢，能显现出一个服务器的效果，类似于咱们说那个tomcat，跟那个类似。

就是通过IP端口号能进行访问，然后第三个和第四个就是VE相关的一些插件，用它之后有一些颜色的变化，包括有些提示的信息，所以咱们装四个插件就可以了，那怎么装很简单，你点这个按钮，就这个，然后在里边直接搜索一下，比如说我们来搜一下。然后你把这个进行安装就可以了，包括后面都一样，比如我再搜一个live server，就是它安装，包括再搜一个view相关的这些我们进行安装，所以以上是咱们看到的这么一个过程，咱们通过这个安装四个插件就可以了，安装之后把weather code重启一下，然后它就可以生效，这是我们的第二部分安装插件。

所以各位给他一会儿自己快速装一下，我这里重复一遍啊，第一步把软件装上，然后第二步安装四个插件。然后这个之后我们再来看啊，在里边我们再做第三件事情，给大家写一下，第三个做什么呢？各位注意啊，就是你现在你可以做这么一个事情，第一个改变一下你这个背景颜色。然后这里边改变一下你的字体的大小，这些可以做改变，那怎么变，给大家演示一下，首先第一个啊，你点这个位置有一个管理，然后里边有一个颜色主题，大家看啊，我点上下箭头，就键盘上那个上下箭头，你看颜色是不是有变化，它默认应该是这个样子，我现在为了咱们显示方便，我变成这个颜色，根据自己实际来调整背景颜色，然后另外在里边你点设置这位置有一个就是字体大小比你选择多大，最终你代码按照多大字体进行显示。

这一部分各位根据自己的实际可以来调整一下背景色，包括字体大小，然后这个之后我们再来看第四部分。咱们需要做件事情，什么事情呢？创建一个叫工作区，然后把我们的代码要写到这个工作区里边去，为什么这么做呢？如果说你没有工作区，那很多前端的高级特性，高级功能他做不到，所以咱们要建个工作区来实现里边的高级特性，那下面演示一下怎么建工作区，给各位来说一下啊。咱们来做个操作，回到这里边，首先第一个啊，注意在这个软件中呢，它没有这个按钮能建工作区，那咱怎么做呢？说一下这个基本步骤，我写到这里，首先第一步你创建一个空的文件夹创建，然后第二步使用code打开文件夹，然后第三步把你的空的文件夹另存为你的工作区就可以了，这是它一个基本的步骤，那我下面按照步骤给各位快速建一下工作区，咱们看该怎么去做。

下面我们来试一下啊，首先第一个我在这里边，我先建一个空的文件夹，我用这个文件夹了，就这个硅谷system front用它，然后创建之后第二部分我用这个软件打开文件夹，找到我刚才那个位置，我这是在桌面啊，你找的话，找到你那个位置跟我这肯定不一样啊，找到你的那个这是我的文件夹，然后咱们打开。

这里边啊，我们肯定是信任。现在就可以了，然后打开之后大家看啊，这只一个文件夹，那咱们需要进步来做，怎么做点文件，然后各位看里边有一个地方啊这句话。将工作区另存为，那我点下，然后找到刚才文件夹，在里边给你的工作区起个名字，名字随便起，但是后缀名需要是这个，你看啊，叫codepace啊，名字你可以随便起个名字，但是还是强调这里边最好不要有中文，咱正常命名就可以了，所以现在我点保存，大家看这里边叫什么，是不是叫工作区，所以咱们按照这个步骤建个工作区，各位自己来操作一遍，我再重复一遍啊，建空文件夹外code打开，然后将它另存为工作区，最终看到的应该是这么一个效果。

就这里边写一个叫工作区，就是它，所以现在这部分我们就完成了，然后完成之后呢，在外code中还有最后一部分给大家演示一下啊，最后一部分我写到这里，最后一部分演示什么呢？咱就演示一下如何来创建文件啊，就是创建文件夹，创建文件，然后如何来运行这个文件。再来解释这个东西，那我说一下怎么来做啊，比如现在我在这里边啊，你看这位置有我这个内容，比如现在我在里边建一个文件夹，咱们创建一个文件夹，我起个名字，比如说啊，我就叫T，或者说你直接右键文件夹，或者你点这个都可以，然后创建之后，我在文件夹中建个文件，这文件注意啊，它没有类型的区分，你需要自己指定类型。

什么意思呢？比如说我建一个HTL是不是指定了，比如说我再建一个JS文件，是不是自己指定后缀名啊，他需要这么来做，然后在HT里边我给他写一段代码，这里边有个快捷键的方式，各位注意啊，怎么写的呢？我再演示一遍啊，你输入感叹号，然后一点就出来了，快速生成HTML代码，然后生成之后在里边我随便写的那种，用个标题标签就叫hello YS扣，现在这个完成，完成之后呢，我们把它执行一下，注意怎么执行啊，刚才咱是不是装了这个插件，Live server是一个服务器，所以我们用它可以执行，那怎么做演示一下啊，大家注意我的演示方式。

我现在点击右键，然后看这个叫open with live server，就相当于啊，你启动服务器，在服务器中呢，部署了一个页面，那我现在点开。然后各位看啊，在里边给我一个提示，你看什么提示说服务器正在运行在这个5500的端口中，那现在打开了浏览器，你看里边是不是有我这个内容，Hello white code，就是我刚才页面中的内容，然后大家看这个地址里边的显示啊，127.0.0.15500用它来进行访问，这是我们做一个测试啊，我还是用这个浏览器访问一下啊，啊都是一样的啊，最终这个效果。但是这里边啊，有一个问题说明啊，就是有些同学呢，基于他的浏览器问题，或者也可能是系统问题，他右键点浏览器不会打开，会有一些其他提示，那如果说不能打开也无所谓，你怎么做，直接这么来做，输入IP端口号500，然后你回车找到文件夹，找到页面，直接点效果是一样的，如果你不能直接弹出来也没关系，直接输入5500访问，依然可以看到效果没有区别，所以这样的话都可以看到啊，而这过程中特别注意啊，就是你要运行，就是你要访问的话，首先先启动服务器，Open相当于启动服务器，如果你不点open直接访问。

那肯定放不到，所以以上这些呢，就是我们关于code的安装，还有基本的使用过程。现在这个我们就完成了，然后完成之后给大家我再来总结一遍啊，刚才说的这么多，就是第一部分咱先安装，安装之后呢，你这里边装四个插件，然后重启code，装完之后你可以自己改变一下背景色，包括自己大小，然后咱们建工作区，建完之后你可以建文件进行测试，测试用live server来做到服务器的运行，通过IP端口号5500进行访问。

最终咱们点文件夹，点文件能看到效果，所以以上啊就是code的安装还有使用的过程。咱们后面项目中就基于这个软件来进行前端的开发。