vscode安装colab

我们后面要写正式的商业项目，所以前面那种用浏览器和记事本的编辑方式就不行了，我们要有正式的软件和环境，这一切我主要讲一下 vs code 的安装和使用，以及 note、 zs 和 get 的安装。 好，我们来到浏览器这边，打开这个网址，可以用 vsc 点 midol 这一点 com 跳转到这里， 这个网址就是我总结的一些我们必修阶段需要的一些软件和环境。然后浏览器的话安装很简单，所以就略过，你们这边尽量用 a 值，用不了的用可用，我这边都有链接去下载安装就可以直接使用。 然后下面我先讲云环境，云环境就是在厂商服务器上的环境，当你的电脑配置不行，或者说你自己安 装有问题的时候，那么你就直接使用云环境，云环境会默认配置好所有东西，我们直接使用就行。来这里我们先看 colod studio， 这个是腾讯云的， 点击登录，注册后可以直接用微信登录。进来之后我们看下面这个新建工作空间，点击新建第一个 on one， 他就会包含所有的语言和环境， 然后我们给他命名二一零一，选择仓库为空，然后创建，创建好后双击进入，等待一下就会进入。 我们先把模板关掉，然后左边这个就是文件夹栏，右边是欢迎页，我们先关掉，点左边新建一个文件，命名为 ext， 点 html 可以看到创建了一个 html 文件，输入 html 有自动提示，选择这个 htm 五，点击后就会自动补成一个空的模板。 我们先写一个 h 一标签，然后为了在他这里面能看到这个网页效果，我们来这边的插件市场拓展安装插件，这边选择 live， 可以看到有一个 live preview 插件，点这个安装，呃，他这个有一点问题，就是不会实时改变，所以我们退出一下再进来， 然后右键就可以看到这个来无 preview 选项数，就是展示，点击后右边会出现提示，点这个三千端口信息，打开内置预览， 可以看到这个网页出现了，我们修改文字之后刷新一下，可以发现它实时的修改 好这个 live preview 插件，他会帮助我们在云环境上起一个网站服务，然后看到网页，我们也可以在这边创建一个新的 htm 文件，用同样的方式给他输入模板， 写个 h 一标签，输入我是第二页， 再回到 index 首页这边输入 a， 创建一个 a 标签，把他的网址改成第二页的地址，输入前往第二页， 在预览这边刷新一下可以看到这个链接标签，点一下前往可以看到 跳转到第二页了，这就是两个网页之间的跳转。然后还有一个是可乐的 id， 这个是阿里云的，用阿里的账户登录之后也可以创建新的空间，这边我就先提前创建了一个， 这边的扩展是 live silver， 前面那个在阿林不能用，但这两种插件效果是一样的。安装后点右下角这个 go live， 它会自动打开五千五百端口， 这个单口是什么呢？比如说 ip 地址是你的小区，那么单口就是你小区的门，北门、南门这样， 这样每个端口代表一个门，所有的网络请求会从这个端口中进来，出去可以看到这边也是一样，实时修改后刷新这个网页，这个域名是云环境给的，可以暂时。 另外这两个是国外的，英语和网络不好不要看，有需求的同学自行选择。 下面是主要的问题，就是很多同学下载 vs 扣的下载不下来，因为网速很慢，国外的地址，然后我这边就用了加速连接。你可以先选择你的电脑版本，然后点击这边匹配你电脑的版本，然后你就可以看到他这个下载速度非常快。 下载下来之后打开点击，我同意，然后勾选这个全部，然后再下一步，下一步安装，安装好后直接完成运行就可以。刚进 来的时候很多同学说全是英文，看不懂，其实你只要稍微等三秒钟，右下角就会出现这个安装语言包提示，并显示语言更改为中文简体，你点安装并重启就可以了，重启之后看到已经是中文。 另外在这边点击插件市场也可以看到这个中文插件，我们先卸载掉，假如说你没有看到右下角那个提示，那么你可以来这边插件市场，然后搜索 chinese 中文，然后点击安装，重启一下就可以看到中文了。 visco 的左边依然是文件夹栏，我们点打开文件夹，可以选择桌面文件夹，当然你们也可以选择其他文件夹。我这边为了显示方便，就用桌面点开后 勾选这个信任，这个暂时不用管，也不用理解，勾选就行。可以看到左边已经是打开了桌面文件夹，这里面有我们桌面上的所有文件 index 点 s t m， 在这边是我们前面写的那些东西，然后我们再来安装一下插件，让使用更方便， 可以按照我列的这个目录去搜索安装。首先安装 preter 代码美化插件， 这个插件的作用就是会格式化美化你的代码。我们写代码的时候要有空格，要有换行之类的， 我们自己写的时候如果一直按空格按回车太麻烦了，对吧？所以我们要用这个插一键，让他帮我们自动格式化。在文件夹中右键可以配置默认的格式，选择格式化文档。 如果我们用自带的格式化功能，他会格式化成这样子，我觉得这个自带的 htm 格式比较难看，然后用这个 party 插件他就更好看一点。 然后安装一个翻译插件 wsen translate， 这个插件呢是我昨天找到的一个神器，它有一个翻译悬浮功能，也有两个快捷键，我们看一下 就是双击一个单词选中，然后把鼠标移上去，就可以看到上面出现的中文翻译，换一个 单词也出现了翻译宽度，对吧？这个就非常非常方便，大部分的代码其实都非常简单，只不过是我们看不懂英语罢了。所以的话有了这个翻译插件， 我们就可以看懂代码。然后他有两个快捷键，一个是 l 特加 t， 可以自行输入中文，然后翻译成英文，也可以用 l 特加 w 把选中的单词翻译成中文。 还有一个比较常用的功能是搜索跳转，这个功能是什么呢？就是我们碰上一些东西不会的时候就要去搜索，对吧？但是每次复制粘贴太麻烦了。 这个插件安装之后就可以一键跳转到搜索，我们这里安装，然后回到页面，选择一个单词，右键可以看到它上面有个 sexy online， 就是在线搜索的意思，默认是用谷歌搜索，但是谷歌大部分人上不去，所以要选这个 switch 换到这个病，推荐大家以后用病搜索，然后就可以看到直接跳转到搜索页面，不用复制粘贴，非常方便。 还有一个传斯类唐恩赖自动打开翻译网站也是比较方便， 但是我们有了那个悬浮翻译就不怎么会用这个，我们因为刚安装他这个插件有点问题，需要重启一下，按 f 一输入 restart， 选择插件速度重启可以重启， 然后点这个设置小图标就可以打开这个插件的设置。我们这边把他的默认翻译情改成 并。然后还有一个配置是显示在状态栏，勾选后翻译会在最底下的状态栏显示，比如说我们现在双击单词之后，可以看到右下角出现了翻译，这个也是比较方便，但是有点乱糟糟的，所以我还是把它去掉。有需要的同学可以打开， 所有插件的自定义设置都是这样的，点那个设置小图标，然后还有一个来 preview， 就是我们前面语文环境刚刚使用过的，在本地更好用。 搜索之后安装插件，它相当于给本地起一个网站服务器。以前我们打开网页，其实不是服务器打开，是用文件系统打开，然后这个打开之后可以看到是用使用服务器去打开 这里幺二七点零点，零点一是我们本地网络的 ip 地址，然后这个网站服务器在三千端口上，端口呢？还是那句话，就是相当于小区的门，所有流量都要从不同的门里进来，出去 有八零端口，有四四三端口，有六千端口，有五千端口，有三千端口，这样都可以。 然后再安装一个 vs code icons 插件，这个东西就是美化我们的文件的小图标，可以看到我们这边的小图标就变成了这样美化的啊，但是我觉得其实也没有，所以我就卸载了，你们需要的可以自行安装。 除了功能插件，还有一些主题插件，比如我们可以搜索 theme， 会出现主题插件，按 fe 输入主题，可以打开主题的设置，他这边 有很多内置的默认主题，比如说如果你喜欢浅色，那你可以选择浅色，如果你喜欢红色，可以选择红色，但还有很多其他的颜色，你们可以按照自己的个性，自己的喜好去配置，然后搜索出来，有很多主题，你们都可以去查看它，然后安装使用， 比如你看这个 atom 就是这样。 还有 winter is coming， 叮咚将至， 还有这个 material 主题，反正各种各样的漂亮主题，你们喜欢哪一个就用哪一个，这个是看你个人喜好的，随便都可以。 ok， 大概就是这样。然后插件的话，我这 暂时说这几个。再就是一些小配置， 怎么配置呢？就是点文件，点首选项，点设置，然后就会打开这个 vs code 的设置页面，我们先把 auto sale 打开，它会自动保存，当我们写完代码后，让它自动保存，就不用按 ctrl 加 s 了。下面是 fun size 字体设置大小， 可以看到这边显示字体会变大，这个就看你自己的喜好设置了。 还有一个是 for my town see you， 公选之后，保存文件的同时会自动格式化代码，你按保存它就会自动美化你的代码，不用你每次都右键去 点击格式化，很方便。 由我们这边来试一下。先写一个 d 五标签，可以看到 ctrl s 保存后，他会直接换行，而不用我们去敲回车。 然后再写一个 p 表现，他和前面一样， ctrl 加 s 保存后他会自动换行，不用我们再按回车，这样你就很方便。 然后再设置一下默认的格式化插件，我们选择 preteer 就行， 然后再设置一个林可以迪厅勾选 之后他会有什么效果呢？比如我们写的这个 p 标签，他前后两个开始和结尾，有时候我们写完前面的标签就忘了改，后面会出错，有这个之后我们改前面，他就会自动把后面的标签也改掉，这个写 html 的时候非常方便。 还有一个问题就是新版的 vs code 会对容易造成误会的标点符号进行提醒，比如说我们中文的分号和逗号等。 出现这个黄色的小框，如果你想去掉它，那么鼠标移动到上面，然后点调整禁运就行。 好，说完了 vs code， 再说一下安装这个 no 的 gs， 它是运行加挖 scrap 的后端框架，我们 进来这个链接之后，可以根据你的电脑选择不同的安装包，我这边就选择我的电脑是六十四位，然后点击打开，哦对，我这边因为原先已经有，所以的话这边是不男装更低版本， 我们也可以去 no 的 gs 官网去下载，这边搜索 no 的 gs 就会有这个官网，这边可以下载两个版本，我推荐你们下载那个 lts 的小版本，因为像这个最新的，他有时候会有一些不稳定的情况。 然后我们这边下载下来之后，点击我接受，再一直点 next 就可以一路下一步，然后点 install 就行，我这边就取消了，因为我有你。安装好后记得重启一下电脑，然后再安装这个 gate。 get 的话是版本管理系统，我们以后写代码需要版本管理是需要安装这个的。好，进来之后还是按照你的电脑是三十二位还是六十四位去安装一下，如果你实在不知道是什么，那你就安装三十二位也是可以的， 因为六十四他可以兼容。算上好像下载太慢了，我就不下载了，你们慢慢等。重启完之后回来这边点击新建终端，可以打开这个中端框，然后输入 no 的杠 v， 他会出现一个版本号，就是说明 no 的 gs 下好了。 其实云环境那边的配置和本地差不多，云环境基本上都是基于 vs 扣的做的，我们来这里搜索 party 插件，然后点击安装。这边的话安装会慢一点，但有些插件不兼容，比如说这个翻译插件在云环境就没有， 可以找个别的反应插件，比如这个也不影响使用。如果你电脑不行，或者说不想安装或者安装出错，一律建议使用零环境，哪怕他有些插件不能用，但足够你个人使用了，稍微有一点不方便而已。 我再来讲一下 vs 扣的的文件系统，左边这里相当于一个文件夹，我们这边创建一个文件之后，可以看到桌面上也自动会出现文件，大家懂了没？然后我们在编辑器中把这个文件内容改变之后， 回到桌面用记事本打开那个文件，可以看到他会出现一样的代码，就是说你在这边所做的所有修改都是会同步到我们这个文件夹里面的啊，相当于高级的记事本嘛。 我们也可以创建一个文件夹，同时看到桌面上也出现了文件夹，还可以拖动把原先的这个文件移动到文件夹里面，所以有这个文件系统后，我们就不用再切过来切过去设置各种文件了。 另外再创建一个 a 点 txt， 说明他不仅仅可以编辑 stm 文件，其他的所有格式文件都可以编辑，我们用文件管理器打开后也可以看到出现了， 然后我们在文件管理器上新建文件，可以看到 vs code 中也会同步显示新建的文件。 还有一个就是切换文件夹功能，比如说我们现在不想用这个文件夹的文件了，我们就选择另一个文件夹，这边我打开一个新的文件夹，就会出现新的目录，这个就是我们前面放图片的那个文件夹，然后也可以回到这个桌面。 另外还可以新建窗口打开第二个 vs code， 在这个多项目写的时候会比较常见，有不同的 vs code 窗口写不同的项目，同时在他们之间来回切换。 也可以在一个窗口中打开两个工作区，一个工作区其实就可以理解为一个文件夹， 可以看到这边的工作区里面同时出现的桌面文件夹和那个视力文件夹，两个都可以同时使用，就可以把第二个窗口给关掉了，这样的话在一些情况下比较方便。我们也可以把这个文件夹从工作区删掉，不是实际删除 好，删掉之后再打开装备文件夹回来，然后点一下文件，打开编辑器。我们现在来说一下几个常用的快捷键， 平常写代码的时候会比较常用，首先是 ctrl 加 d 会选 选择下一个相同的字符，就是当你选择一个单词之后，按一下 ctrl 加 d， 他会同时选择下一个，然后一直按会一直选，比如说我们这里按了三下就会选择四个相同的 p 标签，我们改他的话会同时改四个地方，这样的话非常的方便。 再就是按住 alt， 再按一下鼠标左键就会添加一个光标，也可以添加多个，多个光标同时添加之后我们输入文字，他会同时改变多个地方，这个功能也是非常方便。 ctrl 加 s 保存之后， ctrl 加 z 是撤销。然后还有一个是复制一行，我们可以用 alt 加 shift 加上下 下键就可以快速的把一行代码复制到上面，或者是复制到下面，我们用 ctrl 加 c 复制，还要回车之后调整位置，在 ctrl 加为粘贴，这样比较麻烦，但是我们有了这个快捷键之后，按一下就会复制一行，比较方便。 接着是查找 ctrl 加 f， 当你一个文件中的内容比较多的时候，我们想找一个字符找不到，就会用这个 ctrl 加 f 查找， 然后输入字符就可以拉开这个小箭头是替换，我们可以把查找到的东西按一下替换，替换掉我们需要替代的字符，然后右边是全部替换， 左边是单独替换，意思也就是字面意思点一下单独替换，可以替换一个单词，点一下替换，全部可以全部替换。 再然后是全局搜索，点左边这个搜索图标就可以搜索我们打开的工作区里面的所有文件的字符。比如说我们现在有两个 html 文件，输入搜索 html 的时候可以搜索到这两个文件家中的字符，我们点开之后可以看到一个是在 index 里面，一个是在 hi 里面， 这个全局搜索比较适合在多个文件中搜索东西。然后说完这个之后，我们再来看一下布局。 vs q 的很方便的一个功能就是可以分开创客， 比如说把一个文件放在两个窗口，这样的话适合在同一个文件的同时查看，两个部分 也可以适用于多个文件的同时使用。比如说我们这里先演示把上面这个抬头复制一下，然后在最下面粘贴进来，或者在右边的话中间也粘贴一下，可以看到 可以同时看到上中下三个部位，写的时候就很方便。你也可以用这边的布置设置，把它设置成两栏四栏，然后可以看到有四个部分都可以同时编辑， 然后外观这边还有很多东西，他们有不同的作用，你用的时候可以自行尝试，当然也可以不动，我的建议是不要动，前期的话不要折腾这些东西，因为他默认的就很好了，我们只需要知道怎么把他这个窗口 拆分什么的就行，然后选择这边还有一些常用的快捷键的按钮，也可以用这边的鼠标点击使用， 再回到这边首选项有个键盘快捷方式，这个页面里面就是所有的快捷键，你们以后如果想要什么快捷键都可以在这边搜索到查看到，也可以去修改，双击他的这个键绑定，然后输入你想绑定的快捷键就可以。 然后如果你不想改或者是冲突了，就可以再去把右键重置，按键绑定会恢复到原来的状态。这个的话先不用看，我只是说一下，哦对，还有一个帮助，比如说你们不会的时候可以点这个帮助开始，然后 在这边有他的一个小教程，也可以看一下他这个小教程，教你们学会更好的使用 vs 酷的。再接着我们按 f 一打开这个设置选项，我们可以看到有不同的设置，这里面有非常多的设置，直接输入功能的字符就可以搜索。 我们这边打开 live preview， 可以看到是乱码，因为我们这个文件夹是中文的，他这个插件不识别中文，所以我们以后写文件夹写文件名尽量要使用英文，因为中文在这方面确实支持不好，我们改成英文之后他就可以正常显示了。 最后我们把这些不用的可以删除掉，右键删除到回收站就行。好，那么本期到这里，本期的作业就是配置好你的环境，然后好好练一练所有的快捷键使用之类的东西。 下期我再补充一个用四 ss 写真实项目的案例，帮大家解决 css 的疑惑，拜拜。

