【配置环境】VS Code中JavaScript环境搭建

一,环境

  • Windows 11 家庭中文版,64 位操作系统, 基于 x64 的处理器
  • VS Code 版本: 1.83.1 (user setup)
  • Node.js 版本:20.9.0

二,为什么搭建JavaScript环境

  1. 因为在看《重构改善既有代码的设计第2版》的时候,书中的代码展示范例都是基于JavaScript的,我也从未涉及过JavaScript这门编程语言。为了让理论与实践并进,必须从零开始学一下JavaScript基本语法,因为书中范例要求极少使用JavaScript任何复杂的特性,所以我只要对该编程语言有粗浅的了解就行,毕竟我是学C++的。
  2. 首当其冲便是先配置好JavaScript的运行环境,为学习JavaScript的基本语法创造前提条件,然后循序渐进学习《重构改善既有代码的设计第2版》,因为这本书对IT从业者来说很重要!!!

二,配置步骤

  • 在 Visual Studio Code (VS Code) 中配置 JavaScript 运行环境通常涉及安装 Node.js,以便在编辑器中运行 JavaScript 代码。

以下是详细的步骤:

  1. 打开浏览器,前往 Node.js 官方网站:https://nodejs.org/
  2. 这会看到两个版本:LTS(Long Term Support)版本和当前版本。LTS 版本通常是最稳定和推荐的版本。选择LTS版本并点击下载
  3. 然后根据操作系统选择下载相应的安装程序:
    1. 对于 Windows,可以选择 ".msi" 安装程序
    2. 对于 macOS,可以选择 ".pkg" 安装程序。
    3. 对于 Linux,可以选择合适的包管理器或二进制文件。
  4. 下载完成后,运行安装程序并按照安装向导的步骤完成安装,安装完成后会自动配置好Node.js的环境变量,非常简单。
  5. 打开命令行工具,输入:node --version 或者 node -v 命令,验证 Node.js 是否成功安装(输出 Node.js 的版本号)。
  6. 打开 VS Code,安装如下两个插件,提高学习效率(Live Server是一个轻量级的web服务器,Code Runner用于一键运行JavaScript代码)。
  7. 创建一个用于保存 JavaScript 工程的文件夹或打开一个已存在的文件夹(D:\Files\IT_Data\VsCode_Project\JavaScript_Project)。
  8. 然后新建一个 index.html 文件,打开该文件输入感叹号(!)并按回车键,会自动生成如下内容。
  9. 上图中的这些HTML代码内容并不是学习的主题,所以不用在乎这些细节,但是要使用这些HTML代码作为JavaScript代码的容器,以帮助我去学习JavaScript这门编程语言,进而理解《重构改善既有代码的设计第2版》书中的代码展示范例。
  10. <body></body> 标签里输入 <h1>Hello JavaScript</h1> 内容,然后右键index.html文件点击 Open with Live Server 选项,这会在默认浏览器中加载当前文件,显示如下页面。
  11. 这也就说明环境配置基本成功了,然后在当前文件夹下新建一个 index.js 文件,并输入console.log('Hello JavaScript'); 内容,开始入坑JavaScript。
  12. 回到 index.html 文件,在 <body></body> 标签里输入 <script src="index.js"></script> 内容,这会让浏览器加载 index.js 文件中的JavaScript代码。然后回到浏览器中,按 F12 键选择控制台,会输出 Hello JavaScript 内容。
  13. 又或者右键index.js文件点击 Run Code 选项,然后会在VS Code中打开终端窗口并同样输出 Hello JavaScript 内容。
  14. 至此,VS Code搭建JavaScript环境大功告成,接下来开始入坑JavaScript语言了!!!

  • 15
    点赞
  • 80
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Visual Studio CodeVS Code)是一款轻量级、免费且强大的代码编辑器,适用于各种编程语言和开发环境。Vue.js是由Evan You开发的一套用于构建用户界面的渐进式JavaScript框架。那么如何在VS Code搭建Vue环境呢? 首先,我们需要在VS Code安装Vue相关的插件。Vue相关的插件包括Vue.js、Vetur、Vue Peek、Vue Snippets等。这些插件可以提供Vue开发所需的语法高亮、代码提示、语法检测等功能。 其次,我们需要在项目引入Vue.js。可以通过CDN引入Vue.js,也可以通过npm安装Vue.js。对于大型项目,建议使用npm安装,并在项目目录下初始化一个Vue项目。 然后,我们可以在VS Code创建Vue项目文件夹,并在终端使用Vue CLI(命令行工具)来创建一个新的Vue项目。在项目创建完成后,我们可以在VS Code打开项目文件夹,并编辑Vue组件、路由、状态管理等文件。 在编辑Vue文件时,VS Code提供了Vue语法高亮、代码智能提示和错误检测等功能,使开发过程更加高效。同时,VS Code还支持使用ESLint等工具对代码进行格式化和检查,提高代码质量。 除了基本的代码编辑功能外,VS Code还提供了强大的插件生态系统,可以根据个人需求选择安装并配置各类插件,如Git、调试工具、自动化工具等,对Vue项目进行完善的开发环境配置。 总之,通过安装相关插件、引入Vue.js、创建Vue项目、配置开发环境等步骤,我们可以在VS Code打造一个便捷高效的Vue开发环境。通过充分利用VS Code的功能和插件,我们可以更加舒适地进行Vue开发,并提高开发效率和代码质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拉伊卜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值