VSCode1.99安装教程

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

下载 vs 扣的建议直接去他的官网下载，就是这个 code， 点 vsue 店的 com， 如果说你去其他的地方下载的话，他的版本不一定最新的，进入他的官网之后，他会给你推荐你的操作系统对应的版本。如果说你要下载其他操作系统的版本呢？你可以点这个留左边这个 stabil 是一个稳定版本， insiders 内侧版本，建议使用 stabilis， 直接点击下载 保重文件。如果你这里下载的速度比较慢，你可以复制他的这个链接，然后打开迅雷，速度还是很快的。 绕上之后呢，直接安装，同意下一步，下一步安装 可运行了。他的默认的语言是英文版的，他会推荐你使用啊中文语言包，如果这里没有推荐的话，你可以点这边的扩张按钮，直接这里搜索。 前列似的，一个是简介中文，第二个是繁体，我们安装，安装完成之后需要瑞萨一下， 这样子就全变成中文的语言界面了。下个视频我们聊一下有些什么好的扩展包可以丰富这个编辑器的。

我们后面要写正式的商业项目，所以前面那种用浏览器和记事本的编辑方式就不行了，我们要有正式的软件和环境，这一切我主要讲一下 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 的疑惑，拜拜。

好，这节课我们继续进入到 vs co 的编辑器的主题选择以及相关设置，包括我们的图标设置。那首先的话呢，第一步我们先打开 vs cod 啊， 那打开的话呢，我们尽量以一个项目为主，比如说我们进到 icodeeu 这个项目里面两种方式，一种是直接右键通过 vsco 打开，另一种方式是什么呢？在这里，哎，他的 这个文件夹的这个导航导航栏里面直接输入 cmd 回车，哎，然后这个地方输入什么呢？输入我们的扣定扣的啊，扣的 code 空格点回车。那这种方式的话呢，我们接下来会在项目里面也反复使用哈，那大家的话呢，这个 慢慢熟悉起来好了，那这里面的话，你看点开之后啊，不知道什么他这个点老是出现两个的吧，没关系啊，那就先关掉一个吧。啊，可能是这个，好，那不管他，那 这样的话呢，我们这里打开了之后，你看他这个地方有是启动时显示换一页，你如果不想显示把它勾掉啊，好了，那这样的话，下一次打开他就不显示了，好吧，好，那么接下来我们来看一下第一个主题设置怎么做呢？在左下角这里编辑啊，然后这里有个颜色主题， 点开你可以看到这里，按住键盘的上下键进行选择，来走，我们看一下啊，好，稍等一下，他会有一个过程啊，看到没有深色，其实这个没什么变化啊，第二个，第三个红色，看到没有变化完，哎，这个是我们的这种 淡淡的这种米黄色哈，然后这个是什么呢？是我们的有点紫色哈边框啊，然后这个的话是我们的默认的浅色， ok， 好，那我们再往下走啊，这下面的话呢，这个是默认的深蓝色，对吧？然后，呃，这个是我们的，哎呦，这个有点土豪金的感觉了哈，咖啡色，对吧？然后这个是我们的， 你看是不是这都是官方给我们提供默认的哈，那当然的话呢，如果说你不想用，对吧？你比如说你浏览其他主题，对吧？他这里也会给你加载一些线上啊，搜索一些设置佛，哎，我们的这，对吧，给我们找一些我们其他的一些皮肤啊， 其实很多啊，你下面的啊，这里给你提供了很多，你也可以选啊，就根据个人喜好了。好吧，你喜欢什么样的颜色，你就选了什么， 这个没有什么说一定要怎么样哈。好，那么我推荐大家的话呢，刚开始因为对眼睛好啊，浅色的啊，你用你看久了你就会发现啊，其实浅色的还是比较舒服的吧，所以我们学习的时候，我们建议大家选择这个浅色默认就可以了。 好了，那这里有了之后，那么接下来这个简单的这个，呃，主题设置完成之后，那么接下来还有一个很有意思的哈，就是什么呢？就是我们的 这个，呃，有一个显示图标，你可以看到这个图标其实挺丑的，因为他相当于没给你设置。好吧，他是默认就这个样子哈， 这个不好看，对不对？那我们想改个非常破费的好看的怎么办呢？ ok， 那这里还是一样的啊，点开他，哎，点这个左边这个齿轮这个管理，然后这里面有一个文件图标主题，然后这里面你看他是默认的嘛，对不对？安装其他，对吧？其他文件主题哈， 好，你点开啊，点他，你看看他这里默认第一个排到第一的，对吧？点他，当然你也可以在这个窗口里面啊，直接输入 suv 也可以，也可以找到，对吧？那这种方式的话呢，其实，嗯 是更加贴合，因为你第一次你不知道的时候，你怎么办呢？对吧？所以我就给大家直接通过这个地方啊，直接点击，你看这个地方有一个文件图标主题，点开它，对吧？这里直接点击安装其他， 好，那么这里头我们默认第一个啊，我也推荐大家用这个啊，其他的你也可以试一试，对吧？反正安装完了之后他也不要钱，对吧？都免费的，然后这个你你不想要了，把它卸载就完了啊，非常简单，点击安装走好，正在安装，对不对啊？这个就是非常非常的这个 简单的操作哈。啊，你看他这里还可以禁用，看到没有，你不想要了，你禁用掉，卸掉，你看这里面有了，对吧？选择我们点一下他啊，点他，好， 那这个时候的话呢，我们回个头来看一下啊。哇，你看变了吗？是不是？哎，非常好看啊，你看变完之后的话，他每一个文件他都不一样了，对吧？你看这是不是可以让我们保持一个很好的心情，对吧？开发代码 这个携带码的时候感觉心情都好很多，对吧？看起来很舒服啊。好了，那么这个是我们的主题图标啊，当然这里面你觉得不满意怎么办呢？还是 进来啊，文件图标库，然后这里可以选择其他的，对吧？哎，这个你看他默认就很丑了是不是？ 当然你可以在我们的这个库里面选择，这是他原来默认的，对吧？好了，那么这个就看自己了啊，你要可以选择其他的，我推荐大家使用这个，你们也可以对比对比好不好？好了，那么这节课的话呢，我们先给大家把我们的浏览器的主题风格，哎，就我们 vs co 的主题风格，包括我们的 这个文件图标啊，我们把这两个啊让大家的话了解一下啊，那么先把这两个安装好了，那么接下来我们继续来给大家介绍其他的插件。

