可能是开发小程序,最好用的两个编辑器

看我大 Visual Studio Code

相比于 Sublime,Visual Studio Code 是完全免费和开源的编辑器。当然,当初试用 VSCode 还是冲着 Erich Gamma 的名头来的,用过之后根本停不下来呀:)

大爱 Type

VSCode 本身也是用 Type 写成的。Type 最大的成就就是为 Java 添加了类型系统。让 Java 开发大型工程的能力有了显著提高。不要听那些人鼓吹什么 Java 的动态类型,真正开发的时候有多少人用?团队开发的时候会给队友挖多大坑?另外,使用了 Type 之后,Java 的动态化、动态类型特性一点点都不会丢。

相比之下,ES6 还是改造的不够彻底,一点也不喜欢用。再安利一下,经常看到有人抱着 《Java 设计模式》看,拜托,一个没有 Class 、没有 Interface、没有类型系统的语言还用啥设计模式啊。即使调用一个 function,还需要看源码才知道传什么样参数的语言,还封装个毛呀。简单暴力才是王道!

总之,面对大型工程或者需要多人合作的时候,使用 Type 能显著提升开发效率,项目周期比较长的时候,能有效降低维护成本。

使用 Visual Studio Code 开发微信小程序

安装应用

安装应用就不说了,windows 直接双击安装包、iOS 直接拖到 Application 文件夹就好了。

安装 type

安装 type 之前,需要先安装 Node.js 以便使用它的 npm 进行代码包的管理。VSCode 重度使用 npm,以后还会多次看到它的身影。安装好 Node.js 之后,只要一行命令就可以安装 type 了

npm install -g typenpm install -g type@next//安装不稳定的测试版本

安装好之后打开终端,输入 tsc 看到如下界面就安装好了

DingTalk20170925203440-2017925

type 在终端的命令,是 tsc,下一步将 ts 文件编译为 js 文件的时候,也需要这个命令才可以的。下一步就是配置代码提示了:)

配置 typings 提供代码提示

typings 的前世今生

MS 刚刚推出 type 的时候,开发了一个叫做 tsd 的东东提供代码提示的能力。但是,似乎 tsd 做的太烂了,又出了一个叫做 typings 的东东来替代它,这两个东东的功能是完全相同的。在最初设计 tsd 和 typings 的时候,他们跟 type 是完全分离的两个项目,这两个项目也被设计为可以为不同的编辑器提供代码提示。同时,也可以应用到不同的语言。然而,这么长时间过去了,typings 变成了 type 专属。于是 type 2.0 推出之后,经开发者讨论,typings 被合并到 type 里面,作为 type 的一个 submodule 来开发维护,原本的库被 DEPRECATED 了。按照官方的说法,是因为原来 typings 与 type 分离的方式,字典文件是设计成全局有效的,经常造成字典文件无法安装和引入的问题。这个说法确实是有依据的,因为全局安装字典文件确实是一件经常报各种错误的事情,我操作的时候从来就没有成功过。

目前,大部分介绍 typings 的文章都是 typing 和 type 分离的时候,也就是 Type 1.x 版本的时候写的,当然,这些文章还是可以参考的,因为 typings 的使用方式还是向前兼容的,同时,在大部分情况下还是需要这种方式。

介绍 tsd 的文章就可以彻底废弃了。

官方推荐的安装字典文件的方式

typings 需要读取 d.ts 作为提示信息的来源。d.ts 文件不仅可以为 type 提供提示信息,也可以为 Java 编写的方法提供提示信息。然而,就算没有 d.ts 文件,如果按照 JSDoc 的规范为 type 编写的方法写注释,typings 也可以提供代码提示。例如这样:

/** * 验证 cookie 有效性 * @param {string} domain domain * @param {string} path path * @param {cookieEntity} item 需要验证的 cookie * @returns {boolean} true cookie 适用于 domain+path * @memberof GZCookieStorage */ protected validCookie(domain:string,path:string,item:cookieEntity):boolean{ let result:boolean = false; if(item.domain.indexOf(domain)) return false; }

看,代码提示出来了!

