day03/下午/057-尚硅谷-尚融宝-VSCode的安装和使用

好，那我们来看呢，我们做前后端分离开发前端部分的时候呢，就要使用这个前端的开发工具了，Vs code。好，那么这个是Vs code的官方网站，大家可以在这个官方网站上下载最新的版本。这是一个免费工具啊，就是，而且是就是可能会让你意外的是，这是微软出的一个免费工具，而且呢，它还有官方的中文语言包，所以呢，这个工具对我们来说还是比较友好的，那么我们把这个下载下来之后呢，我们就可以安装了，当然我也把这个下载下来的这个版本已经发给大家了，大家也可以基于我给大家发的那个版本进行安装啊，然后接下来呢，第一件事情呢，需要大家配置一个中文插件，那这个插件怎么安装呢？我先把这个工具打开，叫visual studio code。然后呢，我先啊，在咱们的这个。

嗯。D盘啊，有一个project嘛，然后呢，有一个200921，我创建了一个front文件夹，这个文件夹就是未来咱们写所有的前端代码的地方啊，所以呢，我们先把这个文件夹创建出来啊，那因为嗯，Visual studio code，或者说叫VS这个工具呢，它实际上启动效率，运行效率啊什么的相对于比较高，所以呢，他把一些不是呃特别必要的功能呢，它都省略掉了，然后呢，一些必要的功能，但是不是所有人都用的功能呢，它以插件的形式啊给我们提供出来了，所以它默认情况下呢，这个工具的功能呢，并不是那么多，包括它没有一个创建项目的功能，所以呢，我们是需要先把这个文件夹给它创建出来，然后呢，我们在这个地方用打开文件夹的形式把。这个front目录给它打开啊，选择文件夹。

好，这样就可以了，那默认情况下，你刚安装完成之后，打开一个项目之后呢，你会看到这样的一个开发界面，这个开发界面呢，大家应该是比较熟悉的了，就上面是菜单啊，左侧这边就是一些一些一些不同的选项卡了，那我们第一个要看的呢，是这个选项卡，就是这面叫扩展，当然了，如果你是一个呃英文的版本的，呃，一个工具的话呢，那这块就是tenansion啊好，我们点这个extenansion，然后接下来干嘛呢？在这个地方搜。搜这个Chinese。简体中文就搜这个就行了。简体中文啊好，那实际上你你搜前面这个Chinese就可在这个地方。然后接下来呢，就看到这个简体中文这样的一个插件，你呢，先把这个简体中文的插件安装上，那我已经安装上了，我就不安了，好安完了之后呢，它会在右下角这个地方弹出一个提示框，提示你重新启动这个Vs code的，那你重启就可以了，重启完成之后呢，就可以在我们的啊这个界面当中看到你熟悉的中文了，所以这个呢，是中文的一个使用，然后接下来呢，建议大家在真正进行后面的开发之前呢，先把我在这个里面给大家列出的插件呢，也都依次的安装上，所以呢，我们来看一下啊，Auto close TD这个是，呃，就是我们写HL的时候，能够帮助我们自动的去生成闭合标签的，还有auto rename tag，这个是我们修改这个HTML标签的时候呢，你修改这个开始标签，它自动给你修改结束标签的，然后这个呢，是就是刚才我们安装的啊，简体中文的语言包，然后。

这个呢是啊，我们在编写HTML和CSS的时候，尤其是在后面咱们要写到的这个六项啊，你写完了之后，默认情况下呢。

我们的这个工具呢，它不识别view里面的这个HTML和CSS，也就是说它没有那个高亮显示，都是同一个颜色的，那么我们可以在这个地方呢啊下载这个插件啊，进行一个高亮显示，然后这个呢，是他临时的一个测试的HTTP服务器，那我们不用自己去搭类似于他m cat呀啊等等这样的一些HTP服务器，它会给我们自动有一个内置的服务器，只要我们右键运行就可以了，那这个呢，是后面我们啊要学一个技术叫node JS里面有个模块化的技术，那这个是帮助我们这个模块化开发，提高开发效率的，然后这个呢，是也是一个运行的一个工具，有的同学的啊，操作系统对这个lab server不太兼容，如果这个东西你运行不起来的话，那你就运行它啊，但是我推荐用它啊，如果这个不好使的话，你就用它就行了啊，然后那具体怎么用，后面我会给大家具体的去说，然后这个呢，是一个代码的格式化工具，一个代码美化。

