VSCode中如何利用d.ts文件进行js智能提示

自动补全(智能提示)

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

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

vsc的自动补全用的是typings。

先上效果图：

安装 nodejs

因为需要使用到node里面的npm去安装别人写好的d.ts文件，所以要先安装nodejs。具体步骤不说了，去nodejs官网上下载相应的程序，点击下一步下一步安装就行了。

添加项目的配置文件

在项目的根目录，创建一个 jsconfig.json 文件，内容如下：

{
 // See https://go.microsoft.com/fwlink/?LinkId=759670
 // for the documentation about the jsconfig.json format
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "allowSyntheticDefaultImports": true
 },
 "exclude": [
 "node_modules",
 "bower_components",
 "jspm_packages",
 "tmp",
 "temp"
 ]
}

这个配置文件的作用就是告诉VSCode编辑器，你这个项目是一个js项目。

安装别人写好的相关的d.ts文件

比如说我要提示jquery，那么使用这个命令：

npm install @types/jquery -save

需要说明的是，npm软件库被墙了，所以你要翻墙，或者用下面这个命令去安装。

$ npm install @types/jquery -save --registry=https://registry.npm.taobao.org

后面多出来的一长串东西，表示是通过淘宝搭建的服务器去安装。

然后你就发现你项目里面多了个node_modules/@types/jquery文件夹。

这时候就能实现效果图里面那样的效果了。

使用自己写的d.ts文件

如果是我们自己写的d.ts文件，那么把该d.ts放到项目的根目录或者任意目录下就可以了。

关于如何写d.ts文件看这里：http://www.jb51.net/article/138217.htm

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • 如何编写一个d.ts文件的步骤详解
赞 (0)

相关推荐

  • 如何编写一个d.ts文件的步骤详解

    如何编写一个d.ts文件的步骤详解

    前言 本文主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名,比如xxx.d.ts). 最近开始从js转ts了.但是要用到一些描述文件(d.ts),常用的比如jquery等都可以通过 npm下载到别人已经写好的npm install @types/jquery.但是还是有一些小众的或者公司内部的公共库或者以前写过的公用js代码需要自己手动写描述文件. 之前也从网上面也找了一些资料,但还是看的云里雾里模糊不清,经过一段摸索,将摸索的结果记录下来,也希望可以给别人一个参考. 如果

  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    自动补全(智能提示) 因为之前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是相当爽的,智能提示的功能非常nb. 这个功能理所应当也被vsc继承了. vsc的自动补全用的是typings. 先上效果图: 安装 nodejs 因为需要使用到node里面的npm去安装别人写好的d.ts文件,所以要先安装nodejs.具体步骤不说了,去nodejs官网上下载相应的程序,点击下一步下一步安装就行了. 添加项目的配置文件 在项目的根目录,创建一个

  • 如何在VScode 中编译多个Go文件

    如何在VScode 中编译多个Go文件

    在使用VScode编译多个go文件多次遇到过一个问题:无法找到对应的函数.具体提示在好像是:在GOPATH和GOROOT路径中都没有找到该package或者该函数.但是实际上,这个函数所在的go文件就在我的工作空间. 这里简单记录下来. 举个很简单的例子:src目录下有个main.go文件, 引用了当前目录下myTools文件夹中的Add函数: 其中 main.go的实现如下: package main import ( "fmt" "myTools" ) func

  • Visual Studio中的jQuery智能提示设置方法

    Visual Studio中的jQuery智能提示设置方法

    1.VS2008 1) 安装VS2008 SP1补丁,下载链接.SP1补丁提供Javascript脚本库的智能提示功能. 2) 安装KB958502补丁,下载链接.KB958502补丁支持-vsdoc.js智能提示文件的关联功能,更多说明. 3) 下载jQuery原文件及-vsdoc.js文件,并通过相同的文件名前缀进行关联. 例,下载jquery-1.2.6.js和jquery-1.2.6-vsdoc.js, 拷贝到本地目录并引入到Web应用程序或Web站点的工程中. 现在你只需要添加jque

  • Visual Studio实现xml文件使用app.config、web.config等的智能提示

    Visual Studio实现xml文件使用app.config、web.config等的智能提示

    在.Net开发的过程中,有时我们需要使用Xml文件作为配置文件(基于某些情况的考虑),而不是app.config.web.config这种,但是我们在xml中配置时希望可以增加类似编辑app.confg.web.config文件时的智能提示. 没有作特殊配置时,编写xml文件如下: 从上图可以看到,没有智能提示.但是我们编辑app.config.web.config时有智能提示,比如上面的configuration,我们可能只要输入前面几个字母就会弹出智能提示,然后可以直接从下来中选择.如下图:

  • 利用types增强vscode中js代码提示功能详解

    利用types增强vscode中js代码提示功能详解

    使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

  • Angular2使用vscode断点调试ts文件的方法

    VSCode自带debugger工具,管理后台项目使用angular2,试了下调试ts文件十分方便.下面是具体的实现步骤以及踩的坑.当你调试出来后,回头看这个设置还是十分简单的.我使用的是ng-cli创建的项目.后面再补充一般项目的调试,感觉也差不多. 解决了 "由于未找到生成的代码,已忽略断点(是否是源映射问题?) " ,参考下面的 我的环境配置 我的环境配置 1. node v7.3.0 2. npm 3.10.10 3. ng >= 1.3 // 这一点非常重要,我一开始的

  • 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    最近使用了Better Comments这款插件,发现在ts文件中可以显示对应的颜色,但在vue文件中并不显示对应颜色 解决方法如下: 1.打开插件的配置文件夹,即 c盘 -> 用户 -> 用户名 -> .vscode文件夹 2.extensions目录 -> bttter-comments配置文件夹 3.打开配置文件aaron-bond.better-comments-3.0.2 -> out -> parser.js 4.修改配置文件,添加如下代码 case &qu

  • vscode中利用git通过ssh连接github的方法

    vscode中利用git通过ssh连接github的方法

    vscode目前发展的很快,易用性方面也远远超过其他文本编辑器如nodepad,这次在使用中发现vscode继承的git功能十分强大和方便,这里将git于github连接的步骤简单描述一下,用以备忘. 1.首先已经安装了git的控制台版本 初始化 $ git config --global user.name author #将用户名设为author $ git config --global user.email author@corpmail.com #将用户邮箱设为author@corpm

  • 在vscode中快速新建html文件的2种方法总结

    在vscode中快速新建html文件的2种方法总结

    目录 在vscode中新建html文件的两种方法: 第一个方法: 第二个方法: 补充:想要快速打开HTML文件查看编辑效果 总结 在vscode中新建html文件的两种方法: 第一个方法: 1 点击菜单[文件],如图所示. 2 点击[新建文件],如图所示. 3 就会创建一个没有命名的文件,如图所示. 4 点击选择语言开始,会弹出选择语言模式,在自动检测的下拉菜单中选择html,一个没有命名的html文件就创建好了. 5 点击保存或者另存为,给没有命名的html起个名字,可以起字母,数字,中文,起

随机推荐