利用Typings为Visual Studio Code实现智能提示功能

前言

相信大家都知道在IDE中代码的智能提示几乎都是标配，虽然一些文本编辑器也有一些简单的提示，但这是通过代码片段提供的。功能上远不能和IDE相比。不过最近兴起的文本编辑器的新锐 Visual Studio Code 可以通过 Typings 来对 JavaScript 实现智能提示功能，对于一个文本编辑器来说，这点很难得。所以Visual Studio Code 特别适合用来编写 JavaScript(Node.js)程序; 同时，如果我们需要编写一些尝试性的小代码片段，例如：Lodash.js 某个函数的小Demo，因为我们不想研究一个函数的使用方式而去使用IDE新建一个项目，这时候Visual Studio Code 就是一个非常好的选择，而且它同样可以运行和调试 JavaScript 代码(依赖于 Node.js)，并且还包含非常方便的代码提示功能。

从这点来说，我觉得Visual Studio Code 已经算得上是一个精悍的小型IDE了。

通过NPM安装Typings

通过 NPM 我们可以很容易的安装 Typings ，在命令行中输入：

npm install -g typings

安装完成后，在命令行中输入：

typings --version

看到版本信息就表示 typings 工具安装完成了：

NPM是和Node.js一起安装的，如果你想使用NPM的话，那么你应该先安装Node.js。

安装相关提示信息文件

安装完成后，我们需要安装相应的需要提示功能库或者框架的类型信息文件，在这里我们新建一个文件夹 NodeSnippet，使用命令行进入到该目录中，分别输入下面两个命令来安装Node和Lodash的类型接口信息文件：

typings install dt~node --global --save
typings install lodash --save

什么时候需要使用 --global 参数：

  1. 如果安装的包使用script标记来引用(如jQuery)(也就是在浏览器中使用)
  2. 这个包是属于环境的一部分(如node)时
  3. 该包没有使用 --global 安装失败时

这时候我们可以看到我们的 NodeSnippet目录中多了一些文件：

这些文件就是为我们提供提示信息的类型类型文件(使用TypeScript定义)。查看Typings是否支持某个库或框架的智能提示，我们可以使用下面的命令:

typings search exampleName

启用智能提示功能

通过两种方式来启动提示功能：

第一种是在需要进行只能提示的文件最上行增加提示信息文件所在目录，格式如下:

/// <reference path="./typings/index.d.ts" />

第二种是在项目所在目录(在这里是NodeSnippet文件夹中)增加一个名为jsconfig.json的空文件。

更多jsconfig.json文件的内容可以参考：https://code.visualstudio.com/docs/languages/javascript

启用提示功能后我们就可以非常愉快的使用Visual Studio Code 为我们提供的智能提示功能了。如下所示：

注意事项

Typings VS TSD

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

 npm rm -g tsd

使用 CNPM

在国内由于墙的原因，有时候使用NPM安装模块的速度上会很慢，这时候我们其实可以选择国内淘宝的NPM镜像，使用下面的命令来进行安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后使用cnpm来代替npm命令即可，例如下面安装一个lodash模块的示例：

cnpm install lodash

