VScode中配置JavaScript编译环境的方法

 更新时间:2022年08月26日 15:31:44   作者:彤彤的小跟班  
这篇文章主要介绍了VSCODE中配置JavaScript编译环境的方法,方式一 使用Node.js做为解释器运行JS代码 Node.js的安装和配置,方式二使用VSCODE插件Code Runner运行JS代码,本文给大家介绍的非常详细,需要的朋友可以参考下

01. 起因

由于不是经常写前端JS代码,不想单独安装一个IDE,如WebStorm等,就在VSCODE中配置一个可以运行JS代码的环境吧!

这样使用VSCode即可以写前端代码,也可以写C++代码,还可以写Python代码,真不错!!!

02. 下载安装VSCODE

下载地址:https://code.visualstudio.com/

至于安装就不啰嗦了,根据提示安装即可

03. 方式一:使用Node.js做为解释器运行JS代码

Node.js的安装和配置

Node.js的下载:

Node.js官网下载地址:https://nodejs.org/en/download/

通过上面的链接下载Node.js无脑安装:除了需要修改安装路径,其他都是下一步,环境变量也会自动配置

测试nodejs是否安装成功:

cmd下输入:node -v,查看是否能够正常打印出版本号cmd下输入:npm -v,查看是否能够正常打印出版本号注:安装node之后会自带npm

配置Node.js:需要配置两个地方

通过npm安装的包的存储位置(路径):配置文件中的 nodejs prefixnode缓存位置(路径):配置文件中的 cache(缓存)路径

nodejs安装好之后,通过npm下载全局模块默认安装到:C:\Users\username\AppData\Roaming\npm下,一般我们不想把东西存到C盘里面的,我们进行如下设置,把通过npm安装的文件依赖全部都放到我们自己想放的地方,便于管理

1、在nodejs安装路径下,新建node_global和node_cache两个文件夹

2、设置node_global和node_cache

设置缓存文件夹

npm config set cache "E:\NodeJs\node_cache"

设置通过npm安装的包的存放路径

npm config set prefix "E:\NodeJs\node_global"

注意:设置成功后,之后用命令npm install XXX -g(全局安装),安装以后模块就在E:\NodeJs\node_global

更多关于Node.js的配置参考这篇博文:https://blog.csdn.net/weixin_45583303/article/details/111354653

在VSCODE中配置Node.js

建立一个文件夹(如:demo),在文件夹中建立一个js文件(如demo.js),使用VSCODE打开该文件夹,然后按下图操作:

编写好JS文件之后,按F5就能直接在控制台查看运行结果了

04. 方式二:使用VSCODE插件Code Runner运行JS代码

安装插件

打开VSCODE:

使用

安装了 Code Runer之后,重启VSCODE,选中要运行的JS文件右键选择 Run Code 运行代码,就可以在控制台查看运行结果了。

到此这篇关于VSCODE中配置JavaScript编译环境的文章就介绍到这了,更多相关vscode 配置js编译环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈JS数组内置遍历方法有哪些和区别

    浅谈JS数组内置遍历方法有哪些和区别

    本文主要介绍了浅谈JS数组内置遍历方法有哪些和区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 详解JavaScript对象序列化

    详解JavaScript对象序列化

    这篇文章主要为大家介绍了JavaScript对象序列化的相关资料,需要的朋友可以参考下
    2016-01-01
  • JS递归遍历对象获得Value值方法技巧

    JS递归遍历对象获得Value值方法技巧

    这篇文章主要介绍了JS递归遍历对象获得Value值方法技巧的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 微信小程序实现上传图片的功能

    微信小程序实现上传图片的功能

    这篇文章主要为大家详细介绍了微信小程序实现上传图片的功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 浅谈webpack 自动刷新与解析

    浅谈webpack 自动刷新与解析

    这篇文章主要介绍了浅谈webpack 自动刷新与解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JavaScript获取多个数组的交集简单实例

    JavaScript获取多个数组的交集简单实例

    这篇文章介绍了JavaScript获取多个数组的交集简单实例,有需要的朋友可以参考一下
    2013-11-11
  • 小程序ios音频播放没声音问题的解决

    小程序ios音频播放没声音问题的解决

    这篇文章主要介绍了小程序ios音频播放没声音问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 基于JavaScript Array数组方法(新手必看篇)

    基于JavaScript Array数组方法(新手必看篇)

    下面小编就为大家带来一篇基于JavaScript Array数组方法(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript数组的随机排序方法详解

    JavaScript数组的随机排序方法详解

    在前端开发中,我们经常需要对数组进行随机排序,例如在游戏、抽奖、数据随机展示等场景中,JavaScript 提供了多种方式来实现数组的随机排序,本文将详细介绍不同的方法,并分析它们的优缺点,帮助开发者在不同场景下选择合适的解决方案,需要的朋友可以参考下
    2025-03-03
  • JavaScript实现烟花绽放动画效果

    JavaScript实现烟花绽放动画效果

    这篇文章主要介绍了JavaScript如何实现烟花绽放动画效果,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08

最新评论