把这个插件首先安装一下，你安的是 style， 他 这个就配置一下就行了。设置一下，这个设置一下。配置一下就行了。能听到吗？ 可以，你的电脑好卡死掉。这个意思就是说只能保存在跟目录的插件，所以说我们最好是新建一个项目，每天就是一个新的项目，他是以项目文件夹来的， 它相当于会翻译到你的整体的这个 cs 文件去，就比如说你当前这个项目是 h 五，对不对？然后会编到这样形成一个 cs 文件夹。 对，就类似于这样，但是可能会有重复，我们就改成叫 cs。 好 吧，但是这个名字可能会重复掉。你本来这个就是 cs 的 产物对不对？ 对，他编辑的卡是这样的。对，只能是根目录， cs 就 这样编辑的，这就是一个文件。对，我请就卡住了，断开了，重连一下。这个向日葵是断开了吗？验证码重新输给那边面了， 网络不稳定。八四 snl 七都是小小，不用练，直接复制就行，这样效率太低了。 一个图点进去就行，现在。对啊，但是我右下角看不到。现在还卡吗？我再试一下，你看窗口多危险。点不动了，我退一些进去。这个地方没打开，一直就是 v s two 的 卡住的。 老师你直接说我自己在间断上动，说可以就好了，主要操作现在可以点了。对，好，行， 就点这个按钮。点。对，哎，点它可以了，点它给我保存了都不会， 你看这下面就有了。 s s 没有吗？你要保存一下。对，比如说保存还有 s a s s 文件应该也是一样的，配置了之后就对这里你现在要啥，你现在就，你跟我们因为插电开多了太卡了， 还有我们后面基本上就不用这些插件，明白没有？我们不会用这些插件，这些插件都我们职业工程化之后，我们直接用代码去变异了，就不会用这些插件也是代码写的，因为我们会有内置的工具 要估计工具里面有自带的，就不用这些插件了，因为这些插件它有一些，它要消耗资源，太慢了。对，可以就行，我建议就用一段你的应该，反正你就用一种，你要么用啥子，要么用 style， 我 建议你先按照课程里面就是用 style 是 吧？对对对， 后面这个萨斯，萨斯应该也是给大家配一下的，萨斯这个里面也掉了，下面这个安装了一下。我安装的是下面这个 hero， hero 图标，这个图标没用的，又不是实时翻译的， 只是也可以。那就安一个，不要全部都用这个就卸了，对不对？就安一个你，不然你这个窗口到会又又荡街了。你看多了重复的东西， 我们就按一个，对他的目的其实都是差不多的。这一个我们安装的看一下，安装它之后下面应该也会出现一个按钮，点到一个设置文件，它会有一个按钮，它这个按钮点了之后它就会变异，当我们一般也会做一些配置， 这个配置我就直接推荐给你们搜了，这一个是搞错了吗？这应该是一个 达到这个边可以不火这一部分，这个差别，上面就这个片套紧凑了，我们就随便编，之后一点 space， 我 们就用 js 保持一样，又返回到上一级目录，当前目录的上一级 space 又和这个保存一样，对不对？ 这个好像是支持相对路径。是可以，我们来试一下。比如说创建一个新的不要文件夹了，就错了，随便打 s 不 一样的，我们就复制一下，边写一点的。好，现在肯定没效果，我们把它点开对不对？ 点开它会自动给你，应该过去了，对不对？自动。对对对，看到了那就会过去。但是我们如果改一下，比如说改成锐的，我们去看一下它这个 c c c 对 就可以了。 好，谢谢老师。不用你把它关了啊，没其他这个工具的使用。没有老师在用，就聊到这个地方。

