vscode+node.js配置

微笑、不失礼 提交于 2020-04-17 02:08:03

【推荐阅读】微服务还能火多久?>>>

jsnode.js使用vsc中的Dark+配色方案

一、Visual Studio Code搭建NodeJs的开发环境

1.下载安装NodeJs

步骤8:安装相关环境

我们要先配置npm的全局模块的存放路径以及cache的路径,例如希望将以上两个文件夹放在NodeJs的主目录下,我这里的主目录是D:\node\,所以就在D:\node\下建立node_global和node_cache两个文件夹,如图:

在cmd中输入:

npm config set prefix"D:\node\node_global"回车

再输入

npm config set cache"D:\node\node_cache"

现在就可以安装模块了(以下按需安装,我这里只安装了express如下图):

(安装模块语法:npm install <Module Name>)

npm install express -g

npm install jade -g// npm install pug-g,好像是jade改成了pug具体没有考证。

安装MySql包

npm install mysql -g

 

2.下载安装 VS Code编辑器

常用插件:

HTML Snippets

HTML CSS Support 

Debugger for Chrome 

JQuery Code Snippets

Path Intellisense

Npm Intellisense

Document this 

ESlint

Project Manager    #多个项目之间快速切换的工具

beauti

Typings Installer    #安装vscode 的代码提示依赖库,基于typtings的,至于什么是typtings自己去百度。

Bootstrap 3 Sinnpet

Auto Rename Tag

JavaScript Atom Grammar

vscode-icon

 

3.使用Typings工具配置智能提示

        npm install -g typings
        typings install dt~node --global --save

 

 

4.创建Hello word Demo

https://img-blog.csdn.net/20170223154000068?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTEyNzAxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

创建测试服务器server.js

    …

 

4.查看NodeJs API的方式

方式一:参考官方文档,NodeJs的官方文档比较详细

方式二:ide

 

二、Visual Studio Code搭建NodeJsDebug

         一、使用 VsCode创建Hello World项目

1.创建文件夹作为项目目录,使用 npm init 创建NodeJs的配置文件 package.json

         https://img-blog.csdn.net/20170704103907513?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTEyNzAxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

2.编写代码

    var http=require('http');

    http.createServer(function(req,res){ 

        res.writeHead(200,{'Content-Type':'text/plain'}); 

        res.end('hello node.js'); 

    }).listen(3000,'localhost',function(){ 

        console.log('Server running at http://localhost:3000'); 

    });

3.配置调试设置,添加调试配置

特别说明:不添加配置需要每次启动调试都选择NodeJs环境。

如果添加了配置,启动调试时自动选择 launch.json中指定的。

https://img-blog.csdn.net/20170704104447194?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTEyNzAxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

其中最重要的配置项就是“Program”字段,这个字段定义了整个应用的入口,开启调试器的时候会从这个入口启动应用。

 

4.调试

https://img-blog.csdn.net/20170223154703878?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTEyNzAxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!