好了，那从现在开始的话，我们正式进入旧一班的课程哎，在基础班我们学 htmlcr 三四的时候，我们用的开发工具是撒布拉姆，同学们也会发现它是一个非常轻量级，非常好用的软件。 那到了就业班的时候呢，我在这里面呢拼课老师再给大家介绍一款新的哎编辑器哎，就是我们的大码开发软件，叫做 vs code， 那之所以多交给同学们两种编辑器啊，是因为同学们如果毕业以后进入了我们的公司，那公司里面原来有的是用撒布拉姆，有的是用 vs code 的，有的是用 vip， stomp 等等的各种软件，各不相同， 在这里面呢，再给大家介绍另外一种，那这样同学们掌握的更多，以后进入工作开发的时候呢，可以立即使用就行了啊。那但是呢，整体来说，这 vs code 和撒布拉姆有很多的相似点，大同小异 啊。好，那么我们给同学们来介绍一下我们的 vs 扣的这个软件，那我们在这里面呢，主要讲解这么几个知识点，第一，那么我们讲解一下那么什么是 vs 扣的以及它的一些哎，由来， 再来一个呢，给大家介绍一下我们 vs code 呢这个软件怎么安装，那么安装完之后呢，我们看 vs code 怎么去使用，那最后呢，我们来看一下 vs code 的插件是怎么来进行安装的。哎，这是我们接下来学习的四个内容， 那修完之后呢，同学们能够掌握啊，第一，能够自己安装啊 vs code， 把 vs code 装到你自己的电脑上去好。第二个呢，能熟练的使用一下我们的 vs code 这个软件 好，第三个呢，哎，学会给我们 vs 扣子安装一些我们最为常用的插件，那后面的还肯定呢，有许许多多插件，我们边学边用好了，这是我们的教学目标哎，还有我们学 内容，那秀完之后呢，我们接着来看一下我们的 vs code， 简单给大家做一个介绍。好，这是我们的 vs code， 简称 vsc。 那么这个 vs code 呢，是我们微软公司推出的一款免费开元的轻量级的代码编辑器， 他里面呢，有许许多多的啊，比如说他几乎支持所有主流的开发语言啊，什么 jm 呀， pgp 呀，咱们的 gs， 他全新通通能够支持的啊，是非常好。 那需要同学们注意的是，谁推出的？是微软公司推出的啊，那到底他有什么亮点呢？哎，在这里面呢，皮克老师既然给你们推荐，肯定有推荐的理由啊，第一个，他比撒布拉姆要开远， 因为他嘛，这是一个开源的啊，因为竟然免费开源的。第二个呢，他比 websterm 更轻，一会安装你就知道了。这个 vs code 呢，大概呢，只有四五十兆，非常小啊，非常小 一个软件，那 websdom 上百兆的啊，几百兆，而我们的什么呀，哎， vs code 只有几十兆，所以是非常小的啊，所以打开速度会更快。第二个呢，提示功能很强大哎，我们写的时候，同学们最喜欢的代码提示功能，它比着我们撒布莱姆还要强大， 好自带我们的艾米特语法。那这个呢，我们说过啊，就自动补充嘛，我写个 div， 按下踏步键就可以生成。那我们撒布拉姆为什么哎，可以直接生成呢？因为我们撒布拉姆，我已经预先给同学们装好了插件，同学才这样子，而我们 vs 扣的你下载下来之后呢，不需要装插件，这个软件本身就自带的这些东西的啊， 好了，那再一个呢，有插件的安装非常方便哎，后面呢，我们知道我们有许许多多非常好玩的好用的插件，而你用 sco 的安装非常简单，傻瓜似的你，你学了就可以了啊啊，你学了你就懂了。 然后你要是用撒布拉姆的话，安装还是挺费劲的好，那自带强大的调试功能，你会发现还会有的。再有一个软件是跨平台支持温系统啊，麦克系统，零六个系统，这软件呢，都可以支持的哎，所以说呢，他他软件开发的比较全， 而且呢，我们这个 vs 扣的本身就用 no 的来开发的，咱们后面是不是要学 no 的呀，这个软件呢跟我们前端关系很紧密的，还是推荐大家去学习的啊，当当里面推荐旅游呢，还有若干点，反正我们推荐最大旅游是什么呀？免费开源，这是我们最喜欢的。 好了，那么我们了解了解完了之后啊， vs co 呢，就是微软公司推出的一个免费轻量级的编剧器啊，开发起来呢，它里面有非常多的好用的一些功能，我们一点去研究好了，那介绍完毕之后呢，下一个呢，我们看一下 vs co 的怎么去安装。那首先呢，我们安装的方法呢，是这个样子，那这呢，有个官网的下载地址 是他，那下载完之后呢，我们只需要找到里面的这个叫做什么呀，当劳的就可以了，直接下载，那你要是 windows 系统呢，你就选当劳的 fall windows， 如果你是麦克系统，就选择里面的当劳的 fall mac 就可以了。好了，我们来看一下怎么下载， 大家只需要点击一下我们这一个网址，好集中该我们在浏览器之后呢，进入我们这个下载页面，在下载页面里面有个叫做当烙的包。 windows， 那你我说了，刚才你可以选择你们的 windows 六十四位的啊，苹果系统的呀，或者是其他的， 这里面都没有的话，你可以往下面去滑，下面的里面也有一些我们要的啊，那你温度死的这里面的你是六十四位的还是三十二位的啊？然后呢，你再再下载一些一些其他的系统的，麦克系统的，零六的系统之类的都可以，如果三十二位同学下载三十二位就行了。好了，因为我是六十四位的，所以说我就可以直接点击我们上面这个下载 就行了。好，那么我们点击一下， ok， 那点击完之后呢？现在呢？稍等片刻啊，这是给我们做了一个介绍说明，那你不用关心，你只要看一下这个地方呢，正在有一个下载的过程。好，那下载完之后你会发现，哎， 小不小就只有四十三点一兆呀，非常小哎，所以说呢，它是一个完全清亮剂的啊。好，那下载完毕安装的方法啊，这个点保留一下就 ok 了，安装非常简单，你只要单击一下它就可以了， 点击一下他。好，点击完之后呢，点击运行就 ok 了。那此时安装软件对我们来说完全不陌生， 你用了太多了，安装的画面完全是纯中文版的啊，然后呢，我们点下一步就 ok 了，然后呢我接受协议下一步是吧？然后呢我们默认按照 c 盘就 ok 了，然后点下一步，那么，哎，我们，嗯选择他啊，就先不用多管，再走一个，然后呢，我们 放点桌面快捷方式也可以啊，好，选择，之后呢，我们点击一下下一步，那么安装一下，我们稍等片刻，他很快就能安装完，所以说呢，这个软件的安装还是下一步下一步完成就行了啊。好了，那么慢慢的他正在安装到我们的计算机里面，那么我们呢，安装完毕之后就可以来进行使用了， 那同样道理呢，在这个官网上啊，让他安装一会，在官网上里面有一个叫做道士，就是文档，你可以点开看一看，它里面有一些说明，哎，当然里面纯英文的啊，纯英文的。好了，在这你看不明白也不要紧，因为这个软件你会发现是不是跟我们撒布莱姆是不是极为的相似啊？ ok， 我们关掉。好，那下面马上安装完毕，然后我们启动就可以了，我点击完成，这时候呢已经完全打开了，这时候我们发现，哎，这个 vs code 呀，他的界面和我们前面写的我们的什么呀，撒布拉姆是不是特别的相似啊，你看也是一个黑点吧，哎，是这种 编辑器的啊，所以说我们学习来完全不陌生，那这样的话，我们就把这个软件呢安装到了我们的电脑上去，看，明白吗？这是刚才我们说的安装的方法。 好，那安装完毕之后呢，下面呢，我们给同学来讲一下我们这个软件的使用方法啊，其实呢，你有了撒布拉姆这个基础啊，撒布拉姆怎么使用，它使用起来基本也是一致的。好，我们看一看，它有这么几个强大的功能需要我们学习。第一个呢就是文件目录管理，它有很强的目录管理的功能， 比如说我们写的一个品用购，里面有很多的文件夹，这时候呢，他可以来管理我们这文件目录，是非常方便的，怎么做呢？非常简单，选择 file 里面这个 open photo 就可以了。好，那么就说文件里面打开文件夹，那比如说我们呢， 选择文件菜单， file 菜单啊，里面有个叫做 open farther 这个东西好，选择它之后，哎，那比如说我就以今天的还是案例为主啊，选择桌面上 打着他。哎，我们这是不是一个叫做小案例的东西，我们以这个案例作为我们的跟目录就行了，双击我们的案例，然后选择你们的选择文件夹，那么我们稍等片刻，会发现启动开。哎，这个案例是不是已经有了这个文件夹，那在这个文件夹里面呢，我们就可以来创建我们想要的各种各样的文件了，来看一下它的使用方法啊。 那我们创建完之后呢，里面有这么一个东西，按钮，那其中的第一个按钮，这叫做新建文件，哎，我们可以新建二维码文件呀， cs 文件呀， js 文件都可以用这个按钮来创建。好，还有一个呢，我们可以选择你们的新建文件夹，通过我们这个去创建我们的文件夹就 ok 了。好了，那么我们比如说我们来创建一个来看一下啊。 好，那么在这里面的话，我们选择这个按钮，点击一下，我们选择里面，比如说我们就叫做我们的什么呀？ vs code， 然后呢点 atmr 就行了，还是要写上我们的后缀名 h 码，然后敲回车，这时候呢，会有了我们的 vs co 的，点 h 码就行了。还记不记得在我们撒布拉姆里面怎么使用的？ 哎，我们想称骨架，是不是一个叹号呀？我们这个行不行呢？也可以，那叔按一下胎宝键，他也能生成我们的骨架 好吗？这也是一种骨架格式的啊，所以说呢，这是一种风格， ok， 选择它，那同样道理呢，你看它里面更强的地方在于它已经集成了一些我们的艾米特语法，比如说我写一个 div， 敲一下看不见自动补全，是不是我数第二位乘一个十，看不见也能自动生成？ 其实你会发现这个东西呢，我们的撒布拉姆是安装插件才有的，而我们这个 vs code 是自带的啊，所以开发起来使用还是比较简单的。但是呢，你会发现在我们这个里面的话，新建就是文件，还有个新建文件夹，你比如说我在新建一个什么呀？ c s s 的文件夹 呐，是不是一个 cr 文件夹，我可以在文件夹里面带新建的 cr， 三四就可以了啊，它里面都是可以生成一样的，所以说呢，你看它是文件目录管理还是比较方便呢。 好了，那学会了我们的文件目录之外呢，有个同学还会问，哎，老师，我们看了这个风格呢，是蓝色的字啊，然后还有橙色的，还有这种青色的，哎，我比较习惯我们撒布拉姆那种风格， 这个主题颜色能换吗？那答案肯定是可以的，他是能换的啊，那么想要换的方法呢？非常简单，那就我们选择我们这一个操作方法呢，是我们这个颜色主题给他更换一下 颜色主题呢，需要我们操作方法是在我们设置收选线按钮里面有个卡了， theme 好卡了，这个是不是设置收选线按钮在哪个地方呢？哎，来给我来看一下啊，是在我们左下角中的有这么一个按钮，哎，这个按钮呢，我们称之为设置收选线按钮，那么在设置收选按钮呢，会弹 这个框，来一个叫做卡拉 c 幕就行了，通过他来设置我们的主题颜色好了，那到底是还是不是呢？我们来看一看。打开他之后呢选择这个小按钮呢，说在这个地方呢，点开完之后有个叫卡拉 c 好，点完卡拉 c 幕之后呢，会弹出一个对话框，是这种对话框， 在这个对话框里面他默认的是这种大可，哎，地方的大可是这种风格的，有人说，老师我喜欢我们原来撒不拉姆那种风格，可以设吗？某问题啊，哎，在这个地方，哎，在我们这么一个叫做什么 monk 这个东西好选了他之后呢，我点了他，哎， 怎么样，是不是回到了我们撒布拉姆的风格啊，眨眼看上去还以为又是撒布拉姆呢，其实呢是我们 vs 扣的啊，好，这里面风格有非常多，你可以里面去选择啊，卡拉 see， 然后里面选择它，你比如说我们选拉艾特这个地方的拉，艾特选完它之后是这种白底儿的这种字的啊，看你同学喜欢什么样的风格，那我呢个人呢还 还是比较喜欢用这个啊，这我们的什么呀？摩托卡这个单面的这个东西，然后选择他这是我比较喜欢的那种风格。好了，那这个颜色主题呢？根据你自己的喜好去选择一个就可以了啊， 那么这个选择完毕之后呢？哎，我们刚才说过了，他说的方法是通过什么呀？是通过我们这个啊，打开颜色主题这里面他默认的这个，在这里面你可以任意选一个，你喜欢就行了。哎，那选择哪一个你选择哪一个就可以了，这是我们讲的颜色主题， 那其他的一些操作呢？还有哪几个需要我们注意的啊？那第一个呢就是如果放大和缩小仕途，因为有同学会发现我的电脑如果分辨率比较高，这个字会比较小，能不能放大一下呢？哎，只不过呢他不能像我们卡，呃，撒布莱姆的卡时间滚轮来放大了， 你可以简单一点，可以按住卡车键加上加号键。哎，是不是可以放大一下卡车加减号键是可以缩小的，看到了没有？ 哎，这个样子啊，调到你适当的大小觉得你满意位置，那他快递键什么呀？ ctrl 加加号放大， ctrl 加减号是缩小，还有一个呢，你如果想复制一份，复制一个单码，比如说我这写个 div， 然后写个一二三，你想要复制呢？非常简单，你只要这么做就行了，把光杯定过来， 只要把光杯定到这一行上他就自动选择这一行，你可以去看人家 c 复制这一行，看人家微展厅这一行，看人家微微微微微是不是啊？可以复制很多很多行了啊，不需要点击行后啊，或者是拖拉选中，只需要把光杯定到这一行上，就可以选定这一行了，直接复制和展厅就行了。 好了，那你如果说，比如说这样写了一个 abc 啊，我想把这个 abc 这一行复制一份，你可以复制在下面，也可以复制在上面，他有快捷键。那你可以按住什么呀？ alt shift 加上下箭头，先把光杯定过来啊？ alt shift shift 加上下箭头，哎，它就可以复制一个新的 abc 放到下面。好，如果你把光标定在这啊，好，你看啊，啊，这个呢，我随随便改一改，我把这个啊光标定在 abc 这，我按着 couch out shift 加上双箭头， alt shift 加摄像头走一个，他复制一份新的，是放到了 ab 原来的一行的上面， 这是这几个操作是不是可以一样的啊？好了，你看复制上上复制一行是二十四，加上镜头复制下一行他，哎，你只需要把国门定到某一行，他默认选定全行，可以直接进行复制剪切和粘贴操作就可以了。啊， 那这是他的一些其他的操作，那其余的一些操作呢？和我们撒布拉姆操作基本是一致的，其他的怎么操作，你就按照撒布拉姆撒布拉姆的操作方法去做就好了。好，那好嘞，那我们简单的对我们的 vs code 呢，它的使用呢？做一个总结，看看刚才啊， 我们讲了什么内容啊，记住第一个呢，我们知道 vs code 是哪个公司推出的哎，是微软公司推出的，它是一款非常轻量级的好用的编辑神器。那我们知道 vs code 它本身就才四十多兆，是不是特别小啊，打开速度也非常快的啊。 那再有一个呢，我们前面讲了他有新去做的优点，什么自己继承了艾米特语法呀，哎，然后呢，安装插件非常方便呀，跨平台呀等等之类的，还有很多好的一些优点呢，我们后面边学你就边更了解他了啊。 好，第二个呢，你要求呢？你会呢？是不是能去往官网上去下载这款软件，并把它安装到你自己的电脑上去？这个软件的安装我们讲过了，也非常简单。再有一个呢，我们要学会其中的两个功能啊。第一个呢，是学会我们的目录管理文件的功能，那我们说我们就可以选择 文件菜单里面的，打开就可以了，就是我们说 file 菜单里面的 open folder， 是吧？哎，就可以来打开我们的文件夹了啊，那这个功能还是非常常用的，以前咱们基础班里面学的，我们那个最后的项目的时候，用它来编辑是会非常方便的。 ok， 再一个呢，因为呢，呃，他默认的颜色主题呢，并不和我们以前的一样，那你可以去选择你自己喜欢你中意的那一款哎，颜色主题给大家学会去更改，那非常简单，是不是设置收选项按钮里面有个叫做卡拉儿 theme 就可以了。 最后呢，你能记住几个最常用的快捷方式，比如说我想复制，直接把光杯定过来，直接卡上加 c， 卡上加微就可以复制一行，无需选中。再有一个呢，那我们说了，试图那些放大和缩小是不是卡着加加号可以？放大是图，卡着加减号，放缩小是图就可以了。 那这是我们说了我们刚才讲过的几个哎使用的总结，同学们先把我列的纸条呢来体会完成它。