哈喽，大家好，我是前端胖哥，那么今天呢，我们给大家介绍一下啊，我们前端开发所需要的工具， 呃，在这里啊，我推荐大家使用这一款啊， vs 扣的，那么只需要在百度里面搜索 vs 扣的，然后第一个就是他的一个官方网站，那我们点击打开这个官方网站啊， 那么就可以看到这样的一个界面啊，那么你看这里有个登录的啊，这里也有登录的，对吧？如果你是苹果电脑的话，那你就直接点击他就可以下载，如果是 windows 电的话，那你点开这个下向下箭头，那么可以根据你的电脑在这里选择 windows， 对吧？系统， 那么当我们下载啊，就是我刚才，我刚才在这里啊，已经下载一个，下载一个，我们只需要对他进行解压啊，解压，其实在我们苹果电脑上安装这个 软件是非常非常的方便，非常方便，方便啊，就是好多小伙伴们说那个开发买什么电脑，这就是我告诉大家最可啊，如果 这个经济允许的话，最好买苹果，因为他这个装软件也是非常方便，你看这样我们这个 vip 的其实已经安装好了，我们只需要进行对答，双击打开，双击打开， 因为这是第一次安装，第一次安装他是有一个交验过程，对，在这里全全部打开 啊，这现在啊，这个界面呈现的，这就是我们这个 vsco 的啊，呃，这是他的一个最新的一个版本，因为这是刚才下的最新版的一个版本，说明我把它关掉，然后我们看一下在这个里边啊，这因为这是我之前电脑有安过， 所以他直接就是啊，就是画穿画板，那么我给你看一下这左边这一侧啊，最后一个，最后一个他是应用市场，就是插件的应用市场，我们其实在这里只需要搜索拆啊，只需要搜索拆腻， 我看这里，刚才，刚才这里已经有提示，对， china， 那么第一个其实我们只需要把这个，你安装这个插件，听见没？安装这个插件，那么你这个编辑器啊，就是一个中文版的，中文版的啊 china， 大家记得啊， 默认其实下载下来他是一个英文版的，英文版的，那你安装那个以后啊，他就是中文版，那么上面这个是啥呢？上面这个其实就是我们的一个文件管理，上面这个安装文件管理，那么我们下了这个软件以后要怎么做呢？首先你看，比如说我们在这个 面上我们建立一个文件夹，对吧？建立一个文件夹，呆萌，呆萌，然后呢我们呀在这个里边选择文件夹，选择这个呆萌去给它打开，打开， 那么此时我们刚才建的那个文件夹就在这个变音器里面已经打开了，打开了。那么我们对于一个前端开发，我们基本上要创建一个项目，他肯定是在一个文件夹里面，对吧？我们前端基本上都会用到这么几个。第一个是啊， css， 对吧？我们在这个文件夹底下再建一个 css， 你看这是一个文件夹，他前面有箭头，这只能点开，这是文件夹，那么我们再选中 css， 然后再看这个左边这个是新建文件，那么在这个 css 底下建一个 style， 一个文件，这是将来我们前面写亮程序的地方啊，这个文件是写亮程序的地方，我们点这个箭头合起来，然后我们在空白处再点一下，空白处点一下，其实就选择呆萌， 然后在他底下再创建一个文件夹，是 gs， 对吧？因为我们前边啊，还有一枚是扎奥斯科普，对吧？那么我们有可能一个项目里面有好多扎奥斯科文件，所以我们建一个文件夹， 然后再加入思维，选中他，然后在他里边，比如说我们再起个这个什么这个呆萌，是吧？点 gs 这个文件，对，这是我们的 gs， 在这个 gs， 那么我们呀在这个空白圈再点一下。我们一个项目，也比如说文艺有一个啊， html 页面， html 英文，这个文件叫什么？英代词点 html， 大家看啊，如果是 atm 二的话，这个文件的后缀 css 最文件的后背就是 cst 的，后续就是 gx， 那么大家一定都是这样，那么点英文单词以及单元宝，这些都是 名称，大家一定记得在这个初学阶段，学习阶段，这个文件名创一定要写成英文的字母，你哪怕千金字母，千万不能写中文的。 那我们在这里借的这个英单个点是 tml， 这个文件呢，就是我们将来写，呃，写这个页面结构的啊，就是我们要学习的那个那个年， atm 那个年啊，在这个文件里面去写 css， 是在刚才这个 cl 点 css 文件里面去选，对吧？那我们在这里我先给大家简单的演示一下啊，那这个编辑器很智能，他有提示，那我们选择啊， htv 猫和五一车，那么他就会给我们生成一个 简单的一个页面的结构，页面结构，比如说我们现在里面随便写一个啊，写一个那个，写一个 diy， 对吧？写个 diy， 然后我们我们就可以得到这么一个 diy， 对吧？得到这么个 diy， 然后呢？我为了在这给大家演示啊，我在我在写啊，我在写个，写个样式吧，我在写个样式，我给我这个 diy 啊，给这个 diy 设置个宽高 啊，宽高各一百 px 啊，妈给这个指的是他的一个啊，一个位，把他的位置调整一下啊，位置调整一下 是吧？你看我设置宽高，这个估计他在页面上还是看不到的，所以我们在这给他在设置一个什么，再给他设置一个背景颜色，背景颜色比如说我们是红色的，对吧？ 现在你看我们就啊，就是我简单的在这给大家写个演示的一个文案啊，我在这写一个结合代码，对于我们新手来说啊，学习这个编程啊， 第一个程序就是什么哈罗沃的，听见没？哈罗沃的啊，所以大家一定得啊，记着我们先写这么一个东西，然后呢？ 呃，奥迪，我在这里还给大家说一下，你们还得安装一个，安装一个什么？安装一个插件，就是记着在这最后一个里面安装起来， 安装一个插片，叫欧喷英 boss， 那么他是干什么的啊？我这已经安装了，对，我这已经安装的，如果没安装的话，这里应该是因死掉，你们点直接安装就 ok 了，那么安装好以后这个插件呢？你就在这个应带子点 htv 这个文件上面鼠标右键，那么你看点击这一个， 他就直接会把你刚才写的页面在这个浏览器里面打开，浏览器里面打开啊，这就是我们刚才写的这个啊，一个 diy 以及他的样式在浏览器里面， 那这是我们这个全能写代码这个编辑器啊，大概我就给大家介绍这个样子，你知道这些你就可以在这里去写代码。 那么还有一个就是我要给大家说的，是啊，我们这个前端开发，最好你给你的电脑安装一款，安装一个什么？安装一个可用浏览器，听见没？可用浏览器就是这个浏览器啊，那么对于苹果的话，你直接去应用市场下载对吧？ 哎， windows 话你直接在百度里面搜索就可以下载我这里面，其实我现在这个浏览器就是可用浏览器，对吧？我相信浏览器大家都应该会下载啊，所以我就不说了，为什么要可用浏览器呢？哎，你， 你看这是我们刚才啊对写的代码进行的运行效果，对吧？那么有可能说，哎呀，我这个代码到底写的对不对？我这个样式是不是有问题， 那我们就要去调试对不对？看我写出这个效果啊，这个代码跟我这个效果是不是匹配，是不是哪里有问题啊？比如说，比如说我觉得新手啊其实很容易犯一个错误，比如说他在写这个克拉斯的时候， 他是多了一个 s， 多了 s 导致你看这个页面一刷新，哦，他的样式没有了，他又让你说，哎呀，我写了半天，我写了这个，写了这个样式，为什么在浏览器里面，哎，我写着红色啊啊，宽高为什么不显示呢？这到底是哪里问题呢？ 你看你这个时候你就不知道该怎么找，那么你有如果有这个可乐浏览器的话，你看鼠标在这个网页上，在你写的这个鼠标右键点击查找，点击 查找啊，你这个浏览器底下就弹出这么个窗户啊，这么窗户看第一个是艾力美磁，艾力美磁是什么？他就是边缘的结构，边缘的结构，你看这个艾力美磁顶边，你看 有没有发现这是不是你刚才，你看这一块内容跟你刚才第一次里面写的代码是不是一模一样的，对不对？也就说他是你的页面的 a t m l 啊 的东西，哎，其他的我就先暂时不介绍，你先主要记住这个，那你看刚才你发现，哎我们写的这个哎，他这个样式没声效，这你要找问题，所以你看点击这里的这个小小的这个 箭头，点击小箭头，然后移到啊我们刚写的这个 helloword 上面，你看他底下是不是就自动给你定位到这个 diy 上面？对，自动定位这个 diy 上面，你自动定位这个 diy 上面。有可能因为你们刚开始写可能还不太 熟悉啊，不知道克拉斯这个到底啥问题，哎，你看鼠标再放在他上面后，你发现，哎，这个右侧，右侧他出现了一个啊样式的区域，也就这边左侧是 atm 结构，右侧呢就对应的是你如果点哪个，比如说点他，那么右侧就对应了他的样式， 但你发现这里只有个 d i y dj blok， 但是没有我们刚才写那个 no 点到我这个样式，那这个样式在哪里呢？那说明我们现在写写的这个样式不成效果， 样式不升降，我觉得最直接的一个原因有可能就是你的啊，这个 clus 名字写错了，或者说你这个 clus 值是写写错了，跟你这里不匹配，对吧？那你发现哦，原来通过那一讲呢，发现，哦，原来多了一个 s， 对吧？你看确定那 s 你再刷新哦，生效了，对不对？再再这样，你看你上去 啊，这个，这个 diy， 对对，你发现哦，这边是不是有钥匙？对啊，这是一方面，就是你会很快的去定位错误，还有一个就是你看，比如说 你在调试的时候啊，你想让你这个元素往下移一点，但是你不在代码里面，你不知道到底要移多少，对吧？那你可以在这你看鼠标啊，选中他，选中这个五十 px， 这这这个东西，你看他现在是不是变成可数状态，是吧？一方面你是可以在这手动去修改， 你看我把它改成二百，对吧？另一方面呢，我，我比如说我给你放这个吧，宽宽度，我想宽度点，你看我鼠标在他一点，他就变成蓝色的一个啊，可可输入状态，其实也可以，输入也可以，你看按 键盘上的向上向上按向上按键，他就会让他增加，你看限速片一百多，一百多，是吧？啊？按 像比如说我给他，我给他，我也可以让他增加，对，这是你在这个看浏览器里边边看着，再这样去调试代码的一个非常便利的方式，听见没？或者你也可以把他看，把他干掉，把他干掉，这样去检查。你这个啊，样式是调试一个样式， 再给大家介绍最底下这块去啊，最底下你大家可以看到这是一个盒子，外面再套盒套盒子啊，其实这是你们将来要学的一个合模型，合模型听见没？ 最里边的内容是内容区域，在外是他的一个内边距，再是一个边框，最外是外边区啊，这是你们将来学核模型的时候一定可能会用到的东西， 哎，所以说这是我今天啊就给大家呃简单的先介绍到这里，首先呢对于我们新手来说，先去啊呃浏览器里面搜 vs 库的安装下载，这安装这么一个 vs 库的编辑器啊，按照我刚才这样的一个呃创建文件夹以及创建文件的方式，在这里面去创建 htm， css 以及 gs 等文件，对吧？然后去编写你属于你自己的第一行代码，对吧？ 然后有了这个编辑器你就可以利用啊，就是我们啊给大家一直在那个直播间说的是菜啊，你在这个百度里面搜索菜鸟教程，对吧？菜鸟教程，那么这个菜鸟教程网站里面啊，他是有 attm h 五啊， css 以及 css 三，对吧？那你就先看 atm， 你看 atm 里面，你看他就我们刚才这个网页的最基本的结构，他有各种标签，对不对？他有各种介绍，那么就一个一个的挨着在这个流编辑器里面去敲去敲，当我们写完了 后啊，记得在这文件上面鼠标右键点他，然后就在浏览器里面直接打开了我们刚才写的这个， 写的这个页面，对吧写的这个页面，然后就这样再就以这种方式啊，小箭头点到他上面选择，然后再去对应样式，再去这样去调试检查问题，听见没？好，那么今天的这个分享我们就展示到这里啊，大家有什么问题呢？晚上九点直播间见啊，拜拜。

