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

javascript 也可以用来编写一些小工具,包括但不限于浏览器的插件,浏览器的书签以及进行一些其他操作的小工具等。

这时候就需要进行安装前端相关的测试环境

1. nodejs

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

在 cmd 输入

bash 复制代码
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
javascript 复制代码
var test = "Hello"
console.log(test)
  • html 文件
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配置中

相关推荐
We་ct19 分钟前
LeetCode 173. 二叉搜索树迭代器:BSTIterator类 实现与解析
前端·算法·leetcode·typescript
weixin_3954489125 分钟前
main.c_0222cursor
c语言·前端·算法
无尽的沉默1 小时前
Thymeleaf 表达式
java·开发语言·前端
无尽的沉默1 小时前
Spring Boot 整合 Thymeleaf 模板引擎
java·前端·spring boot
We་ct1 小时前
从输入URL到页面显示的完整技术流程
前端·edge·edge浏览器
先做个垃圾出来………1 小时前
DeepDiff差异语义化特性
服务器·前端
蓝帆傲亦1 小时前
前端常用可视化图表组件大全
前端
CappuccinoRose2 小时前
HTML语法学习文档(九)
前端·学习·架构·html5
NEXT062 小时前
BFC布局
前端·css·面试
菜鸟小芯2 小时前
【GLM-5 陪练式前端新手入门】第四篇:卡片布局 —— 让个人主页内容更有层次
前端·人工智能