vscode 之 win11前端环境安装(javascrip、html、nodejs以及插件推荐)

news2025/2/23 12:15:13

javascript 也可以用来编写一些小工具,包括但不限于浏览器的插件,浏览器的书签以及进行一些其他操作的小工具等。
这时候就需要进行安装前端相关的测试环境

1. nodejs

(1)确保电脑存在 nodejs 的环境
在 cmd 输入

npm -v
node -v

查看输出,如果不存在则进行接下来的步骤

(2)在官网下载 nodejs

链接:https://nodejs.org/

点击下载后,一直点击下一步,在安装地址的时候,变成你想要安装的地址,建议是:D盘,将软件统一进行管理

一直下一步,会自动将系统变量添加,就ok啦!!!

如果有问题,就去查看系统变量 path 是否存在 nodejs 的地址!!!!!

  • 成功安装后,输入命令显示如下:
    在这里插入图片描述

2. vscode 安装前端相关的插件

  • 这里我推荐:
    • coderunner(必安装!!)
    • Live Server(点击右下角的“go live”,实时在浏览器浏览)
    • open in browser(右键,在浏览器打开该文件)
    • JavaScript (ES6) code snippets(js最重要的文件啦!!!)

3. 编写demo编程代码

  • hello.js
var test = "Hello"
console.log(test)

在这里插入图片描述

  • html 文件
<!DOCTYPE HTML>
<html>

<body>

  <p>script 标签之前...</p>

  <script>
    alert('Hello, world!');
  </script>

  <p>...script 标签之后</p>

</body>

</html>

4. QA

  • 当vscode 出现 code runner 警告: Code language not supported or defined. 该怎么办??

(1)在 code runner 的setting配置中
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1586145.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DataEase-V1.18版本源码通过Docker镜像部署与静态资源通过阿里云OSS存储实现看这一篇就够了

修改DataEase实现静态资源阿里云OSS存储 后端源码文件读取配置类配置 1.阿里云OSS配置类 /*** ClassName AliyunConfig.java* author shuyixiao* version 1.0.0* Description 阿里云OSS配置* createTime 2024年04月03日 10:03:00*/ Data Configuration public class AliyunC…

Docker端口一直占用问题,docker重置(端口无法释放)(彻底重置docker环境)

文章目录 背景解决方法&#xff1a;彻底重置docker环境1. 停止所有Docker容器2. 删除所有容器3. 删除所有Docker镜像4. 删除所有Docker网络5. 删除所有Docker卷6. 清理Dangling资源7. 停止Docker服务8. 删除Docker数据和配置文件9. 重启Docker服务10. 验证 在这里插入图片描述验…

PostgreSQL入门到实战-第十四弹

PostgreSQL入门到实战 PostgreSQL数据过滤(七)官网地址PostgreSQL概述PostgreSQL中BETWEEN 命令理论PostgreSQL中BETWEEN 命令实战更新计划 PostgreSQL数据过滤(七) BETWEEN运算符允许您检查值是否在值的范围内。 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容…

“桃花庵主”是我国哪位古代名人的称号?2024年4月12日蚂蚁庄园今日答案

原文来源&#xff1a;蚂蚁庄园今日答案 - 词令 蚂蚁庄园是一款爱心公益游戏&#xff0c;用户可以通过喂养小鸡&#xff0c;产生鸡蛋&#xff0c;并通过捐赠鸡蛋参与公益项目。用户每日完成答题就可以领取鸡饲料&#xff0c;使用鸡饲料喂鸡之后&#xff0c;会可以获得鸡蛋&…

2024年腾讯云新用户云服务器价格表

腾讯云作为国内领先的云服务提供商&#xff0c;以其稳定可靠、灵活高效的服务赢得了广大用户的信赖。对于新用户而言&#xff0c;腾讯云提供了丰富的云服务器产品&#xff0c;并且制定了具有竞争力的价格策略&#xff0c;以吸引更多的新用户加入。 首先&#xff0c;我们来看一下…

【C++】STL--stackquene

这一节主要学习stack、quene和priority_quene的使用以及模拟实现&#xff0c;最后介绍了容器适配器。 目录 stack的介绍和使用 stack的介绍 stack的使用 stack的模拟实现 queue的介绍和使用 queue的介绍 queue的使用 queue的模拟实现 priority_queue的介绍和使用 pri…

Spring Boot与Vue联手打造智能化学生选课平台

末尾获取源码作者介绍&#xff1a;大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与…

嵌入式工程师需要掌握哪些技术?

