Windows11下载安装vscode并编写第一个页面

亦凉 2023-09-27 09:20 114阅读 0赞

## 前言 ##

最近打算学习前端相关的知识，所谓好马配好鞍，我平常也会写一些前端代码，但是都是通过IDEA或Webstorm进行开发，有点驴头不对马尾的感觉，平时看前端同事开发的软件都是使用VsCode，所以我也打算安装一个对他进行学习和了解

## VsCode介绍 ##

VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

在 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。

VS Code提供强大的扩展，版本更新很及时，功能丰富且强大。而且官网提供了丰富的说明文档和视频等支持。安装扩展以添加新语言、主题、调试器并连接到其他服务。 扩展在单独的进程中运行，不会减慢编辑器的速度。

智能感知功能  
VS Code IntelliSense功能由语言服务提供支持。如果语言服务知道可能的完成，则会在您键入时弹出IntelliSense建议。如果继续键入字符，则会过滤成员列表（变量，方法等），以仅包含包含键入字符的成员。按Tab或Enter将插入所选成员。  
VS Code的智能感知提供了非常有用的语法高亮器，同时为变量类型，方法定义和模块引入提供了自动补全功能。而且还可以在设置中（settings.json）自定义IntelliSense。通过键入Ctrl + Space或键入触发器字符在编辑器窗口中触发IntelliSense 。  
VS Code的智能感知提供JavaScript，TypeScript，JSON，HTML，CSS，SCSS等的支持。VS Code支持任何编程语言的基于单词的完成，也可以通过安装语言扩展来配置为具有更丰富的IntelliSense。

断点调试  
代码调试是程序开发中一个必不可少的功能，能够快速帮助我们直观的获取信息。VS Code具有对Node.js运行时的内置调试支持，可以调试JavaScript，TypeScript以及任何其他转换为JavaScript的语言。对于调试其他语言和运行时环境，可以安装Debuggers 扩展或者安装其他调试器来辅助完成。

版本管理  
Visual Studio Code集成了源代码控制，并包含了内置的Git支持。其他源代码控制提供程序可通过VS Code Marketplace上的扩展获得

关键字：免费！漂亮！智能！功能全！好用！易用！

## 下载 ##

官方地址：

> https://code.visualstudio.com/

![在这里插入图片描述][7663a2a0fe0b4677b5ef45072388c809.png]  
或者点击 选择对应的操作系统下载即可  
![在这里插入图片描述][def878551bf543cbbbbb8782331ee2d6.png]  
点击选择目录下载

![在这里插入图片描述][1a93447c315a400d9a5a7b665dae60df.png]

下载到本地之后，就可以进行安装了

## 安装 ##

![在这里插入图片描述][afc9db39b6b344538717aa1e4bf0f336.png]  
双击进行下载，然后按照以下截图进行操作即可

我同意  
![在这里插入图片描述][47433097a37e41719e928a836af9c220.png]  
选择安装目录  
![在这里插入图片描述][8f7f63bc7c5940b59ee449e1eff74d4c.png]  
这个不用管  
![在这里插入图片描述][bfbd34312f384966b29dead527f44b2c.png]  
最后一个选项必须勾选

![在这里插入图片描述][f7f76b425d4f481093ceed93bd9e9689.png]  
确定安装信息  
![在这里插入图片描述][96fdf83301004f7ab282384bfeaca714.png]  
按照成功  
![在这里插入图片描述][aefa964825ba49ad96c830a0f1ae2b54.png]

## 第一个项目 ##

安装好了之后，打开vscode，选择主题和是否需要汉化，我不太习惯汉化所以就没选择汉化  
![在这里插入图片描述][3023c5c902c44a01b5724786c43ec1de.png]  
点击这个可以在下拉框选择更多的主题  
![在这里插入图片描述][3b311fb6a4994121a5e479d34b39af82.png]