好了，当我们把 vs 扣的安装好之后，那么接下来我们就进行我们常用插件的一个安装。那首先的话呢，我们先要把我们的原来的英文界面变换成中文，我们就来安装我们的简体中文语言包啊，那首先的话呢，我们先用最简单的方式打开，哎，在这个启动窗口里面，对吧？直接点击它， ok， 这样的话呢，我们的 vs 扣的这个编辑器就打开了，那么打开之后的话呢，我们稍等一下哈，他会加载这个界面， ok， 还是非常快的啊，你可以看到他右下角这个地方显示了一个提醒你，哎，要不要更换成我们的中文简体，对吧？如果你要你直接点击安装并重启也可以， 但是我们为了让大家了解我们整体接下来的差距，安装是怎么做的，我们先把它擦掉哈，不要，那这样的话我们来看左边啊，左侧之前我们已经讲到了，这是我们的拓展，那这里面就是我们的一些扩展的一些 插件，有些是第三方的啊，有些是微软官方提供的啊，你看这种的官方提供他就会给你说明，好吧，那比如说你如果说你这里想支持拍摄的开发， ok， 你直接安装拍摄的扩展，他就会支持拍摄呢？呃，代码的高量啊，包括智能提醒等等啊， 相关的功能包括这里面还提供的比较 cc 加加，看到没有哎，只要你想到的变成语言他都有，哎，拍摄呢， sp 啊等等啊，你都可以。好，那么接下来的话呢，我们来看一下啊，如果你要变成中文怎么办呢？这里直接输入 c h i n ese 啊， chinese， 那这时候的话呢，我们就可以直接回车厢啊，你看他有了，对吧？点体重文，好，直接点音道或点这里都行，点击他安装 好了，那么安装完成之后，你看他这里提醒你是否要重启 vs 扣的这个界面，对吧？好了，那么这也是我们最后一次看我们的英文界面了啊， 那么接下来走，你好，我们这个时候的话呢，打开了就是我们的 vs cos 的中文界面了，你可以看到啊，还是熟悉的味道，对吧？ ok， 那么这时候的话呢，你也可以在这里点击新店文件，你看他也可以在这里直接点击新店文件，你然后 ctrl 加 s 保存，哎，你看他是不是就可以保存了？好，这个我们一般情况下也不这么用哈，那这里可以打开文件的，还会添加，包括他也可以给你提供了视频教程等等啊，还是非常贴心的。然后我们把直接关掉啊，不要了。 那首先的话，我们来看一下左侧这个区域哈，说这个区域的话呢，那么我们要想把这个项目哎添加进来，那么怎么怎么做呢？这也是我们接下来要讲到的，教大家如何来使使用我们的 这个 vs 扣的，做一个基本的基础使用哈，那首先第一个的话呢，我们先来调整一下我们的整个的这个过程啊， 第一步，我们最简单的方式就直接点击天天问题家，比如说你已经有项目了，哎，这第一种方式哈，如果你已经有项目了， 那么这个时候的话呢，比如说我打开我的相机，假设我这个里面的话呢，有一个 iq 顶一丢这个项目，对吧？我直接点击添加，哎，那么这个时候他就会帮我把这个项目给我引用进来，看到了吗？哎，添加进来之后的话呢，你看我原来的项目里面的目录机构也，这是我们的链家名称，项目名称，然后这是他的圆码，对吧？这是相关的配置等等啊， 好，不管他，你看不懂也没关系，这就是他的一个目的结构，说白了就是我本地啊，就是我的电脑本地的话呢，这个文件家里面，你看啊，是不是这些文件，对吧？他只是把它展示到这里而已，对不对？相当于用了这个编辑器把它打开了，就这么个意思哈， 好了，那么这是第一种方式啊，我们打开它，我们多点几个哈，你看这是我们里面那些代码，对不对？然后点这个点这个好了，那这个的话呢，这 也是一种我们打开的方式啊，你看，哎，双击一下，你看这个地方打开变音器，什么意思呢？就是说如果你这里正常打开的文件，他会在这个地方显示代表哪些文件是正在打开的文件，正在编辑的文件，明白吗？ 哎，如果你不想要，你可以把它这个地方隐藏掉啊，包括这个大缸，这个大缸什么意思呢？其他就是对应文件里面的一个目的结构， 哎，就相当于我们我的文档里面那个目录结构的啊，目录啊，就就这么个意思啊，其实一般这些都用不太上啊，所以怎么办呢？哎，我们为了保证干净简洁，看着舒服啊，所以我们一般情况下把这两个东西给它勾掉，你看勾掉是不是没了，哎，把它勾掉是不是也没了？哇，这样看起来就很舒服了啊。 好了，这是我们第一种导入项目的最简单的方式啊。那接下来的话呢，我们把它先把它从文件加移除啊，你看他这个移除什么意思呢？并不是把这个文件都删掉了， 其实从编辑器里面把这个东西加载进来，这些文件版的移出掉啊，删除来，你看是不是没了？好，又恢复到原来界面了，对不对？那你下次的话，那有人说，老师我我想的这个地方重新新建一个项目怎么办呢？好像点右键也没用，对吧？ 哎，这里好像也没有什么新建文件夹之类的。是的啊，所以我们一般情况下在企业机里操作怎么做的呢？把它先关掉哈，不是一开始上来就打开它，而是什么呢？比如说我们要创建一个项目，搭建项目的时候，首先我们会对应的盘符里面， 我们的电脑里面，比如说我们新建一个文件夹，对吧？哎，新建文件夹，比如叫爱扣顶这个项目，举个例子哈，来点开他回车， 这时候我们进入这个文件夹里面之后的话呢，要搭建项目需要用 vs 扣的，对不对？然后我们刚刚说了，我们在安装的时候勾选的那个目录上下文对不对？所以这个时候你右键你看打开了，还有通过扣的打 看到吗？这时候就通过 vs 扣子直接打开了啊，点击来试一下走，其实这种方式是我们在企业开发里面经常用到的方式哈。 好了，那么稍等一下啊，稍等一下，他第一次打开的时候可能会有一个加载啊，那么我们来看一下，他会打开两个，你看到了吧？很神奇哈。好，不管他，我们关掉一个吧。这个不要啊，你看这个打开的时候我们把这个关掉，你看他其实已经进到爱扣定这个文明家里了，看到没有 哎，只是这里面啥也没有嘛，对不对？好，那比如说我们现在的话呢，想要在这个地方来建我们整个项目的结构，那怎么办呢？ ok， 比如说这里面你看他是有信念文件加信念文件，是不是就有了？听刚刚都不一样了，对吧？那当然的话呢，这两个东西是因为我们隐藏了哈，你打开他也有，对吧？ 我还是把它隐藏掉啊，告诉大家一下。那接下来的话呢，我们这个地方来新建一个，比如说文件夹叫 src， 对吧？ ok， 这里面放圆满啊，对吧？那再建一个对不对？叫什么呢？比如说我们这里叫一个入口的，嗯，叫，比如说我们叫一个闷 m m m 点结实，闷点结实。比如说我们还想加一点什么呢？ 哎，文件你看，其实这里可以右键哈，建议大家都有右键哈，右键其实使用更方便嘛，习惯性的啊，右键来建一个文件，对吧？然后这里面我们刚刚是建了个什么？建了个文件夹的名字，对吧？这个不对哈，文件夹我们不能用这个名字，好吧，然后把它删掉。 那如果说你要见文件的话呢？你看我们在这个地方，哎，这里可以见一个，到时候闷点见识，对吧？哎，这是个入口文件，对吧？哎，举个例子啊，然后的话呢，比如说你还要讲一点，见点配置文件， 哎，还可以治啊，还可以治什么啊？ aje， 对吧？点 gson， 这个节省看到没有？还挺好的，对吧？好了，那这个不管他啊， 啊，我们先简单的这么来看一下，哎，那这个建好之后建文件，建文件夹，比如这里下面我们还要建啊，建文件夹，比如建个 ma， 对啊，哎，然后在他下面再建一个啊，再建一个，比如说建一个 css， 对吧？你要数学一定要点通这个位置啊，不然的话呢，他就 会建到通下面一级目录去了啊，那这样的话我们再来看右键新建，然后我们建个 gs 的文件夹，对吧？然后我们在这里面建一个文件，比如说叫 englex， 点 h， 听见没有？好了， 是不可以了，哎，然后我们在这里面，比如说我现在代码啊，给个感叹号，他其实这个就是一个 visco 给我们提供的一些快捷的语法，你比如说这个回测，感叹号，回测啊，英文状态下的，那么这个时候他就会给你来个 html 五的一个骨架， 先不用管他什么意思哈，我们先见这么个东西，哎，大概就这么个意思好了，那这里面基本上你看我们刚刚这种方式的话， 记得吗？这怎么弄呢？是在这里先建了一个项目的文件夹，然后这文件夹里面右键，然后使用扣子打开，然后再在我们的 vs 扣的这个编辑器里面来新建我们项目的结构，对不对？这也是我们以后在未来开实际开发里面的话呢，非常常用的一种方式， 当然除了这种方式还有别的吗？哎，有啊有啊，那么今天的话呢，我们再来看一下，比如说我把这个东西还是同样移除掉啊移除掉。 那把它关掉啊关掉。那比如说我们我们正常的话呢？我们打开，我们之前说了我们教给大家一种酷炫的方式打开。怎么打开呢？ 比如说，哎，那这个时候点开他啊，或者你新建了一个文件夹，或者你通过哎黑窗口的命令，比如说我们以后再起来还会用使用 get pass， 有些同学特别喜欢用 get pass， 就是说白了就是类似雷尼克斯的这样的。呃，这个操作命令对吧？命令行，那这样的话呢，我们在这个地方内饰非常常 哈，我们右键直接，你看使用 vs 扣的打开对吧？哎，在这里对吧，这是我们刚刚的形式对不对？好了，那么这个时候打开了，你看他这个文件的话呢，他也把它加了进来了，你看他这个有点问题啊，每次两次对吧？ ok， 好了，没关系啊，把它关掉。哎，关掉，我们把这个也把它移除掉啊移除掉。来啊移除掉移除掉。来走点的空白处啊，一定要点的空白处， 好了，没问题了啊。那接着还有一种方式吗？在这个在我们的文件加的这个导航窗口里面输入 cmd 对吧？ cdm 就输错了，对不对？好，那我们来看 cmd 啊， 来，我们通过这个你看他自动就进到这个爱扣定这个地盘爱扣六问题下来是吧？然后怎么办呢？这里面来个扣定扣的啊，空格点回车，你看这个时候的话就 通过命令行来启动我们的 vs 扣的啊，你看他这个地方的话呢？我不知道为什么这是我一台新的电脑啊，他上面每为什么每次打开两次，对吧？啊，因为我在我自己电脑上的话就打开一次就够了啊，好了，那么这里面的 ok 了啊，没关系，那么这样的话，我们把这关掉，你看就可以直接进行开发了，是吧？非常方便哈， 好了，那么这种方式的话呢，也是非常 ok 的，那么还有一种形式是什么呢？就我们日常操作的话呢，可能有些东西的话呢，会使用这种方式，比如说我打开我们的命令，行啊， cmd， 对吧？哎，然后的话呢，这个时候我会说我在地盘是吧？项目好，我进了地盘， ok， 进来之后的话呢，我们 dir， 然后我们看一下 a 进了哪个目录呢？比如说 cd 是吧？ icoding， 是不是我进了这个文件，或者 icoding e， d， u 进入这个文件讲里面，然后怎么办呢？这个时候就我们直接使用 code 空格点回撤，他以可以把我 我们的项目直接启动起来哈，这个非常方，非常方便哎，看到没有？同学们 ok 了吧？哎，所以接下来我们对于我们的整个基本使用哈，包括怎么去创业项目呀，包括怎么去导入项目呀？哎，一些基本的操作的话，大家就有一个，先有一个这个基础的认知啊， 那么下节课的话呢，我们再来教大家如何来进行使用其他的更多的插件啊，非常有意思，对吧？好了，那么这节课的话呢，我们就先讲到这里。

