IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> Windows11下载安装vscode并编写第一个页面 -> 正文阅读

[开发工具]Windows11下载安装vscode并编写第一个页面

前言

最近打算学习前端相关的知识,所谓好马配好鞍,我平常也会写一些前端代码,但是都是通过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/

在这里插入图片描述
或者点击 选择对应的操作系统下载即可
在这里插入图片描述
点击选择目录下载

在这里插入图片描述

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

安装

在这里插入图片描述
双击进行下载,然后按照以下截图进行操作即可

我同意
在这里插入图片描述
选择安装目录
在这里插入图片描述
这个不用管
在这里插入图片描述
最后一个选项必须勾选

在这里插入图片描述
确定安装信息
在这里插入图片描述
按照成功
在这里插入图片描述

第一个项目

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

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

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

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

打开方式1:在工作目录双击打开(不推荐)
在这里插入图片描述

打开方式2:使用vscode打开(推荐)

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

https://blog.csdn.net/weixin_46713508/article/details/126800198

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-09-13 11:38:53  更:2022-09-13 11:39:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 22:24:46-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码