可以看到除了cnpm替代了npm其他的并没有任何区别。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • Visual Studio调试技巧汇总

    Visual Studio调试技巧汇总

    调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 1 悬停鼠标查看表达式值 调试是很有挑战性的.比如在函数内逐步运行可以看出哪里出错,查看堆栈信息可以知道函数被谁调用等等. 但是无论哪种情况下,查看表达式和局部变量的值都是很麻烦的(把表达式和局部变量放到watch窗口里). 一种更简单的方法,把鼠标停在所需查看的数据上.如果是类或结构,那么点击展开可以很方便快速地

  • C#编程和Visual Studio使用技巧（上）

    C#编程和Visual Studio使用技巧（上）

    对开场白没兴趣?好吧,我们直接切入正题,下面介绍10个C#编程和Visual Studio IDE使用技巧. 1.Environment.Newline 你是否知道这个属性是与平台无关的?允许你根据每个平台输出新的换行字符. Console.WriteLine("My Tips On ,{0}C#", Environment.NewLine); 2.命名空间别名 你是否知道可以使用更短的别名代替长的命名空间?你是否遇到过需要限制完整的命名空间以避免产生歧义?看下面的代码示例,它是使用扩

  • C#中几个未知的Visual Studio编码技巧分享

    C#中几个未知的Visual Studio编码技巧分享

    用了多年的Visual Studio,今天才发现这个编码技巧,真是惭愧,分享出来,算是抛砖引玉吧! 开发环境: vs2010+C# 1.代码重构新建类 如果你还像我以前一样使用右键快捷菜单新建类,那就太Out了.VS的那个"新建项对话框"出来的很慢,很影响心情.当你发现需要定义一个类时,正确的方法:1)在当前代码处定义上类名,例如:List<NewClass> ls; 2)焦点移动到NewClass处,按下ctrl + .("点")3)回车.这样类就建好

  • 分享Visual Studio原生开发的10个调试技巧

    分享Visual Studio原生开发的10个调试技巧

    最近碰巧读了Ivan Shcherbakov写的一篇文章,<11个强大的Visual Studio调试小技巧>.这篇文章只介绍了一些有关Visual Studio的基本调试技巧,但是还有其他一些同样有用的技巧.我整理了一些Visual Studio(至少在VS 2008下)原生开发的调试技巧.(如果你是工作在托管代码下,调试器会有更多的特性,在CodeProject中有介绍它们的文章),下面是我的整理的一些技巧: 异常中断 | Break on Exception Watch窗口中的伪变量 |

  • C#编程和Visual Studio使用技巧（下）

    C#编程和Visual Studio使用技巧（下）

    如果你通过搜索引擎发现这篇文章的,我建议你先看看本系列的第一篇,这是本系列文章的第二篇,今天为大家带来更丰富的C#和Visual Studio编程技巧,一起来看看吧. 推荐:<10个C#编程和Visual Studio使用技巧>(上) 1.DataTable.HasRows 它不属于任何框架,但通过扩展方法很容易模仿这样一个方法,它不会消除检查数据表对象是否为空或行数的原始代码,但它可以简化应用程序的代码,下面是一个代码片段: <CODE> public static bool H

  • 分享Visual Studio原生开发的10个调试技巧（2）

    分享Visual Studio原生开发的10个调试技巧（2）

    之前关于Visual Studio调试技巧的文章引起了大家很大的兴趣,以至于我决定分享更多调试的知识.以下的列表中你可以看到写原生开发的调试技巧(接着以前的文章来编号).这些技巧可以应用在VS2005或者更新版本中(当然有一些可以适用于旧版本).如果你继续,你可以知道每个技巧的详细信息. 技巧11:数据断点 当数据所在内存位置变化时,调试器将会中断.然而,这是唯一可能在一个时间创建4这样的硬件的数据断点.数据断点只能在编译的过程中添加,可以通过菜单(编译>新断点>新数据断点)或者通过断点窗口来

  • 利用Typings为Visual Studio Code实现智能提示功能

    利用Typings为Visual Studio Code实现智能提示功能

    前言 相信大家都知道在IDE中代码的智能提示几乎都是标配,虽然一些文本编辑器也有一些简单的提示,但这是通过代码片段提供的.功能上远不能和IDE相比.不过最近兴起的文本编辑器的新锐 Visual Studio Code 可以通过 Typings 来对 JavaScript 实现智能提示功能,对于一个文本编辑器来说,这点很难得.所以Visual Studio Code 特别适合用来编写 JavaScript(Node.js)程序; 同时,如果我们需要编写一些尝试性的小代码片段,例如:Lodash.j

  • 一文教你将Visual Studio Code变成Python开发神器

    一文教你将Visual Studio Code变成Python开发神器

    目录 安装 Visual Studio Code 在 VS Code 中创建和运行 Python 文件 使用 REPL 格式化 Python 代码 重构 Python 代码 Python 交互窗口 Visual Studio Code 是一款功能强大.可扩展且轻量级的代码编辑器,经过多年的发展,已经成为 Python 社区的首选代码编辑器之一 下面我们将学习如何安装 Visual Studio Code 并将其设置为 Python 开发工具,以及如何使用 VS Code 提高编程工作效率 Let

  • 在Visual Studio Code中配置GO开发环境的详细教程

    在Visual Studio Code中配置GO开发环境的详细教程

    一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github.com/microsoft/vscode-go 这款插件的特性包括: Colorization 代码着彩色 Completion Lists 代码自动完成(使用gocode) Snippets 代码片段 Quick Info 快速提示信息(使用godef) Goto Definition 跳转到定

  • Visual Studio Code配置C、C++环境并编写运行的方法

    弄了半天,总算弄好了,结合网上的教程,整理分享一下~ 总体流程: 下载安装vscode 安装cpptools插件 安装编译.调试环境 修改vscode调试配置文件 下载安装vscode  https://code.visualstudio.com/Download Visual Studio Code 64位 v1.26.0 官方最新安装版:https://www.jb51.net/softs/606746.html Visual Studio Code 32位 v1.26.0 官方最新安装版:

  • Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++的教程详解（主要Windows、简要Linux）

    2020年2月22日更新,又按照自己的帖子尝试了以下,感觉大的思路是没问题的啊,小改动用紫色的标记标注出来了,另外如评论区所说删去了部分旧版本的内容和图片,不知道为啥评论区的留言我都没收到邮件... 现在是2019.7.21,由于这阵一直在忙,今天我用最新的VSCode(Version 1.36.1) 和最新的Cpp插件(version 0.24.0)按照本文的安装步骤从零开始试了一下,由于vscode版本和cpp插件版本更新确实变化了很多,2019年7月21日更新的我会用这个颜色(粉色?)标示

  • VSCode (Visual Studio Code) V1.43.0下载并设置成中文语言的方法

    Visual Studio Code(简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性,并针对网页开发和云端应用开发做了优化.VS Code编辑器界面依然是微软经典的 VS 风格,对于常接触的人来说会很亲切. 在编程语言和语法上支持 C++, jade, PHP, Python, XML, Batch, F#, DockerFile, Coffee Script, Java,

  • Visual Studio Code 配置C、C++环境/编译并运行的流程分析

    总体流程: 下载安装vscode 安装cpptools插件 安装编译.调试环境 修改vscode调试配置文件 下载安装vscode https://code.visualstudio.com/Download 安装cpptools插件 打开vscode,按ctrl+p打开快速命令框,输入以下命令后等待 ext install cpptools vscode在短暂的联网查找后会列出插件列表,如图: 点击箭头所指处的按钮安装插件,安装过程可能会有些慢耐心等待 安装完成后vscode会提示你重启vsc

  • Visual Studio code 配置Python开发环境

    步骤1:安装 Python 这个直接略过,建议3以上版本. 步骤2:安装 Visual Studio Code 下载地址:https://code.visualstudio.com/ 选择对应的版本,下载安装即可,过程简单,关键是免费软件无需破解. 步骤3:改变显示语言 看英文有点吃力,那就看中文吧,在扩展里搜索中文包进行安装 安装完成后弹出重启提示: 重启后就看到中文了! 步骤4:安装扩展 为VS Code安装Python扩展.Python扩展名为Python,由Microsoft发布. 步骤

  • Visual Studio Code(vscode) git的使用教程

    Visual Studio Code(vscode) git的使用教程

    本文介绍了Visual Studio Code(vscode) git的使用,分享给大家,具体如下: 1.创建一个github账号 2.在vscode中执行命令 echo "# C-Tests" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/harryluo163/C-Tests.g

  • Visual Studio Code (vscode) 配置 C / C++ 环境的流程

    昨天突发奇想,想使用vscode配置C++环境,因为不想下载 Dev OR codeblock,然后借助了很多网上教程,用了昨天整整一下午的时间最后终于成功了(哈哈哈哈哈--).今天跟大家分享一下~~~ 因为还只是个编程小白,参考资料有点多 ↓ ↓ ↓ 官方文档 -- 参考配置过程CSDN原创文章 -- 参考主要配置过程知乎达人 -- 参考环境准备 ➺➻➸ 主要流程: 1. 下载VScode 2. 安装cpptools工具 3. 下载MinGW 4. 配置环境变量 5. 使用简单的.cpp文件配

随机推荐