Visual Studio Code

用Visual Studio Code写Node.j

介绍

vsc的宣传语是:

一个运行于 Mac OS XWindows和 Linux 之上的,针对于编写现代 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-11-06 20:28:07

Visual Studio Code的相关文章

在linux系统中安装VSCode(Visual Studio Code)

1.从官网下载压缩包(话说下载下来解压就直接可以运行了咧,都不需要make) 访问Visual Studio Code官网 https://code.visualstudio.com/docs?dv=linux64 我是64位的: wget https://az764295.vo.msecnd.net/stable/7ba55c5860b152d999dda59393ca3ebeb1b5c85f/code-stable-code_1.7.2-1479766213_amd64.tar.gz 2.解

安装GO语言环境之安装Visual Studio Code插件

在安装Visual Studio Code插件的时候,由于谷歌的限制,在下载下列插件的时候会报错: go get -u -v github.com/nsf/gocode go get -u -v github.com/rogpeppe/godef go get -u -v github.com/golang/lint/golint go get -u -v github.com/lukehoban/go-find-references go get -u -v github.com/lukeho

Visual Studio Code 中编写 C++ 的工作流

1. 官网下载 Visual Studio Code ,安装.按提示安装 cpp 插件和 cmake 插件. 官网下载 CMake ,安装. 官网下载 Mingw ,安装. 安装 Mingw 时,注意勾选 mingw32-automake, mingw32-base, mingw32-gcc, mingw32-gcc-g++, msys-base, mingw32-binutils, mingw32-gdb. 2. File->Open Folder 打开项目所在文件夹. 文件夹的目录应为 Pr

[Visual Studio Code] 执行python

Visual Studio Code 作为一种IDE,实时执行python程序,对调试或理解执行步骤起到了很大的作用!因此,以下对此作一简单接受,希望广大园友提出宝贵意见! 1. 官方说明 http://code.visualstudio.com/docs/editor/tasks 2. 配置执行环境 Note: Please note that task support is only available when working on a workspace folder. It is no

用Visual Studio Code 开发应用之 安装 Visual Studio Code

最近研究微软的ASP.NET 新一代产品 ASP.NET Core1.0. 发先Visual Studio Code是一个很好的很强大的开源编辑器.是编辑器而不是IDE.之所以强大是因为他可以说是一个简单的IDE了,因为他包含了debug 功能.最近呢楼主运气好,给微软打工,能够接触到微软的最新的资源. 这里主要介绍这个编辑器的原因是 微软的新一代产品ASP.NET Core 1.0 是一个全新的跨平台产品,关于这款全新的产品呢,博主我写过一篇简短的介绍,想了解的请移步这里:http://www

Visual Studio Code和Docker开发asp.net core和mysql应用

Visual Studio Code和Docker开发asp.net core和mysql应用 .net猿遇到了小鲸鱼,觉得越来越兴奋.本来.net猿只是在透过家里那田子窗看外面的世界,但是看着海峡对岸的苹果园越来越茂盛,实在不想再去做一只宅猿了.于是,.net猿决定搭上小鲸鱼的渡轮到苹果园去看看. .net猿上了小鲸鱼渡轮就先问了一个问题,苹果园上有能用来编写c#代码的和Visual Studio一样强大的IDE么?这时,天空闪过一道Gamma射线,艾瑞克神说,给你一个 Visual Stud

Visual Studio Code常用设置

Visual Studio Code常用设置 • 自动保存设置 ? 文件(F) -> 首选项(P) -> 用户设置(U) ? 将"files.autoSave": "off"更改为"files.autoSave": "afterDelay",注意只能在"settings.json"中修改.

Mac上使用Visual Studio Code开发/调试.NET Core代码

Mac上使用Visual Studio Code开发/调试.NET Core代码 .Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今天抽空研究了下在Mac下如何使用VS Code来开发.NET Core程序,并且调试代码. 1.安装.NET Core 在mac上打开终端: ~$ brew update ~$ brew install openssl ~$ brew link --force openssl 如果不能使用brew命

近一周学习之-----vue开发工具visual studio code

Visual studio code 下载地址 打开工具,安装部分插件 点击该图标,弹出插件库 安装vue2.0插件 后续可以自行安装一些其他插件,比如html,javascript,css,es6====

Visual Studio Code Setup

Windows https://code.visualstudio.com/docs/setup/windows Additional Components and Tools https://code.visualstudio.com/docs/setup/additional-components VS Code is a small download by design and only includes the minimum number of components shared ac