程序啊，然后这个呢，是我们也是编写这个后面我们要学到的模块化的时候，一个能够帮助我们快速完成开发啊，有智能这个提示代码的这样的一个插件，然后这个view，这两个都是后面我们要学习这个view这个功能的时候，能够帮助我们快速的完成这个代码片段的编写这样的一个工具，所以说这些都是插件，这些插件的安装方式呢，和我们刚才安装的这个简体中文插件的方式呢，是一模一样的，那么大家按照我这个列表当中的内容呢，把这些插件安上就行了，那么举一个例子，比如说life server，你呢，还是在这个地方就搜。Love server。行吧，啊然后呢，对连上了啊好连上之后呢，我再一点，然后在这个地方呢，就点安装啊点安装就可以了，那当然我已经安装过了，我就不重复的进行安装了，所以刚才列出来的所有的插件，大家都用相同的方式把它安装上，好吧？啊好，安装上之后呢，我们来看一下有一些基本的设置啊，基本的设置呢，和我们的idea呢，也都大同小异了，所以呢，我们来简单的看一下在哪设置，在这个位置有一个叫管理。

啊，最上面第二行有个叫设置好点击进去，然后在后右面左面这个地方呢，有一些各种设置的一些选项，比如说我想设置一下我的这个控制台的字体的大小，那么你可以在这个地方对我们的呃，编译器啊编编辑窗口当中的字体的大小进行一些设置，那么同时呢，如果你想设置其他的内容的话呢，你也可以在这个地方进行选择，比如说有同学喜欢这种浅色风格的编辑器，那你就选这个浅色对吧，另外还有其他的红色的哈，有的同学呢，喜欢红色风格的编辑器，那你就选这个红色的，明白哈，所以这个呢，是我们的一些个性化的设置吧，大家可以参考这个啊做一个设置，然后这面呢，我会给大家一个设置的一个模板，那么大家如果想和我的设置保持一致的话呢，你可以把我的这个设置呢复制一下，好在Vs code当中所有的设置实际上呢，最终都是以配置文件的形式存在。

改的，所以呢，这面的所有的设置，实际上呢，都是会被设置到这个里面，我们打开啊，打开设置，点击这个打开设置，包括刚才那个14号的文字，还有这个浅色的风格，实际上在这个地方都是以这个形式存在的，那么另外呢，我在这个里面还设置了一些其他的一些规范，代码规范啊，比如说呢，我默认使用的这个代码格式化工具呢，就是刚才我们刚刚安装的。安装的这个用这个做那个自动的代码格式化和美化，然后接下来呢，Javascript当中呢，就是我们现在的这个编程，呃当中呢，它有type一个type一个缩进是四个空格还是两个空格，这面呢，我使用的是两个空格，因为有的时候我们写这个javascript模块化编程的时候，它的缩进就是特别多，缩来缩去，就你要四个空格的话，就可能可读性就没有两个空格好啊，就没有两个空格紧凑，所以这块我是使用的是两个空格，当然这个根据你自己的习惯，然后这个呢就是啊，当我们CTRLS保存的时候，是不是能够帮助我们自动的将代码格式化。

啊，所以呢，我这边呢，就写了一个true，就是1CTRLS自动格式化代码，然后这块呢，就是javascript，它有两种编程风格，一种是有分号的风格，一种是无分号的风格，我比较习惯于写无分号的风格，所以呢就是无分号啊，然后还有呢，就是javascript当中，它没有字符和字符串的区别啊，它单引号也可以表示字符串，双引号也可以表示字符串，那么也是有两种风格，一个是单引号风格，一个是双引号，双引号风格，所以在这个地方呢，我用的是单引号风格，好所以这个是我平时写javascript的几个啊，比较常用的一个设置啊好，那这块呢，大家如果想和我保持一样的话，这个设置你就把这个粘过来复制一下，然后呢粘贴到你这个里面来就可以了，我再说一下这个文件怎么打开的。

点击这个管理，点击设置好，直接点击右上角的这个打开设置好，然后把我笔记当中给你们的内容呢，直接粘过来就可以了啊。这样的话呢，你的工具呢，可能默认情况下就和我的一致了，那你再想改什么其他的啊，这个设置的话，你上这个地方来改就可以了啊这块呢，就是我们这个开发工具的一个啊，基本的安装还有设置啊，需要大家注意的地方。