嵌入式系统是当今科技领域中的重要组成部分&#xff0c;它们存在于我们生活的方方面面&#xff0c;从智能手机到汽车控制系统&#xff0c;从家电到医疗设备。因此&#xff0c;对于那些想要进入嵌入式行业的人来说&#xff0c;掌握一些必要的技术能力是至关重要的。在本篇中&…

springboot 反射调用ServiceImpl时报错:java.lang.NullPointerExceptio、,mapper为null【解决方法】

springboot 反射调用ServiceImpl时报错&#xff1a;java.lang.NullPointerException、mapper为null【解决方法】 问题描述问题分析解决方案创建SpringBootBeanUtil编写调用方法 executeMethod调用 总结 问题描述 在使用Spring Boot时&#xff0c;我们希望能够通过反射动态调用…

Win11又来「重大」更新!

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站ai人工智能工具 更多资源欢迎关注 Windows 11预览通道的22635.3420版本迎来了几个比较大的改进&#xff0c;主要有三个方面&#xff1a; …

Springboot 大事务问题的常用优化方案

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1.前言 2.什么是大事务 3.解决办法 3.1.少用Transactional注解 3.2..将查询…

医疗图像分割 | 基于Pyramid-Vision-Transformer算法实现医疗息肉分割

项目应用场景 面向医疗图像息肉分割场景&#xff0c;项目采用 Pytorch Pyramid-Vision-Transformer 深度学习算法来实现。 项目效果 项目细节 > 具体参见项目 README.md (1) 模型架构 (2) 项目依赖&#xff0c;包括 python 3.8、pytorch 1.7.1、torchvision 0.8.2(3) 下载…

【实战】ZLMediaKit问题解决

项目中遇到的问题 1.不带音频的rtsp转rtmp后,出现了音频 1.1判断元素rtsp是否有音频的方法 使用vlc进行访问rtsp流,看如图位置: 音频 -> 音轨 ,是否为灰色,为灰色就是不带音频 1.2 解决方法 在zlmediakit的web页面进行全局配置修改如图, 1.将3和4处修改为 否,再保存, …

网络协议——RSTP(快速生成树)与MSTP(多实例生成树)

一. RSTP 1. STP的不足 1、依靠计时器超时的方式进行收敛导致它的收敛时间需要30到50秒 2、端口状态和端口角色没有细致区分&#xff0c;指导数据转发依靠的不是端口状态而是端口所扮演角色。 3、如果拓扑频繁变化导致用户通信质量差&#xff0c;甚至通信中断&#xf…

MyBatis中的动态SQL的用法

前言&#xff1a;我们要想在Spring Boot环境下使用动态SQL&#xff0c;必须先在application.yml中添加配置 mybatis:mapper-locations: classpath:mapper/**Mapper.xml 并且新建一个xml文件&#xff0c;路径及写法按照配置好的形式写 在新建好的xml文件中复制进去以下代码&a…

Golang——方法

一. 方法定义 Golang方法总是绑定对象的实例&#xff0c;并隐式将实例作为第一实参。 只能为当前包内命名类型定义方法参数receiver可以任意命名。如方法中未曾使用&#xff0c;可省略参数名参数receiver类型可以是T或*T。基类型T不能是接口或指针类型(即多级指针)不支持方法重…

【JAVASE】抽象类和接口及其抽象类和接口的区别

✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;再无B&#xff5e;U&#xff5e;G-CSDN博客 目标&#xff1a; 1. 抽象类 2. 接口 3. Object 类 1. &am…

性能测试--数据库慢 SQL 语句分析

一 慢 SQL 语句的几种常见诱因 1. 无索引或索引失效 ​ 当查询基于一个没有索引的列进行过滤、排序或连接时&#xff0c;数据库可能被迫进行全表扫描&#xff0c;即逐行检查所有数据&#xff0c;导致性能显著下降。 ​ 虽然我们很多时候建立了索引&#xff0c;但在一些特定的…

第3章 存储系统(2)

3.3 主存储器与CPU连接 3.3.1 连接原理 现代计算机的MAR和MDR都在CPU内部。 (1)主存储器通过数据总线,地址总线,控制总线与CPU连接。 (2)数据传输率数据总线宽度*总线频率。 (4)控制总线(读写线)控制读写操作。 3.3.2 主存的扩展 数据总线宽度等于存储字长 1.位扩展法【增加…

【软件测试】个人博客系统测试

个人博客系统测试 一、项目背景1.1 技术背景1.2 功能背景 二、自动化测试2.1 什么是自动化测试2.2 通过使用selenium进行自动化测试的编写&#xff08;Java实现&#xff09;2.3 编写测试用例&#xff0c;执行自动化测试2.3.1 输入用户名:test,密码:123&#xff0c;登录成功2.3.…