选择完主题之后选择下一步  
![在这里插入图片描述][b8e804bc7b2343f7b6b3f5c6e50b88d2.png]  
然后选择本地工作目录  
![在这里插入图片描述][82a34a031b884604bbcd23d7d5a385a4.png]  
选择 File->new File  
![在这里插入图片描述][3ab14253d8694a8eb9c65a52c200716d.png]  
创建一个HTML项目(页面) 然后回车  
![在这里插入图片描述][09b04e5f1443465e9a310d0cfa83582f.png]  
然后发现这个工作目录就有了一个html文件  
![在这里插入图片描述][70b178f5a0234187b6640803ad010268.png]  
然后随便写点代码，记得保存哦，好像不能自动保存，我需要再研究下

<html>
        <head title="我的第一个vscode页面">
        </head>
        <body>
            <p>hello vscode!</p>
        </body>
    </html>

![8dc31bf1028848b4a47027706b928d54.png][]

然后测试代码是否打开网页

打开方式1：在工作目录双击打开（不推荐）  
![在这里插入图片描述][e7efd0fa768442448bf780738dc6a376.png]

打开方式2：使用vscode打开（推荐）

需要按照一个插件，参考我的这篇文章

> https://blog.csdn.net/weixin\_46713508/article/details/126800198

[7663a2a0fe0b4677b5ef45072388c809.png]: https://img-blog.csdnimg.cn/7663a2a0fe0b4677b5ef45072388c809.png
[def878551bf543cbbbbb8782331ee2d6.png]: https://img-blog.csdnimg.cn/def878551bf543cbbbbb8782331ee2d6.png
[1a93447c315a400d9a5a7b665dae60df.png]: https://img-blog.csdnimg.cn/1a93447c315a400d9a5a7b665dae60df.png
[afc9db39b6b344538717aa1e4bf0f336.png]: https://img-blog.csdnimg.cn/afc9db39b6b344538717aa1e4bf0f336.png
[47433097a37e41719e928a836af9c220.png]: https://img-blog.csdnimg.cn/47433097a37e41719e928a836af9c220.png
[8f7f63bc7c5940b59ee449e1eff74d4c.png]: https://img-blog.csdnimg.cn/8f7f63bc7c5940b59ee449e1eff74d4c.png
[bfbd34312f384966b29dead527f44b2c.png]: https://img-blog.csdnimg.cn/bfbd34312f384966b29dead527f44b2c.png
[f7f76b425d4f481093ceed93bd9e9689.png]: https://img-blog.csdnimg.cn/f7f76b425d4f481093ceed93bd9e9689.png
[96fdf83301004f7ab282384bfeaca714.png]: https://img-blog.csdnimg.cn/96fdf83301004f7ab282384bfeaca714.png
[aefa964825ba49ad96c830a0f1ae2b54.png]: https://img-blog.csdnimg.cn/aefa964825ba49ad96c830a0f1ae2b54.png
[3023c5c902c44a01b5724786c43ec1de.png]: https://img-blog.csdnimg.cn/3023c5c902c44a01b5724786c43ec1de.png
[3b311fb6a4994121a5e479d34b39af82.png]: https://img-blog.csdnimg.cn/3b311fb6a4994121a5e479d34b39af82.png
[b8e804bc7b2343f7b6b3f5c6e50b88d2.png]: https://img-blog.csdnimg.cn/b8e804bc7b2343f7b6b3f5c6e50b88d2.png
[82a34a031b884604bbcd23d7d5a385a4.png]: https://img-blog.csdnimg.cn/82a34a031b884604bbcd23d7d5a385a4.png
[3ab14253d8694a8eb9c65a52c200716d.png]: https://img-blog.csdnimg.cn/3ab14253d8694a8eb9c65a52c200716d.png
[09b04e5f1443465e9a310d0cfa83582f.png]: https://img-blog.csdnimg.cn/09b04e5f1443465e9a310d0cfa83582f.png
[70b178f5a0234187b6640803ad010268.png]: https://img-blog.csdnimg.cn/70b178f5a0234187b6640803ad010268.png
[8dc31bf1028848b4a47027706b928d54.png]: https://img-blog.csdnimg.cn/8dc31bf1028848b4a47027706b928d54.png
[e7efd0fa768442448bf780738dc6a376.png]: https://img-blog.csdnimg.cn/e7efd0fa768442448bf780738dc6a376.png