当然啦,绝大部分框架都是使用 d.ts 的方式提供代码提示的。下面就介绍几种常用的 d.ts 文件安装方式。注意,以下所有操作,都要在项目目录下进行,也就是说,打开命令行,进入到项目根目录下,再执行这些命令。

对 type 兼容性非常好的框架,例如 angular。npm install angular

啥,这不是在安装 angular 吗?对的,对于这种框架,Visual Studio Code 会自动下载相应的 d.ts 文件并提供非常棒的代码提示。

d.ts 文件单独上传到 npm 中的库npm install typed-we-app --save-dev

这样可以单独下载框架的 d.ts 文件,并交给 npm 管理。--save-dev 的意思是,将这个文件添加到开发依赖中。npm install 命令还有许多其他选项,在这里就不赘述了。命令执行完后,会生成一个文件夹 node_modules 和一个 package.json 文件。node_modules 文件夹保存着 npm 管理的模块,而 package.json 保存着这些模块的配置信息。当团队开发时,拿到一个新项目,没有 node_modules,只有 package.json ,只要在目录下执行 npm install 就可以把所有 modules 都下载下来了。

d.ts 文件没有上传到 npm 管理,是通过 git 提供的,但是已经按照 typings 的要求写好了配置文件这种也比较简单,知道 git 地址之后,执行下面的命令typings install github:Emeryao/typed-we-app -SG

这种方式就不是通过 npm 进行管理了,而是直接通过 typings 自带的命令进行管理。运行这个命令之后,会出现以下几个文件。typings 文件夹和 typings.json 配置文件。跟先前相同,拿到新项目后,运行下

typings install

就可以把所需要的文件安装好。从上面可以看出来,node_modules 和 typings 文件夹都可以添加到.gitignore 里面

只有 d.ts 文件这种情况指的是,不知道从哪里获取到的 d.ts 文件。例如:从度娘那里随便搜索了一下,同事用 QQ 传来一个 d.ts 文件。这种情况,连 d.ts 的来源都不清楚怎么办呢?这时候,只需要把该文件拷贝到项目目录里面,然后在源码的开头引用一下:///

只要 path 引用对了,就能得到代码提示。当然,这个提示是当前文件有效的。如果当前项目有 typings 文件夹,并且文件夹下面有一个 index.d.ts 文件,可以把 reference 放到这里,这时候就变成全局有效了。(因为Visual Studio Code 会自动的为每个 js、ts 文件引用index.d.ts)

以上就是我用过的安装 d.ts 文件的方式,当然了,typings 还有好多种方式提供代码提示,本人没有尝试过,也就不乱写了。需要的同学可以去 github 主页看看。

可以在微信小程序里面使用 Type 吗

这个问题,当然是可以喽。

下面我们就一步一步的,配置 Visual Studio Code ,用它开发微信小程序。

用微信开发者工具新建一个小程序项目。

这个步骤就省略了吧,官网上有文档的。

在 VSCode 中打开项目

我这里已经有一个项目了

DingTalk20171007102401-2017107

gfwapdf,下面就一直操作这个项目喽。打开 VSCode,菜单栏-文件-打开,找到项目根目录,gfwapdf,打开就可以了。

配置 typings 提供代码提示

0.打开终端,进入项目根目录。这里有两种方式,一种是系统的终端,这个打开之后默认是用户根目录,需要收到 cd 到项目根目录下(windows 的命令行打开之后应该是 C: ,同样手动 cd 到项目根目录下);另一种方式是 VSCode 自带终端,这个终端,默认路径就是项目根目录,直接在这里操作即可。

DingTalk20171007103159-2017107

找不到VSCode 终端窗口的,可以选菜单-查看-集成终端。1.启用 type在终端输入

tsc --init

DingTalk20171007103919-2017107

这个时候,已经可以新建 ts 文件开始编码了。编写几行代码,终端输入 tsc,就会编译 type 文件并生成 js 文件。打开 tsconfig.json,添加 “watch”:true,然后再执行 tsc 命令,就可以 watch ts 文件,只要保存一下,就会自动编译并生成 js 文件。

DingTalk20171007104313-2017107

