用Visual Studio Code写Node.j

简介: 介绍 vsc的宣传语是: 一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。 按它说的,vsc特别适合来作为前端开发编辑器。

介绍

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模式。

目录
相关文章
|
2月前
|
Web App开发 缓存 JavaScript
【安装指南】nodejs下载、安装与配置详细教程
这篇博文详细介绍了 Node.js 的下载、安装与配置过程,为初学者提供了清晰的指南。读者通过该教程可以轻松完成 Node.js 的安装,了解相关配置和基本操作。文章首先介绍了 Node.js 的背景和应用场景,随后详细说明了下载安装包、安装步骤以及配置环境变量的方法。作者用简洁明了的语言,配以步骤图示,使得读者能够轻松跟随教程完成操作。总的来说,这篇文章为初学者提供了一个友好的入门指南,使他们能够顺利开始使用 Node.js 进行开发。
183 1
【安装指南】nodejs下载、安装与配置详细教程
|
4月前
|
JavaScript Linux
(简单成功详细)CentOS 安装 node.js
(简单成功详细)CentOS 安装 node.js
383 1
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
76 0
|
3月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
35 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(上)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
42 0
|
17天前
|
JavaScript Windows
NodeJS 安装及环境配置
NodeJS 安装及环境配置
|
26天前
|
Linux 开发工具 git
node使用nrm 管理托管node的安装源
node使用nrm 管理托管node的安装源
41 1
|
1月前
|
Web App开发 JavaScript 前端开发
Windows 10上安装Node.js的初学者指南
Node.js是是一个强大的JavaScript运行时环境,建立在Chrome的V8 JavaScript引擎上,让你能够在服务器端运行JavaScript。 通过本教程,你将学会如何设置Node.js和npm(节点包管理器等现代Web开发的必备工具。无论你是希望构建Web应用程序、创建服务器端脚本,还是涉足全栈开发,安装Node.js都是你的第一步。那么,让我们开始吧!
|
2月前
|
JavaScript
记录安装nodejs遇到的问题及解决
最近在搭建网站,需要用到nodejs,在配置的时候遇到3个问题,经过搜索和自己思考,把遇到的问题和解决方案记录下来,以供参考
|
2月前
|
JavaScript Windows 内存技术
通过Nvm安装和管理NodeJS
通过Nvm安装和管理NodeJS
111 0
通过Nvm安装和管理NodeJS