找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 6622557|回复: 0

使用VSCode快速搭建NodeJS开发环境

[复制链接]

该用户从未签到

发表于 2021-5-26 07:35:45 | 显示全部楼层 |阅读模式

您需要 登录 才可以下载或查看,没有账号?立即注册

×
文本的目的是快速搭建NodeJS的开发环境,NodeJS的常见的开发方式有2种,一种是编辑器,一种是IDE。编辑器推荐使用微软出品的vscdoe,因为其启动速度快,轻量级,执行简单,调试方便,还有界面漂亮。而IDE 无可厚非的就是WebStorm了。这里使用vscdoe搭建开发环境,因为IDE真的比较耗内存。除非开发大型项目,否则轻易我不开IDE。
VSCode全称是Visual Studio Code, 由微软出品,但它不是那个大块头的Visual Studio ,它是一个精简版的迷你Visual Studio,并且,Visual Studio Code可以跨!平!台!Windows、Mac和Linux通用。
可以通过官方下载, 由于你我都懂的原因,可能无法访问,因此你可能会需要使用国内镜像,直接下mac版本的安装包,安装。
在VS Code中,我们可以非常方便地运行JavaScript文件。
VS Code以文件夹作为工程目录(Workspace Dir),所有的JavaScript文件都存放在该目录下。此外,VS Code在工程目录下还需要一个.vscode的配置目录,里面存放里VS Code需要的配置文件。
假设我们要创建一个hello的工程,因此我需要一个hello的目录作为工程目录,然后在里面编写hello.js文件,则该工程目录的结构如下:

                               
登录/注册后可看大图
然后切换到debug模式进行运行,关于debug模式后面介绍。对于更细节相关的文档可以参考微软官方提供的JavaScript in VS Code
因为之前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是相当爽的,智能提示的功能非常nb。
这个功能理所应当也被vscode继承了,但是现在tsd项目已经过期了,接过这个接力棒的是typings
因此我们将通过Typings来实现JavaScript智能提示功
[indent,安装NPM[/indent,NPM是和Node.js一起安装的,如果你想使用NPM的话,那么你应该先安装Node.js

[indent,Typings vs TSD[/indent,Typings作为TSD的替代者而出现的,如果你已经安装了TSD,那么需要知道现在TSD已经不推荐使用了。如果已经安装TSD请执行下面的命令来移除它

[indent,CNPM[/indent,在国内由于墙的原因,大部分时候使用NPM安装模块的速度上会很慢,这时候我们其实可以选择国内淘宝的NPM镜像,关于淘宝NPM镜像的使用方法可以参考淘宝 NPM 镜像

使用下面的命令来进行安装和使用
安装Typings我们通过cnpm来安装typings

                               
登录/注册后可看大图
配置智能提示安装完成后,我们需要安装相应的需要提示功能库或者框架的类型信息文件,在这里我们新建一个文件夹 NodeSnippet,为了了解Typings的使用方法,你可能需要简单看看typings github
使用命令行进入到该目录中,分别输入下面两个命令来安装Node和Lodash的类型接口信息文件:
这时候我们可以看到我们的 NodeSnippet目录中多了一些文件:

                               
登录/注册后可看大图
这些文件就是为我们提供提示信息的类型类型文件(使用TypeScript定义)。查看Typings是否支持某个库或框架的智能提示,我们可以使用下面的命令:
启动智能提示配置好了类型接口后,可以通过两种方式来启动提示功能:
1.文件头加注释
2.在目录(在这里是NodeSnippet文件夹中)增加一个名为jsconfig.json的空文件
更多jsconfig.json文件的内容可以参考: JavaScript in VS Code
这样我们写代码的时候就有智能提示功能了。
调试如何调试写好了的JS程序喃?
用VS Code快速创建launch.json文件, 主要是修改program这个参数,指明你 可执行文件位置。
关于Debug的细节,请参考Debugging

                               
登录/注册后可看大图
坚持技术分享,如果你喜欢我的文章点个关注吧!

资料专区:beego官方中文文档

                               
登录/注册后可看大图
如果你现在对beego开发还不太了解或者想更深入的学习,上面这部分官方文档一定要收藏!如果有需要完整版的朋友可以微信扫码下方二维码免费获取网盘链接和提取码!
回复

使用道具 举报

网站地图|页面地图|文字地图|Archiver|手机版|小黑屋|找资源 |网站地图

GMT+8, 2024-5-17 17:57

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表