五小步让VS Code支持AngularJS智能提示

简介: 五小步让VS Code支持AngularJS智能提示

本文想通过配置VS Code来实现对AngularJS的智能提示。在一般的情况下对于在HTML页面是支持提示的。但是在js页面就不是很友好,它是记忆你之前的输入,要是之后有重复的输入,VS Code会提示您,仅此而已。



VS Code各种屌炸天的功能,将来必定是强大的前端IDE。



通过下列5步让VS Code支持对AngularJS的智能提示。


前提条件是电脑中需要安装node.js和npm包管理器。检验自己电脑是否已安装,输入如下命令即可。

679140-20160818205502578-1854067108.png

1:通过npm包管理器下载tsd


在全局模式下,安装tsd,也就是在电脑的底层安装下载tsd,这样我们以后在别的文件夹使用的时候直接初始化就OK了。

npm install -g tsd


这样就下载了tsd包。


2:项目文件夹下面初始化ts




679140-20160818205506796-1129166948.png

这样就初始化了项目文件。初始化完毕之后,我们就有了typings文件夹和tsd.json文件,第一个是我们放一些需要配置语言的文件,比如AngularJS,第二个是配置文件。我们接着可以在下载AngularJS的文件了。


679140-20160818205509781-426835645.png

3:执行下列命令,将AngularJS配置文件加载到tsd中


tsd query jasmine angular-protractor –-action install --save


这是下载Angular文件到项目中,之后会在typings中出现angularjs文件夹,里面就是此时下载的angularjs配置文件。


679140-20160818205511984-1694204971.png


679140-20160818205514484-1217836494.png


4:实现对AngularJs的Module和Services的智能感知。



tsd query angular –action install --save


这样就在配置文件中添加了对angularjs提示的引入。


679140-20160818205517375-206426689.png

679140-20160818205519640-869761979.png


5:在项目中添加对配置文件的引用。


我们在需要智能提示的文件夹中引用下面这就话就OK,注意自己的路径。


/// <reference path="../typings/tsd.d.ts" /><br><br><a href="http://images2015.cnblogs.com/blog/679140/201608/679140-20160818205521140-1122375250.png" rel="noopener"><img style="background-image: none; float: none; padding-top: 0; padding-left: 0; margin: 20px auto; display: block; padding-right: 0; border: 0" title="image" src="https://images2015.cnblogs.com/blog/679140/201608/679140-20160818205522734-2025253886.png" alt="image" width="546" height="284" border="0"></a>


这样就可以有智能提示了。如下图所示:

679140-20160818205525859-1728386658.png

679140-20160818205528359-597529052.png





目录
相关文章
webstorm + vscode支持微信小程序语法及代码智能提示教程
做了半年的微信小程序,由于感觉微信开发者工具非常不好用,所以贴出在下使用webstorm和vscode开发的教程给大家参考一下。 注意:代码只能提示只有js文件 工具:电脑一台、webstorm、vscode 1.首先FileType下Cascading Style Sheet 添加*.wxss 2.FileType下HTML 添加*.wxml 3.打开vscode,搜索下图中的插件安装。
4022 0
|
JavaScript
在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题
首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” 然后点击配置HTML语言的基础设置 然后在打开的界面中(右侧) 输入如下代码 { "editor.quickSuggestions": { "other": true, "comments": tr...
2075 0
|
7月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
94 0
|
7月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
262 0
|
7月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
7月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
7月前
|
人工智能 JavaScript 程序员
Fitten Code:在VSCode插件市场备受欢迎的原因是什么?
随着AI技术的不断发展,AI在编写代码方面的能力也日益强大。充分利用AI的能力能够显著提高代码编写的效率和质量。今天我将向大家介绍一款备受瞩目的AI代码神器——Fitten Code,让我们一同揭开它神秘的面纱!
587 3
|
6月前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
99 4
|
6月前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
7月前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
208 0