大家好，今天教大家如何去下载安装和使用 windows studio， 这也是咱们大一新生学习 c 语言或 c 加加的一个必备软件。首先的话咱们在这个搜索栏里面输入 windows studio， 然后就会得到这样一个 windows studio 的 网站，注意下这里显示 windows studio 不是 windows studio code， 咱们要选择这个第一个网站，点击进入这个网站，再选择下载， 咱们只要选择这个社区版就可以，这完全够咱们大一新生去学习 c 语言了。接下来咱们点击一下这个免费下载，接下来的话是不看这个右上角这里就会出现这个下载的提示。 这个下载过程还是比较长的，咱们稍微等待一下 viz studio 已经下载完成了，接下来咱们只需要去双击安装一下 viz studio， 然后这个点击试 点击继续。这就是进入这个安装过程了，因为我之前已经安装过了，所以他这个安装速度还是比较快的，如果你们是第一次安装的话，这个等待时间还是稍微比较长的， 咱们接下来继续等待一下，让他完成一些必要的更新。现在更新完成，咱们点击可用，然后选择第一个社区版本，然后点击安装，咱们去安装一些必要的，呃，主键就可以，然后选择这个啊，使用 c 加加的桌面开发， 接下来咱们就可以使用它来进行 c 语言或者 c 加加的学习，然后选中这个以后，这里还要注意下，它默认是安装到 c 盘里面，这里咱们可以更改一下， 比如说安装到其他盘里面，比如说我的地盘比较大一些，那我就安装到地盘里面， 然后他前面的这些路径咱们可以修改一下，然后给他安装到 d 盘，然后这个缓冲你们可以安装的，也可以安装到 d 盘或者 c 盘里面。接下来咱们直接点击安装就可以，主键安装完成以后， 咱们点击启动，选择第一个，如果无法登录成功的话，咱们选择关闭就可以再继续点击一下这个 继续，这里可以选择你的颜色主题，我就选择一个浅色的启动是 windows studio， 咱们的 windows studio 就 已经启动了，看这里咱们点击下文件新建一个项目，咱们只需要选择这个空文件， 然后点击下一步，然后这就是这个项目的位置，他默认是 c 盘里面，咱们也可以去修改一下他的位置，比如说从这个 c 盘给他修改到这个 d 盘里面，他的存储的 项目的地前面的路径咱们也可以修改一下，比如说咱们就给它放在 d 盘这个文件夹里面，然后继续点击创建，现在就创建好了。如果你要 写一个比如说 c 加加项目的话，咱们需要在这个点击原文件，然后右键添加新建项。如果 c 加加啊项目的话，后面应该是用的这个 c p p 结尾，如果是 啊 c 语言的话，咱们就直接选 c， 我 先拿这个 c 加加举例子，然后后面的结尾是 c p p， 然后添加就可以。如何调这个大小？如果字体过小，咱们可以按住 ctrl 键， 然后滑动这个鼠标的滚轮往前的话，是不是这个字体会逐渐变大，现在话调整到一个合适的大小。接下来咱们写一个 c c 加加项目，咱们首先要写一个头文件， 然后写上这个 include， 然后再写一个输入流，这里是 usual， usual name， usual name space。 按这个 table 键，这里要写一个麦函数，输入一下，这里 有一个括号，这个括号咱们要用这个英文的格式，咱们输出 c 加加，话用这个 cut， 这里写一个 hello world， return 零后，后面要有个分号，它前面这里 也是需要一个分号。如果你想调整格式，咱们可以按一下 ctrl k， 然后再按一下 ctrl d， 如果它这个格式这里出现，如果是对不起，你可以按一下 ctrl k， 再按一下 ctrl d， 是 不是它的这个格式会自动调整？现在是 c 加加，咱们运行一下，是不是它在控制台这里输出了 hello world， 咱们这就用 windows 丢丢完成了一个 c 加加的项目。如果是写 c 语言，咱们就可以再重新新建一个项目，点击这个文件，新建新建项目，选择这个空文件，点击下一步， 再继续点击这个创建，咱们就可以在这个原文件这里右键添加新建。像如果 c 语言，咱们后面将这个 p p 去掉，点击添加。接下来咱们就写一下这个 c 语言， 继续咱们要写一个头文件，写这个 include， 继续写上咱们的 main， 这里一个分号， 这里要注意一下。如果是 c 语言，咱们是不是要写一个 print 括号后面一定要写一个分号， 这里再写一个 hello world。 接下来咱们去运行一下 c 语言，是不是这里成功地说出了 hello world？ 这就是 c 加加和 c 语言的啊，不同的写。呃写法， 咱们平时在学习时候要注意一下，如果是 c 加加，注意一下，它的后缀是点儿 c p p。 如果 c 圆的话，它的后缀是点儿 c。 感谢同学们的观看。