• 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
    • 3
    • 4
    • 5
    • 6
    • 7

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

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

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

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

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

  • 相关阅读:
    下载stm32f10x标准外设库
    《沟通的方法》作者序读后感
    因密封件故障导致接头泄漏的原因有哪些
    Mybatis深入：数据源实现原理
    iTunes更新iOS17出现发生未知错误4000的原因和解决方案
    MediaPlayer_Analyze-4-MediaPlayerService
    基于5G边缘网关的储能在线监测方案
    4步教你做一个煤气安全提示神器
    day19-web开发会话技术01
    Banana Pi BPI-R3 Mini 开源路由器，也能拍出艺术美感
  • 原文地址：https://blog.csdn.net/weixin_46713508/article/details/126799772