用Visual Studio Code写Node.j

介绍

vsc的宣传语是:

一个运行于 Mac OS XWindowsLinux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。

按它说的,vsc特别适合来作为前端开发编辑器。

内置html开发神器emmet(zencoding),对css及其相关编译型语言LessSass都有很好的支持。

当然,最nice的还是写js代码了,这也是我接下来要着重介绍的功能。

智能提示

因为之前微软推出了typescript语言,结合tsd文件,用visual studiotypescript代码是相当爽的,智能提示的功能非常nb

这个功能理所应当也被vsc继承了。

目前主流的前端类库/框架,包括node.js及其模块/框架都有相应的tsd文件,可以去DefinitelyTyped上找一下。

在项目中引入对应文件,就可以有智能提示了。

这里以angular为例,使用步骤如下:

  1. 全局安装tsd,通过tsd安装.d.ts文件。这样会在项目下面生成.typings目录,目录下面就是下载的.d.ts文件,再写代码的时候就会有智能提示了。具体用法参考tsd用法
npm install -g tsd

tsd query angular --action install
  1. 如果不想自己手工引入,也可以在angular变量后面按ctrl+k,会有个灯泡图片,点击灯泡图片就会有对应提示,选择下载xx.d.ts文件就可以了,编辑器会下载对应文件放在.typings目录。

过程如下图:

再来个node.js的:

说完智能提示,再说代码调试。

调试Node

之前写过文章介绍过node.js的调试方案(Node.js调试)。从vsc发布后,我就一直用它写代码,也是用它来调试node.js代码。

使用方法也很简单,步骤如下:

  1. 打开要调试的文件,按f5,编辑器会生成一个launch.json
  2. 修改launch.json相关内容,主要是nameprogram字段,改成和你项目对应的
  3. 点击编辑器左侧长得像蜘蛛的那个按钮
  4. 点击左上角DEBUG后面的按钮,启动调试
  5. 打断点,尽情调试

过程如下图:

最后,再赠送彩蛋一个。

Node API 查看

在写node.js代码的时候,有时会忘记某个模块中有哪些方法及其用法,经常要去官网翻一下api文档。

这里介绍下怎么使用vsc来搞定这一问题。

  1. 打开vsc控制台(Help > Toggle Developer Tools > Console
  2. 在控制台写代码,查询模块方法。

过程如下图:

vsc是用atom-shell(现在叫electron)写的,这玩意和node-webkit(现在叫nw.js)一样,都是把node.jschrome结合起来的工具,所以可以这么使用。

不过vsc使用到的node.js模块并不多,比如引用utilvm等会报错,用node-webkit就不会这样。

结语

vsc和其他编辑器(sublime text,atom,webstorm等)相比,某些方面还存在很多问题。对于一个前端工程师来说,它已经足够好了。

当然了,它在不断改进。等着它支持插件系统,支持vim模式。

时间: 2024-10-13 03:16:02

用Visual Studio Code写Node.j的相关文章

Visual Studio Code - 调试 Node.js 代码

官方的文档写的太好了!大家还是看参考资料吧. 参考资料: Debugging in Visual Studio Code Debug Node.js Apps using Visual Studio Code 原文地址:https://www.cnblogs.com/jffun-blog/p/10217690.html

用 Visual Studio Code 调试 Node.js

环境: Visual Studio Code  Node.js 1. 关闭运行中的程序 2.打开入口文件,我这里的入口文件为 app.js 3.点击左侧菜单栏的 debug 按钮 4.点击运行按钮 5.打开控制台,把这里往上拉 选择调试控制台 6.在需要断点的地方打上红点 7.运行程序 我们可以看到黄色的地方就是我们打的断点,我们可以在最上面的这里调试程序 也可以使用快捷键 F10.F11 进行调试 把光标覆盖到变量上可以查看当前时刻变量的值 我们可以再左侧栏处查看调试相关的东西 在断点处,我们

关于Visual Studio Code的Node.js提示

试用了下VSC, 感觉比sublime还不错, 但是苦恼的时候编写node.js的时候没有任何的提示. 原来很简单, 例如一个最简单的http.js: var http = require('http'); var port = process.env.port || 1337;http.createServer(function(req,res){ res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello node.j

Visual Studio Code

用Visual Studio Code写Node.j 介绍 vsc的宣传语是: 一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器. 按它说的,vsc特别适合来作为前端开发编辑器. 内置html开发神器emmet(zencoding),对css及其相关编译型语言Less和Sass都有很好的支持. 当然,最nice的还是写js代码了,这也是我接下来要着重介绍的功能. 智能提示 因为之前微软推出了typescript语言,结合ts

Nodejs in Visual Studio Code 04.Swig模版

1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install express -g(全局安装) Express-Generator:npm install express-generator -g(全局安装) 如果没有设置global可能导致express命令在cmd里面无法执行 我接触过3个模版jade,ejs,swig,最后选择了swig jade :是express

Nodejs in Visual Studio Code 01.简单介绍Nodejs

1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看Nodejs 一个运行时语言,可以使用javascript编写网站程序: 可以运行在windows和linux上,并且不需要iis或tomcat就能够独立运行: 写一些基于业务的API很方便,适合做项目: 据说可以处理高并发等等各种高能,但是我现在并不会: 3.安装Nodejs Nodejs : htt

剖析并利用Visual Studio Code在Mac上编译、调试c#程序

0x00 前言 一周多以前的微软的Build大会上,微软发布了一个让很多人眼前一亮的工具,也是本文的主角——Visual Studio Code.很多使用Windows的朋友都很高兴,认为又多了一个很不错的文档编辑器.不过匹夫更关心的是它的跨平台能力,这不,匹夫偷得半日闲,写篇小文来聊聊在Mac上如何使用Visual Studio Code编译和调试C#代码,最后匹夫也会尝试把Visual Studio Code嵌入Unity3D中,作为一个准“IDE”使用. 0x01 Visual Studi

Visual Studio Code扩展

Visual Studio Code扩展 注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种语言,还能安装各种扩展.没有用过的同学可以下载下来感受一下,具体参见官方文档. 假设VS Code你已经安装好了,也已经大概玩过一遍了.接下来我们就开始讲讲怎么创建一个简单的VS Code扩展. 首先要装下node.js,然后通过命令行安装Yeoman,我们要通过

Visual Studio Code使用typings拓展自动补全功能

转自:http://blog.csdn.net/liyijun4114/article/details/51658087 参考来源: 官方介绍: https://code.visualstudio.com/Docs/runtimes/nodejs#_intellisense-and-typings gyzhao写的”Visual Studio Code 使用 Typings 实现智能提示功能”: http://www.cnblogs.com/IPrograming/p/VsCodeTypings