注意:这里 watch 功能,需要 tsc 进程一直在终端运行。可以把它放到后台运行,也可以开启一个新的终端。这里,我选择点 VSCode 终端窗口右上角的+号再开启一个终端进行下面的操作。木有代码提示是不行滴,我们需要配置一下让 VSCode 提供代码提示。2.安装 d.ts 文件这里采用上一节"3"的方式安装。终端里输入typings install github:Emeryao/typed-we-app -SG

等待一会,看到这个画面就成功了。

DingTalk20171007104822-2017107

可以看到,生成了 typings.json 和 typings 文件夹。试一下提示(可能需要重启下 VSCode)

DingTalk20171007105357-2017107

ts 文件的提示已经搞定了。3.解决 wxss 的提示

wxss 就是 css 的子集,只要在 VSCode 中把 wxss 的语言模式选成 css 就可以了。

DingTalk20171007105623-2017107

点这里!

4.解决 wxml 的提示

推荐安装 Visual Studio Code 插件: vscode wxml注意,安装这个插件后,千万不能为 wxml 选择语言模式!

5.解决自动编译

上面已经解决了 ts 文件自动编译成 js 文件。但是,每次开启 vscode 之后,需要在终端里面手动输入 tsc 命令,也是很烦的。推荐安装这个插件Blade Runner-Run Task When Open安装好这个插件之后,在 VScode 里面选择菜单-任务-配置默认生成任务- tsc 构建

生成一个 .vscode 文件夹,里面有一个tasks.json 上面插件会在 VSCode 每次启动的时候,自动根据 task.json 运行一些命令(当然是运行 tsc 命令喽),这样,编译 ts 的工作就变成完全自动的了。如果看不到 tsc 构建这个选项,可能需要打开一个 ts 文件后再进行上述操作。ts 文件编译成 js 文件后,微信开发者工具也会自动的编译 js 文件。至此就大功告成了。

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2017-10-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序猿DD

Jenkins:配置信息变更历史

作者:sparkdev 出处:http://www.cnblogs.com/sparkdev/ 像 Jenkins 这样的系统,使用的过程就是配置文件变更的过程...

26950

如何安装NeoVim和使用vim-plug安装相关插件?

如果您是系统管理员或软件开发人员,那么你每天都需要使用的工具中一定有一种强健的文本编辑器。您很可能已经使用过vi或vim编辑器,它们已经在Unix和Linux社...

1.2K30
来自专栏dotnet & java

这可能是最low的发布dotnet core站点到centos7教程

不得不说:我在chrome上写了好长一段,贴了23张图,然后一个crash。。我想说我电脑上的chrome已经crash太多次了 以后一定要搞离线编辑的。

9730
来自专栏慎独

如何在Github上给别人的项目贡献代码

15140
来自专栏网商云

快速搭建企业私有网盘nextcloud

新账号关联我们公司购买腾讯云产品,有优惠哦!联系电话:13430587834(微信同号)

2.1K80
来自专栏菩提树下的杨过

spring cloud 学习(8) - sleuth & zipkin 调用链跟踪

业务复杂的微服务架构中,往往服务之间的调用关系比较难梳理,一次http请求中,可能涉及到多个服务的调用(eg: service A -> service B -...

62980
来自专栏哈雷彗星撞地球

Mac 下安装node.js

Node.js 是一个用Chrome's V8 JavaScript engine 构建的 JavaScript 运行时框架。Node.js 使用事件驱动、非阻...

22150
来自专栏Python攻城狮

Django教程(一)- Django视图与网址1.简介2.环境搭建3.安装pycharm4.Ubuntu下 正确安装VMware Tools5.Django主要模块6.Django基本命令7. Dj

Django 是用Python开发的一个免费开源的Web框架,可以用于快速搭建高性能,优雅的网站!

16320
来自专栏小白课代表

数据库 | MySQL 5.7 安装教程

41340
来自专栏大前端开发

如何在mpvue中正确的引用小程序的原生自定义组件

最近,很多人给我留言,问我说怎么在mpvue项目中引入小程序原生框架中的自定义组件。

44320

扫码关注云+社区

领取腾讯云代金券