粉丝382获赞1500

我们后面要写正式的商业项目,所以前面那种用浏览器和记事本的编辑方式就不行了,我们要有正式的软件和环境,这一切我主要讲一下 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, 卡上加微就可以复制一行,无需选中。再有一个呢,那我们说了,试图那些放大和缩小是不是卡着加加号可以?放大是图,卡着加减号,放缩小是图就可以了。 那这是我们说了我们刚才讲过的几个哎使用的总结,同学们先把我列的纸条呢来体会完成它。