我晚上在直播的时候，很多人比较喜欢我的 vs code 的配置，那我现在把我的配置分享给你，然后告诉你怎么样获取。那你下载完这个配置之后，这个我的配置项目包括插件会自动帮你进行下载，你可以在我的配置基础之上进行优化。 那我们我需要一个工具啊，把这个配置呢分享给你，那你也需要这个工具，把我的配置下载下来。安装好这个插件之后的话呢，我们调出命令，你可以按 come 的 shift p， 如果你是 windows 的话，按 ctrl shift p， 那调试好之后的话呢，你可以选择下载配置， 再下载配置这块啊，那我把它给缩小一点，看这块，这个下载公共的，你点击它，点击它，那这时候的话呢，会 弹出个窗体，在这块你输入我分享这个 id， 我会把它放到后盾人 vs 扣的这一块，应该在这块大叔的共享配置，你点开这一块的话呢，这块就有这 id， 因为我把我这个初始化了，一会，这个 id 我可能要更新一下， 你呢？复制我更新之后的 id 贴到这里边就可以了，他会自动就是进行下载。如果你之前登录过啊，你登录过，比如说现在我把它给登录上。 好，这个登录之后啊，我这时候呢，这个时候你登录之后啊，你再点击下载配置的时候，他就是从你自己的账号上进行下载， 那么我们可以怎么做呢？我们可以把那个配置啊给他重置一下，重置扩展设置，重置之后的话呢，就把登录状态给清掉了，这个时候的话呢，你再点击下 配置的时候，就又会有这个界面了，那这块你就可以填我的 id 了。那一般情况下，我的建议是你先把我的配置下载下来， 然后呢，在我的配置基础之上进行优化，是吧？比如说我默认时装 vim 插件，你觉得 vim 插件呢？呃，你不想用，你就可以把 vim 插件从这个插件商店里边把它给卸载掉。 然后呢，你这时候可以使用 vs 扣的织带的这种配置项的管理。这个视频录完之后呢，我会重新更新一下这个 id， 到时候你可以使用这个新的 id 来获取我的配置项。欢迎大家晚上八点来到直播间，感谢大家收看，再见！

vs code 非常实用的插件推荐，看看还有哪些插件你还不知道？ live server 安装后，点击最下面的 golife， 一键启动本地服务器，启动后修改代码页面能够实时更新。 open in browser， 一键打开浏览器，可以右键直接点击它，也可以使用快捷键。 alt 加 b partial diff 提供部分文本内容的比较， 先选中要比较的部分，点击右键后选择 select text for compare， 再选中另一个要比较的部分，点击右键后选择 compare text with previous selection， 就可以看到比较的结果了。 code runner 可以一键运行 c， c 加加 java， j， s， p， h， p， python 等等编程语言。 打开代码后，直接点击右上角的运行按钮就可以运行代码。 teddy tree 用来标记代办事项，在代码中添加后，在侧边栏就能看到所有的代办事项， 点击能定位到代码中相应位置，十分实用方便。 polo code 可以快速生成漂亮的代码截图，选中代码 control 加 c， 再 control 加 v， 就能生成截图。

首先我们打开浏览器，然后在地址栏输入 go 的官网， 最后点击下载按钮，正常安装即可。打开后发现是英文界面，我们需要简单设置下， 点击这里的 extensions， 然后输入 language， 点击 install 即可。 最后点击重启按钮就大功告成啦。