Chen's Blog

TypeScript 进阶：给第三方库编写声明文件

2016-11-30T14:15:45+00:00

知道了 TS 项目的结构信息之后，编写代码是非常容易的。没那么容易的应该是怎么样使用第三方或者是项目原有的 JS。今天我们来说一说。本文会涉及到大量原来我们在 JS 中经常使用的“奇技淫巧”在 TS 中的实现，值得一读。

第三方库使用的关键：d.ts 文件

TS 目前支持三种文件格式：.ts .tsx 和 .d.ts，分别是普通的 ts 文件，主要用于 React 支持的 tsx 文件和声明（declaration）文件。dts 文件会参与编译，但不会输出任何代码，它的主要作用是为其他 JS 文件提供类型声明。比较像 C C++ 的头文件。

TSC 内置的 d.ts

默认情况下我们每个 TS 项目都包含了至少一个 dts 文件。为什么这么说呢，我们可以测试一下。

在 index.ts 中输入下面的代码

var array = [1,2,3];
array.forEach(i=>console.log(i));

在 forEach 上右击，选择“转到定义”。你用的是记事本，没有右键菜单？那就想象吧。IDE 会打开一个 “lib.d.ts” 文件。你会看到一些这样的代码：

interface Array<T> {

    // 一些其他代码

    /**
      * Performs the specified action for each element in an array.
      * @param callbackfn  A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.
      * @param thisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
      */
    forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
}

在 lib.d.ts 中定义了 Array 这种类型拥有的属性和方法。lib.d.ts 中定义了数组有一个 forEach 方法。它需要至少一个参数：callbackfn，第二个参数 thisArg 是可选的，类型是任意的 Object。

lib.d.ts 是被 TSC 默认包含的，它里面定义了 JavaScript 的公共库，如 Array、Math、RegExp 等。除了 JS 公共库，它里面还包含了 HTML DOM 的类型定义，比如 window、document、DOMParser 等等。这样的默认设定可以满足大部分 TS 开发的需求。

指定项目需要的公共库

你可能会问，如果我开发的是一个 NodeJS 应用，我是不希望有 DOM 的 API 的，因为运行时肯定会报错。TSC 有对应的解决方案。你可以在 tsconfig.json 中通过 lib 指定需要包含的 libs。没有指定时，它的值相当于 target 语言版本 + dom。

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "lib": [
            "es5",
            "dom"
        ]
    }
}

我们可以通过指定 lib 为 es5 或者 es2015 表示 NodeJS 这种没有 DOM 的开发环境。lib 的可选值非常多，TS team 针对当下的 JS 开发环境，对 es2015 的库进行了细分，让开发者可以方便的使用部分 es2015 中的库，比如可以通过添加 es2015.promise 来增加 Promise 支持。

第三方库的 d.ts

知道了 JS 公共库的定义方式，其他第三方库也是一样的道理。社区中已经有大量常用库的 dts 文件，我们可以根据需要下载使用。但是社区中的 dts 五花八门，良莠不齐。为了更好的让他们为我所用。我们还是需要了解一些编写 dts 的技巧，这样遇到不符合我们需求的 dts 文件，我们可以对他们稍加修改。对于没那么热门的库，自己编写 dts 就尤为重要了。

为 jQuery 编写 d.ts

jQuery 作为瑞士军刀一样的库，大家已经非常熟悉了。我们来尝试为它写一个 dts。选它的原因当然是因为它够复杂！

dts 中可以只包含自己需要的功能

如果我们只是希望在我们的项目中使用某个库，我们可以只写我们需要的部分。比如我们只希望用 jQuery 在 DOM Ready 的时候执行我们的函数，比如在 index.ts 中加入下面的代码：

$(function(){
  console.log("DOM Ready!");
});

TS 需要知道 $ 是一个全局函数，接收一个函数作为参数。我们在项目根目录新建一个 jQuery.d.ts 文件。

declare function $(callback:Function):void;

这里声明了一个 function $，接收一个类型为 Function 的参数，没有返回值。编译项目，没有问题，下班回家！

这一切是怎么工作的呢， tsconfig.json 中我们没有指定 files 项目目录中的 jQuery.d.ts 就被包括在了项目中。它告诉编译器在运行环境中 JS 会定义一个名为 $ 的全局函数。TSC 会根据这个声明来验证其他 TS 中 $ 的调用是否满足定义。比如 $(123) 将会报错，因为 123 不是一个函数。

重载的声明方式

我自己都看不下去了，这根本不是 jQuery，连 CSS Selector 都不支持。通常 jQuery 的使用场景是这样的：

var button = $("#id");
var color = button.css("color");
button
    .css("height","20px")
    .click(e=>{
        console.log("Click!");
    });

编译会有大量报错信息，因为我们之前定义的 $ 只能接受一个 Function 而且没有返回值。为了支持 CSS Selector 我们让 $ 支持多种调用方式，一般语言中叫做 “重载” 。

declare function $(callback:Function):void;
declare function $(selector:string):any;

这里我们重复声明了 $，TSC 会根据 $ 的参数类型自动匹配函数的返回值。这里我们给 $ 增加了接收一个 string 类型参数的重载，它返回一个 any 类型的结果。但在真实的 JS 中，它会返回一个 JQueryElement 有 css、click 等方法。所以我们继续完善这个 dts。

Interface 声明

我们先定义一个 interface 叫做 JQueryElement，并添加对应的方法。

interface JQueryElement {
    click(Function): JQueryElement;

    css(name: string): string;
    css(name: string, value: any): JQueryElement;
}

declare function $(selector: string): JQueryElement;

针对可以链式访问的方法返回类型同样设置成 JQueryElement，值得注意的是 css 这个方法也应用了刚刚说的重载，根据参数的数量返回不同的类型。最终我们把 $(selector: string) 的返回值改成 JQueryElement 回去看 index.ts 中的代码，已经没有报错信息了。

复杂类型的变量声明

jQuery 远没有这么简单，比如使用频度跟 Selector 差不多的还有它对 XHR 的封装。

$.get("http://domain.com/data", data => { 

});

$.get("http://domain.com/data", { param: 1 }, data => { 
    
});

此时 $ 其实已经不是一个简单的 Function 了，它同时还是一个包含属性的 Object。于是我们需要给它单独定义一个 interface 来满足它的各种特性。我们先把刚刚写的 function 形式转化成 interface 形式

interface JQueryVariable {
    (callback: Function): void;
    (selector: string): JQueryElement;
}

declare var $:JQueryVariable;

我们可以简单的通过定义一个没有名字的方法来告诉 TSC，这个类型的变量是一个 Function。然后我们生命一个类型是 JQueryVariable 的变量 $。

此时，为 $ 添加 get 方法就很容易了，完成后的效果如下

interface JQueryVariable {
    (callback: Function): void;
    (selector: string): JQueryElement;

    get(url:string, success:Function);
    get(url:string, data:any, success:Function);
}

回调函数的处理

在上面的 dts 中所有的回调函数我都用使用了 Function 类型，但在实际项目中，应该尽量避免。它起不到任何约束或者智能提示的作用。

稍微总结一下，在 TS 中，函数的类型一般有下面几种表示方式：

// 直接声明
declare function name():void;

// interface 形式
interface Callback {
    ():void;
}
declare var name:Callback;

当然还有最常用的

// lambda 表达式方式
declare var name:() => void;

给回调函数指定类型时，最常用的是 lambda 表达式方式，毕竟写起来比较简单。但是当一个回掉函数类型需要被重用，或者回掉函数需要比较丰富的注释时，还是更加推荐 interface 的写法。

interface JQueryAjaxCallback {
    /**
     * @param data 服务器返回的数据
     * @param xhr 原始的 XMLHttpRequeset 对象
     */
    (data:any,xhr:XMLHttpRequest):void;
}

interface JQueryVariable {
    (callback: Function): void;
    (selector: string): JQueryElement;

    get(url:string, success:JQueryAjaxCallback);
    get(url:string, data:any, success:JQueryAjaxCallback);
}

待续…

本文是我在微软 Ignite 2016 的一个演讲的文字版。这里附上 PPT 和部分实例代码，当然主要代码已经包括在了文章中。

Ignite China 2016 TypeScript Session PPT

Ignite China 2016 TypeScript Session Demo

TypeScript 第一步

2016-11-22T14:15:45+00:00

不少小伙伴 (基友😏) 开始用 TS 了, 但现在的 JS 项目复杂度, 已经远不是 TS 刚出现时候的程度了. 各种第三方库,各种加载库(webpack, AMD, UMD, SystemJS, CommonJS), 各种运行环境 Node, Browser, 各种 JS 语言版本 es3 es5 es6 es2015 es2017. 还有 jsx 这种语言. 古人云:能用 JS 的地方就能用 TS. 那么, 怎么用呢. 今天咱们就来说一说.

第一步当然还是搭建一个简单的开发环境.

安装 TypeScript

可以执行 npm install typescript -g 来安装 TypeScript. 安装后你就能使用 tsc 命令了. 用来将 TS 文件编译成 JS 文件. 我们先不管它,接着进行下面的步骤.

TypeScript 项目结构

tsconfig.json

TS 项目是通过 tsconfig.json 来定义的. 很多时候如果你的 IDE 没有很好的进行智能提示,一般是没有添加 tsconfig.json

在命令行中执行 tsc --init 可以在当前目录中快速创建一个 tsconfig.json 文件.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    }
}

compilerOptions 编译选项

先说一下对 TS 项目来说最重要的两个设置

module 定义生成的 js 中应该采用什么模块化组织方式. 可选的值有 none, commonjs, AMD, UMD, System 和 es2015. 在 TS 中默认使用 es2015 的模块组织形式, 通过指定 module 你可以将他们转化成自己熟悉的组织方式.
target 定义生成的 JS 代码版本, 可选 es3, es5 和 es2015. 你可以根据自己的运行时 JS 版本进行选择.

注意: 因为 ES 不同版本的公共库不一致, 所以三个 target 有些语法和库上的差异. 比如 es3 不支持 getter setter, es5 默认没有 Promise. 针对库不可用的情况, 我们可以通过添加 d.ts 的方式来使用.
其他编译选项可以参考: TS 编译参数(官方英文) 或者 TS 编译参数(社区中文)

其他配置项

默认情况下, TS 项目会包含该目录下所有的 ts, tsx, .d.ts 文件. 我们可以通过 files, include 和 exclude 来指定哪些文件应该在项目中.

{
    "compilerOptions": {
    },

    "files":[
        "a.ts",
        "b.ts"
    ],

    "include": [
        "src/**/*"
    ],

    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

files 一般单独使用, 穷举中所有要包含的 ts 文件, 我觉得, 定这么个规则还是挺需要勇气的. 在社区吐槽了 n 年后, TS team 才终于加上了 include,exclude.

现在你已经大致了解 TS 项目是什么样子的了. 我们接下来按照 JS 发展的历史, 从简单到复杂来介绍用 TS 如何更爽的开发 web 应用.

传统浏览器运行环境

在传统的浏览器中, JS 加载过程是由浏览器控制的. 说是控制, 但其实非常简单粗暴. 按照先后顺序阻塞加载. 造成的结果一般是浏览器会空白一段时间, head 里所有的 JS 加载完成后, body 才会开始渲染. 但噩梦还没结束, “经典” 的 web 开发, JS 是无处不在的, 两个 div 之间加个 script 也很常见. 然后页面再卡一段时间😩.

因为没有模块化的组织方式,页面要加载哪些 JS 文件都是手动写在 html 中的, 而且顺序还不能错 😩. 这就是 tsconfig 最先支持 files 的原因 (再次吐槽没有 include 和 exclude ).

一个最基本的 TS 项目

我们将 tsconfig.json 最简化

{
    "compilerOptions": {
        "target": "es5"
    }
}

添加一个 index.ts 我们就可以写代码了.

var body = document.body;
var div = document.createElement('div');
div.textContent = 'Hi TS';
body.appendChild(div);

添加一段文字到 body 中. 这段代码根本不像 TS 啊, 是的, 毕竟 TS 是对 JS 的扩展, 写 JS 当然是没有任何问题的. 但是在 TS 中, 借助强大的类型推倒(推导)功能, 编译器其实知道 body 是一个 HTMLElement, div 是一个 HTMLDivElement 的. 至于为什么, 我们后面介绍 d.ts 的时候再说.

我们在命令行中执行 tsc 编译这个 TS 项目. 当 tsc 命令没有指定任何参数时, 它将会在当前目录寻找 tsconfig.json 并按照里面的配置编译项目中的 TS 文件.

在这个 TS 文件中我们没有写任何的 export 那么 TSC 会认为它是一个传统的 JS 文件. body 和 div 都是全局变量. 当我们再添加一个 TS 文件时, 我们在 IDE 中是能够收到 body 和 div 的智能提示的.

我们再添加一个文件 date-picker.ts.

var h1 = document.createElement('h1');
div.appendChild(h1);

编译, 没有任何问题.

每次执行 tsc 命令是一件挺麻烦的事情. 我们可以给 tsc 命令加一个参数 -w, tsc 将会自动监听文件变化, 自动进行编译.

经常遇到有开发者问, 我怎么在页面的 script 中使用 TS 定义的变量啊? 答案是, 直接用就行了. 至于如何在 TS 中使用在 script 标签中定义的变量. 我们还是等到介绍 d.ts 的时候说.

命名空间 namespace

即便在远古 JS 开发时代, 大家也是不希望有变量名污染的, 不然项目打(大)起来就是灾难了.

TS 提供了 namespace 关键字来更好的管理 class 变量名等.

在 date-picker.ts 中我们定义下面的代码

namespace components {
    // 公开变量
    export var ready = false;
    // 局部变量
    var count = 0;
    export class DatePicker { 
        constructor(private target: HTMLElement) { 
            count++;
        }

        popup() { }
    }
}

在 index.ts 中可以这样用

var componentReady = components.ready;
var componentCount = components.count; // 错误
var datePicker = new components.DatePicker(div);

namespace 中的局部变量外界是无法访问的, 可以配合 export 关键字公开其访问级别.

至于 namespace 是怎么实现的, 我们看一下生成的代码就再清楚不过了.

var components;
(function (components) {
    components.ready = false;
    var count = 0;
    var DatePicker = (function () {
        function DatePicker(target) {
            this.target = target;
            count++;
        }
        DatePicker.prototype.popup = function () { };
        return DatePicker;
    }());
    components.DatePicker = DatePicker;
})(components || (components = {}));

从这段 JS 我们也能看出另外一个特性, 就是同名的 namespace 是可以分布在不同的文件中的. 所有 export 的属性都会合并到这个 namespace 中.

此外, namespace 是能够嵌套的, 下面的代码都是合法的

namespace components { 
    export namespace web { 
        export var form: HTMLFormElement;
    }
}

namespace components.electron { 
    export var form: HTMLFormElement;
}

NodeJS 以及其他模块化组织的项目

近几年 NodeJS 异军突起, 凭借良好的群众基础, 迅速占领了大片乡村, 有要与 PHP Java 大军决一死战的意思. 也圆了很多小伙伴的全栈梦. 确实, 谁让浏览器现在还只认 JS 呢.

NodeJS 所在的环境跟浏览器有非常大的不同. 所有的 JS 都在运行时本地. 代码加载起来没有任何障碍. 所以 NodeJS 采用了 CommonJS 组织代码. 每个 JS 文件都是一个 module, 通过 exports.xxx = xxx 来公开属性, 用 require 加载其他 JS, 加载过程是同步阻塞的. 总的来说 CommonJS 是一种比较简单的加载方式.

让我们把 tsconfig.json 稍加修改,添加 "module": "commonjs".

date-picker.ts 改为

export var ready = false;

var count = 0;
export class DatePicker { 
    constructor(private target: HTMLElement) { 
        count++;
    }

    popup() { }
}

区别于普通 CommonJS 的导出方式, TS 直接在需要导出的变量 / class 前加 export 即可.

在 index.ts 中引用 DatePicker 的写法有很多, 先写一个经典的

import components = require('./date-picker');
var datePicker = new components.DatePicker(null);

import + require 是 TS 最早支持的包引用方法, 跟 CommonJS 非常像. 随着 ES2015 的确定, TS 中越来越多的语法开始跟 ES2015 取齐. 所以你还可以这么写

import * as components from './date-picker';
var datePicker = new components.DatePicker(null);

或者

import { DatePicker } from './date-picker';
var datePicker = new DatePicker(null);

因为我们在 tsconfig.json 中指定了 module 为 CommonJS 生成的代码就是 CommonJS 风格的

"use strict";
var date_picker_1 = require("./date-picker");
var datePicker = new date_picker_1.DatePicker(null);

此时我们将 tsconfig 的 module 改成其他值测试一下

AMD:

define(["require", "exports", "./date-picker"], function (require, exports, date_picker_1) {
    "use strict";
    var datePicker = new date_picker_1.DatePicker(null);
});

ES2015:

import { DatePicker } from './date-picker';
var datePicker = new DatePicker(null);

完美!

至此, 你已经了解了 tsconfig.json, 知道如何用 TS 编写传统的浏览器项目和模块化组织的 TS 项目了. 接下来我会介绍入门 TS 的最大障碍: 如何使用现有的 JS 库.

Angular 2 two-way binding property

2016-10-27T14:15:45+00:00

希望有一个 Pager 组件，能够绑定 total 和 current 效果如下面的代码。

<mx-pager [total]="totalPage" [current]="currentPage"></mx-pager>

对应的 Pager 代码应该是这样的

export class PagerComponent {
	
    @Input()
    total: number;

    @Input()
    current: number;
}

但是，我们的 Pager 不应该只是一个展示数据的组件，当用户点击新 page 的时候，我们需要在父组件中执行相应的动作。也就是说，current 属性需要双向绑定。

Twe-way binding property

在 ng2 中可以通过 Output 装饰器来实现双向绑定属性。

首先添加一个 currentChange property。类型为 EventEmitter<number> 我们将通过这个 emitter 向外部派发 current 属性改变的事件。

EventEmitter<number> 有一个泛型参数，需要跟 current 属性的类型一致。表明 emitter 在 call 事件监听方法时传递的参数类型。

export class PagerComponent {
	
    @Input()
    total: number;

    @Input()
    current: number;

    currentChange = new EventEmitter<number>();
}

然后跟 @Input() 类似，为 currentChange 添加 @Output() 装饰器

@Output
currentChange = new EventEmitter<number>();

当 current 变化的时候, 我们只需要执行 currentChange 的 emit 方法即可。

this.currentChange.emit(someValue);

一开始的 template 代码可以改为双向绑定了：

<mx-pager [total]="totalPage" [(current)]="currentPage"></mx-pager>

使用 Accessor 提高一致性

为了保持一致性，我习惯将 emit 的调用跟 current 的赋值过程结合起来。将 current 改成 accessor。

private _currnet:number;

@Input()
get current(){
    return this._currnet;
}
set current(value:number){
    if(value === this._currnet)
        return;

    this._currnet = value;
    this.currentChange.emit(value);
}

这样在组件内部，我们只需要关心 current 即可，在赋值过程中 currentChange 事件会自动触发。

Have fun!

3) VS Code 插件示例，一个 TypeScript 即时预览插件

2016-10-15T14:15:45+00:00

1) VS Code 插件创建与发布
2) VS Code 插件项目结构与配置文件
3) VS Code 插件示例，一个 TypeScript 即时预览插件

源代码：https://github.com/imzc/vscode-live-code

插件目标

这个插件最终的效果，希望是能够在编辑 TypeScript 时，能够即时在 HTML 中运行，看到运行效果。

为了实现这个目标我们需要解决几个问题

插件需要在编辑 TypeScript 时激活
需要在用户输入的时候即时编译 TypeScript
需要注册 command 在 VS Code 中打开一个 WebView
在 WebView 中加载编译后的 JavaScript

创建项目

参考 VS Code 插件创建与发布创建一个 TypeScript 项目。

添加 command，修改 activationEvents

如图添加一个 command 并添加一个 activationEvent，当文件语言为 TypeScript 的时候激活插件。

同时我们还添加了一个快捷键 ctrl+k, ctrl+t 来快速调用这个 command。

在 scr/extensions.ts 中进行相应的修改，并添加一个 outputChannel 来往输出面板中打印消息，方便我们输出信息和调试。

调试并打开一个 TypeScript 文件，可以看到插件激活，输出面板显示出来。

处理用户输入

VS Code 提供了 vscode.workspace.onDidChangeTextDocument 方法来处理文件变化。这个方法跟 File Watcher 的区别是，用户没有执行 save 的时候我们也能收到消息，更加符合我们的需求。

在回调函数中我们判断一下当前文件的语言，排除不需要处理的文件。然后打印一个消息。

处理 TypeScript 编译

TypeScript 提供了丰富的 API 让我们能够用编程的方式编译 TypeScript。

首先我们引入 typescript 库。

注意将 package.json 中的 typescript 库从 devDeps 转移到 deps 中。

今天我们用到的是 ts 提供的最简化的一个 API ts.transpileModule, 它能够将 TS 源码直接转化为 JS。我们将转化的输出暂时输出到输出面板中。

运行后，我们修改一个 ts 文件，可以看到即时生成的 JavaScript。

打开一个 WebView

处理完了上面的流程，终于来到最关键的预览环节。这里用到 vscode 的另外一个 API

vscode.previewHtml

vscode.commands.executeCommand(cmd:string, ...params:object[]) 用来执行 vscode 中支持的 command，包括内置的和其他插件扩展的，都可以。

这里我们使用的是 vscode.previewHtml,这个 command 支持打开一个 html url 在 vscode 进行展示。但处于安全原因，vscode 对 url 进行了限制，只能支持 file 和插件注册的 url schema。在这里我们使用 livecode作为我们预览的 url schema，最终交给 vscode 的 url大概是这样的：livecode:/c:/work/demo/test.ts?file:///c:/work/demo/test.ts 然后我们会注册这个 schema 并编写代码根据这个 url来生成对应的 html 代码。

我们先改一下 preview command 对应的代码，让它打开一个 webview

构建 html

我们使用 TextDocumengContentProvider 来给 webview 生成 html 代码。我们需要实现 provideTextDocumentContent(uri: Uri): Thenable<string> 根据 url 生成 html 代码。

我们添加一个文件 LiveCodeDocumentContentProvider.ts 来实现

provideTextDocumentContent 中我们简单的构建了一个 html 文档，其中 body 部分我们会添加一个 script tag。用来承载编译后的 JavaScript 代码，我们会用一个 function 包裹 TS 编译的逻辑，将它传递给 provider，也就是这里看到的 this._render

回到 extensions.ts 我们来注册 livecode 这个schema。首先引入 LiveCodeDocumentContentProvider，实例化，将TS compile function 传给它，然后注册。

最后，当TS文件变化时，通知 provider。

我们来运行一下。可以看到 TypeScript 运行的效果，我们将它拖到右侧，修改代码，可以看到实时的效果

在右侧编辑区域预览

我们稍微修改一下 previewHtml 的参数，让它在右侧的编辑区域打开，并在 title 中显示 “Preview”

另外，当我们代码中出现问题的时候，预览窗口中没有任何输出。我们稍微修改一下 compileTypeScript 在 JS 外层包裹一层异常捕获代码。

至此，我们完成了一个 TypeScript 插件的基本功能。但是其实还有很多问题值得进一步深入。

项目级别的预览，TS 之间相互引入
第三方库引入
Node.js 环境下的实时执行
等等

2) VS Code 插件项目结构与配置文件

2016-10-14T12:12:45+00:00

VS Code Extension 项目结构

打开 yo code 创建的项目，我们能看到下面的目录结构。

展开之后得到的是下面的层级结构（我省略了大部分用于测试的 node_modules）。

├─.vscode
│      launch.json
│      settings.json
│      tasks.json
│          
├─src
│      extension.ts
│      
├─test
│       extension.test.ts
│       index.ts
│      
├─node_modules
│  ├─@types
│  │  ├─mocha
│  │  │      index.d.ts
│  │  │      
│  │  └─node
│  │          index.d.ts
│  │          
│  ├─typescript
│  │                  
│  └─vscode
│     │  thenable.d.ts
│     │  tslint.json
│     └─ vscode.d.ts     
│          
├─out
│  └─src
│     └─  extension.js
│  
│  .gitignore
│  .vscodeignore
│  package.json
│  README.md
│  tsconfig.json
└─ vsc-extension-quickstart.md

package.json 是整个 extension 的配置文件。它除了描述 extension 的基本信息，如名称，作者版本等外，更重要的是描述插件对 vscode 所做的扩展，注册用户可以执行的命令，标记该 extension 应该何时启动。
src/extension.ts 是插件的入口，这个文件 export 了 activate 方法，在插件被激活时，vscode 将调用这个方法，执行用户代码。在这个例子中我们在这里用 vscode.commands.registerCommand 注册了 extension.sayHello 这个 command 的具体实现。显示一个消息：Hello World。
.vscode 这里是 vscode 的项目文件。其中
- launch.json 定义了当前项目的调试方式。
- tasks.json 定义了编译动作。
- settings.json 定义了针对当前项目的编辑器设定。例如排除不想要显示的文件。
node_modules 中绝大多数 package 为 test 的 devDependencies。与插件开发相关的是 typescript、 vscode 和 @types。
- 这里引入一个 typescript 的原因是为了更好的限定开发中使用的 TS 版本和 JS 的运行环境。比如，在插件中是不能使用 window 对象的，通过在 tsconfig.json 中指定 lib 即可。
- vscode 主要是为了引入 vscode package 的 TypeScript 定义。让开发体验更加友好。
- @types 是 TS 2.0 引入的第三方 js 库的 TypeScript 定义文件安装方式，这里引入了 nodejs 和 mocha 的定义文件。
.vscodeignore 指定在发布插件时需要排除的文件。

大体了解了整个项目的结构，让我们来看一下实际运行的效果。在 VS Code 中直接按 F5 即可启动调试。VS Code 会启动一个新的 VS Code 窗口，在这个窗口中会额外加载我们的插件项目以便我们进行测试。

我们按 F1 或者 ctrl+shift+p 输入 hello 就能发现我们刚刚注册的 command。

执行这个 command 可以看到此时，我们项目调试控制台输出 Congratulations, your extension "vscode-extension" is now active! 插件的 activate 方法被调用。 VS Code 显示一个 Hello World 信息。

你可能会问，为什么我们的代码在我们真正执行了 command 的时候才会被激活，这是 VS Code 的一个优化。 vscode 可以直接根据 package.json 来展示插件定义的 command，而不必执行插件的代码，保证 vscode 的启动速度。在这个插件模板中，我们注册了一个 title 为 Hello World 的 command。 activationEvents 为 onCommand:extension.sayHello, 仅当我们执行这个 command 的时候，插件才被激活。 VS Code 才会真正开始执行我们的代码。

package.json

字段定义

名称	必需	类型	描述
`name`	是	`string`	插件扩展的名称, 全部是小写字母，并且不能有空格.
`version`	是	`string`	参考Semver. 例如: `1.0.0`
`publisher`	是	`string`	发布者名称
`engines`	是	`object`	包含`vscode`字段的对象，定义所需环境的版本。例如 `^1.5.0` 表示需要1.5.0或者更高版本.
`displayName`		`string`	插件显示的名称.
`description`		`string`	插件的描述文本.
`icon`		`string`	插件使用的图标，大小为 128*128.
`main`		`string`	插件入口的相对路径，当插件启动时将调用入口文件的`activate`方法.
`categories`		`string[]`	插件的分类，常用分类有: `[Languages, Snippets, Linters, Themes, Debuggers, Other]`.
`contributes`		`object`	插件扩展点的描述对象，详见 contributions.
`activationEvents`		`string[]`	插件激活事件的描述数组，详见 activation events.
`keywords`		`string[]`	插件的关键词，准确的关键词有助于更好的找到插件.
`dependencies`		`object`	插件依赖的 `Node.js` 库. 参见 npm dependencies.
`devDependencies`		`object`	插件开发环境下依赖的 `Node.js` 库. 例如，如果插件使用TypeScript编写，则开发环境需要依赖 `typescript`. 参见 npm devDependencies.
`extensionDependencies`		`string[]`	插件依赖的其他插件的id. 插件id为 `${publisher}.${name}`. 例如: `egret.text-tools`.
`scripts`		`object`	详见 npm scripts

contributes（扩展点）

扩展点允许开发者在 vscode 中自定义一些扩展功能。

contributes.commands

自定义命令 command 。定义的命令可以在命令面板(Command Palette)中找到并执行。

Note: 当命令通过快捷键或者命令面板被执行时, 将派发 activationEvent onCommand:${command}.

可使用下列字段：

名称	必需	类型	描述
`command`	是	`string`	表示命令的唯一id.
`title`	是	`string`	表示命令的名称，此属性将显示在命令面板中.

例子

...
"contributes": {
	"commands": [{
		"command": "extension.sayHello",
		"title": "Hello World"
	}]
}
...

contributes.keybindings

自定义快捷键 keybinding。可以自定义命令执行的按键绑定。

Note: 可以定义不同操作系统平台的快捷键。

Note: 当命令通过快捷键或者命令面板被执行时, 将派发 activationEvent onCommand:${command}.

可使用下列字段：

名称	必需	类型	描述
`command`	是	`string`	快捷键绑定的命令的id
`key`	是	`string`	快捷键的按键组合，可以的按键的组合字符串参见附录1 .
`win`		`string`	在windows平台下的按键组合，如果用户在windows下，此属性将覆盖`key`字段指定的按键组合.
`mac`		`string`	在mac平台下的按键组合，如果用户在mac下，此属性将覆盖`key`字段指定的按键组合.
`when`		`string`	快捷键何时被触发的表达式，可用的属性值参见附录2 .

附录1 `key`字段可用的按键组合字符串规则

按键规则一般由组合键 + 其他按键组成。

组合按键表示如下：

操作系统	组合键
MACOS X	`ctrl+`, `shift+`, `alt+`, `cmd+`
Windows	`ctrl+`, `shift+`, `alt+`, `win+`

Note: 特殊的可以使用 ctrlcmd 表示windows下的ctrl, mac下的cmd

其他按键表示如下：

f1-f15, a-z, 0-9
`, -, =, [, ], \, ;, ', ,, ., /
left, up, right, down, pageup, pagedown, end, home
tab, enter, escape, space, backspace, delete
pausebreak, capslock, insert

使用空格分割的按键序列，例如(ctrl+k ctrl+c)，表示先按ctrl+k，再按ctrl+c 才能触发该快捷键。

如果要使某一命令既可以按ctrl+k触发，又可以按ctrl+c触发，请定义两组keybinding，command相同，但是key字段不同。

附录2 `when`字段可用的字符串

when字段可以使用 !, &&, ==, != 等表达式限定条件。如

!inDebugMode , editorTextFocus && editorLangId == 'ts' 都是可用的表达式。

editorFocus 编辑器获得焦点时
editorTextFocus 文本编辑器获得焦点时
editorLangId 表示编辑器的语言id，editorLangId 通常对应编辑器对应文档的扩展名
inDebugMode 表示启动调试时

例子

定义命令 "extension.sayHello" 的windows下快捷键为 Ctrl+F1，mac下快捷键为 Cmd+Shift+F1 :

...
"contributes": {
	"keybindings": [{
		"command": "extension.sayHello",
		"key": "ctrl+f1",
		"mac": "cmd+shift+f1",
		"when": "editorTextFocus"
	}]
}
...

contributes.configuration

提供可设置的选项，用户可以在全局或者工作空间的设置中修改这些设置信息。

插件的开发者需要提供一套 JSON schema 来描述这些可以配置的选项，这样用户在修改时，能够得到编辑器的智能提示。

你可以通过下面的方法来读取用户自定义的配置信息 vscode.workspace.getConfiguration('myExtension').

例子

...
"contributes": {
	"configuration": {
		"type": "object",
		"title": "TypeScript configuration",
		"properties": {
			"typescript.useCodeSnippetsOnMethodSuggest": {
				"type": "boolean",
				"default": false,
				"description": "Complete functions with their parameter signature."
			},
			"typescript.tsdk": {
				"type": "string",
				"default": null,
				"description": "Specifies the folder path containing the tsserver and lib*.d.ts files to use."
			}
		}
	}
}

contributes.languages

提供一种新语言的信息，以便 VS Code 能够支持它的开发.

这这一节中, language 一般是指一个跟文件名相关的id (See TextDocument.getLanguageId()).

VS Code 有三种方式确定一个文件使用的开发语言，这三种方式可以独立使用

文件的扩展名 (下面说的 extensions)
文件名 ( 下面说的 filenames)
文件的第一行中的文本 (下面说的 firstLine)

最后一项 VS Code 需要的信息就是 aliases：语言的别名，这个属性值列表的第一个会作为语言的显示名称，显示在编辑器的右下角和语言选择列表中。

当用户打开了一个文件，VS Code会用这三个规则匹配文件，来确认文件所使用的语言，同时，VS Code会抛出一个 activationEvent onLanguage:${language}(例如下面例子的 onLanguage:python),来激活对应的插件。

例子

...
"contributes": {
	"languages": [{
		"id": "python",
		"extensions": [ ".py" ],
		"aliases": [ "Python", "py" ],
		"filenames": [ ... ]
		"firstLine": "^#!/.*\\bpython[0-9.-]*\\b"
	}]
}

contributes.debuggers

为 VS Code 提供一个 debug 适配器，帮助 VS Code 连接到一个外部的 debug 服务，扩展 VS Code 的调试功能。

debug 适配器运行在一个单独的进程中，与 VS Code 之间采用特定的协议来通信。你需要提供至少一个可执行的脚本来实现这个 debug 适配器。

例子

...
"contributes": {
	"debuggers": [{
        	"type": "node",
        	"program": "./debugger/out/node/nodeDebug.js",
        	"runtime": "node",
        	"enableBreakpointsFor": { "languageIds": ["javascript", "typescript", "coffeescript"] }
        }]
}
...

contributes.grammars

提供一套 TextMate grammar 来为 VS Code 添加语言支持。你需要提供，这组语法需要适配的语言 language，语法的 TextMate scopeName 值，和语法定义文件的路径

注意: 语法定义文件的格式可以是 JSON (扩展名 .json) 或 XML plist 格式 (如果扩展名不是 json 就认为是这种格式).

例子

...
"contributes": {
	"grammars": [{
		"language": "shellscript",
		"scopeName": "source.shell",
		"path": "./syntaxes/Shell-Unix-Bash.tmLanguage"
	}]
}
...

contributes.themes

为 VS Code 提供一个 TextMate theme 代码配色主题。你需要指定一个 label 表明这个主题是暗色主题还是浅色主题，还有主题文件的路径（XML plist 格式）

例子

"contributes": {
	"themes": [{
		"label": "Monokai",
		"uiTheme": "vs-dark",
		"path": "./themes/Monokai.tmTheme"
	}]
}

contributes.snippets

"contributes": {
	"snippets": [{
			"language": "go",
			"path": "./snippets/go.json"
	}]
}

contributes.jsonValidation

提供特定 json 文件的 JSON schema， url可以是插件中内置的文件，或者一个远程的url，例如 json schema store

"contributes": {
    "jsonValidation": [{ 
 		"fileMatch": ".jshintrc",
 		"url": "http://json.schemastore.org/jshintrc"
	}]
} 

更多信息可以参考 Extension Manifest File - package.json

下面，让我们来写一个即时预览 TypeScript 执行的插件。VS Code 插件示例，一个 TypeScript 即时预览插件

1) VS Code 插件向导

2016-10-13T14:42:35+00:00

我会通过几篇文章介绍一下 VS Code 的插件开发。

VS Code 使用 Node.js 来开发插件，插件运行在单独的 Node.js 进程中。你可以看这里了解更多 VS Code 插件系统的信息：

VS Code 插件创建与发布

创建项目

vscode team 开发了 Yeoman generator 帮助大家快速开始创建一个 vscode extension.

安装生成器

npm install -g yo generator-code

启动生成器

vscode 的 Yeoman 生成器会引导你创建一个 vscode extension 项目

在控制台执行:

yo code

生成器提供了空项目和若干其他项目类型的模板，可以按需选择。生成器的更多详细信息可以参考 vscode 的官方文档。我们这里使用 TypeScript 创建一个新的 vscode extension。

开发测试

我们稍后主要讲这一块

发布 extension

安装 vscode extension 发布工具 vsce

vsce 是 vscode team 开发的命令行工具，辅助开发者打包和发布 extension。

npm install -g vsce

打包插件

vsce package

package 命令可以将 extension 打包为一个 .vsix 文件，你可以用 vscode 打开它本机安装，或者将它分享给他人。

发布到 vscode Marketplace

vsce publish

你可以使用 publish 来将插件发布到 vscode 的官方市场，与全球数百万开发者分享。需要注意的是，在执行命令之前你需要注册一个 Visual Studio Team Services 账号，并对 vsce 进行一些设置。具体请参考 vscode vsce 官方文档。

我们继续看一下 VS Code 插件项目的结构与配置文件

少点光芒 - 让 Web 开发环境全面黑化

2016-08-25T14:42:35+00:00

话不多说，这里介绍怎样将开发环境尽可能变成暗色，防止眼睛疲劳。

IDE

目前主流的 IDE 都提供了主题选择，这里便不再多说。

Chrome Developer Tools

Chrome DevTools 是 Web 开发者必不可少的工具，借助一款 Extension 我们能够很容易将它改造成深色。

DevTools Theme: Zero Dark Matrix

安装步骤

安装该 Extension
打开 chrome://flags/#enable-devtools-experiments 启用 开发者工具实验性功能，重启 Chrome。
打开 Chrome DevTools, 选择 Experiments 标签, 选中 ‘Allow custom UI themes’.

重新打开 DevTools.

Windows

Windows 提供了主题机制，但是，只限于官方主题，大部分就是改改背景和 Title bar 配色，我们可以借助第三方软件实现更加定制化的主题。

比如这个仿照 Gnome Arc Theme 来做的 Windows 主题

A Theme for Windows 10 - Arc

几个前置依赖：

How to Install Custom Themes - 解除 Windows 对第三方主题的限制

OldNewExplorer - （可选）还原 Win7 的资源管理器，因为 Win 8 / 10 的 Ribbon 菜单还不支持主题。

Mac OS X

Mac OS 目前支持让 Dock 和 Menu 变反色，知道让 Finder 变深色方法的话请告诉我。

have fun!

Visual Studio Code / Egret Wing 技术架构：Wing 对 VS Code 的扩展

2016-08-17T14:42:35+00:00

系列目录

Wing 的主要使命是进行可视化的游戏开发，但 VSC 现有的插件系统并不能满足可视化开发的需求，所以 Wing 对 VSC 进行了一系列扩展。

Wing 扩展 VSC 遵循的原则

优先使用插件完成新功能
不改动 VSC 的核心架构
遵循 VSC 内部组件的注册和管理方式
保证 Wing 跟新版本 VSC 的兼容性

UI 改动

VSC 的 UI 是由一个个 Part 组成的，每个 Part 由 Workbanch 统一管理，由 WorkbanchLayout 负责布局。每个 Part 功能独立，改变布局并不会对功能产生影响。添加新的 Part 可以为 Wing 添加新的功能比如右边栏和工具栏。

取消 ActivityBar

为了使左边栏，下边栏（输出、错误窗口）和右边栏风格统一，我们在 Wing 3 的第一个版本中取消了 VSC 的ActivityBar 将它挪到了左边栏的上方。同时为下边栏添加了切换按钮，方便切换不同的面板。

添加内置控制台

早期版本的 VSC 中没有内置的控制台，这让很多开发者感到不便。所以我们在 Wing 3.0 的第二个版本中添加了内置的控制台。内置控制台派生自 VSC 的 Panel，对 VSC 本身改动非常小。只需要简单添加引用然后注册即可。在今年中 VSC 也是添加了内置控制台的功能，经过几个版本的更新，现在已经支持中文和复制粘贴，Wing 3.1 目前已经将控制台还原到 VSC 内置的版本。

添加右边栏

右边栏在可视化编辑界面中非常重要，所以我们添加了右边栏这个 Part, 并将接口通过插件 API 开放给了开发者。此次插件大赛中多款产品都使用了右边栏的功能。

Windows 下使用无边框窗口

VSC 在 Windows 系统下，标题栏和菜单栏占据了很大的空间，而且在深色主题下，整体风格不太统一。我们重新设计了顶部区域，将菜单栏和标题栏合二为一，整体风格更加统一了。

添加工具栏

工具栏集成了常用的操作按钮，这一点也是向传统 IDE 的回归，降低入手门槛。

Wing 对插件 API 的扩展

UI 扩展 API

VSC 的插件体系中没有 UI 相关的 API，让用户交互变得非常困难，为此 Wing 对插件 API 做的主要扩展就是添加 UI 相关的 API。现在 Wing 主要有两种 UI 展现方式。

数据驱动的 UI

你可以使用 wing.window.showPopup<O>(type: PopupType, store?: Store, options?: O): Thenable<Store> 来显示一个弹出窗体。store 为一个类似 JSON Schema 的 object，通过这个 object Wing 会自动创建一个表单 UI，展现给用户，用户完成输入后，将结果返回给插件。这种方式的交互，插件开发者可以不关心 Wing 的主题样式，无需编写 UI 即可完成简单的交互操作，缺点就是对 UI 的控制性比较弱。

使用 WebView 编写 UI

在 WebView 中用户可以展示自己的 HTML page，可以完成非常复杂的 UI 交互。目前在 Wing 中，插件开发者可以在弹出窗口，代码编辑器区域和右边栏中使用 WebView 设计自己的界面。

由于 WebView 是单独的进程，WebView 进程中的代码可以使用 Wing 提供的 IPC 通信与插件主进程进行通信，将 UI 跟用户的编辑器操作连接起来。

Wing 内置的 HTTP Server 就是采用了 WebView 弹窗作为 UI 的插件，由插件进程启动 HTTP Server，当用户点击插件在状态栏中的 icon 时，插件进程启动一个WebView 来展示 Server 的状态。

模板扩展 API

项目模板也是非常常用的一个功能。Wing 为 VSC 添加了新建项目的向导。通过插件可以为这个向导添加项目模板。目前 Wing 内置的十几种项目模板都是由插件实现的。其中也包含了 Egret 这样具有外部依赖，比较复杂的项目模板。

此外 Wing 还增加了文件创建模板，方便扩展新建文件的菜单，比如 Wing 3.1 内置的创建 EUI 组件的功能就是依靠这个 API 实现的，它能够同时创建两个相互关联的 EXML 和 TS 文件。

集成常用插件

Wing 集成了 Egret 开发必备的 VSC 开源插件：Chrome Debugger，并对它进行了扩展和增强。

Visual Studio Code / Egret Wing 技术架构：插件系统

2016-08-16T14:42:35+00:00

系列目录

在上一篇我介绍了 VSC 的基础架构。这篇我们来说一下对 VSC 来讲至关重要的插件系统。

为什么插件系统对 VSC 如此重要

在早期的版本中 VSC 并没有插件系统，只支持 TypeScript、JavaScript和C#的智能感知。还有其余40中语言的代码着色。所以 VSC 只是出现在微软技术的社区中。15 年 12 月份，VSC 发布了第一个支持扩展的版本。不久之后就出现了许多其他语言的支持，比如 Go 语言、C++、Java、Python、Ruby。

所以说有了核心编辑器的极速体验，加上良好的扩展能力才成就了 VSC。

VSC 支持哪些扩展

语言支持

VSC 制订了一套完善的语言支持体系，方便支持新的编程语言。

一个代码编辑器需要哪些功能来支持一种新语言

代码显示
- 代码着色
智能感知
- 代码提示
- 代码跳转
- 鼠标触碰提示
- 查找引用
- 错误提示
代码修改
- 自动补全
- 重构功能

兼容 TextMate 的代码着色分析

可以简单的将 TextMate 的语言着色配置文件拷贝到插件中，并在 package.json 中指定即可。

语言支持通用协议

VSC 约定了一种通用的通信协议来支持多种语言

由于 VSC 采用多进程的架构，语言的开发者可以使用自己熟悉的语言编写这门语言的语言服务，VSC 将采用 JSON-RPC 通信的方式跟语言服务沟通，执行用户命令，获取结果。

Debugger

同语言服务类似，VSC 开放了一组通用协议来满足不同语言不通平台的调试需求。

主题/配色方案

VSC 采用了跟 TextMate 相同的配色方案文件格式。

编辑器辅助

VSC 提供了编辑器操作 API，你能够实时获取用户输入点、当前文件代码。从而可以根据用户当前文档确定可以提供的快捷操作。比如自动添加不存在的方法等。

扩展命令

开发者可以在插件中定义自己的命令，这些命令会出现在“命令面板” 中，开发者可以通过 “ctrl/cmd + shift + p” 或 “F1” 来调用这些命令，完成复杂的操作。

插件可以使用所有的 NodeJS API，配合各种 NodeJS 库，能够完成非常有想象力的功能。

扩展菜单

VSC 提供了文件管理器菜单，编辑器菜单，文件标题菜单扩展点。方便开发者针对不同的上下文进行操作。

快捷键

开发者可以为各种自定义操作指定快捷键。

VSC 插件开发文档

Wing 插件开发文档

Visual Studio Code / Egret Wing 技术架构：基础

2016-08-15T14:42:35+00:00

系列目录

VS Code 简单介绍

Visual Studio Code (下面简称VSC) 是由微软公司开发的开源、免费、跨平台的代码编辑器，微软希望它在保持核心轻量化文本编辑器的基础上，为编辑器添加项目支持、智能感知和编译调试。

VSC Team 由著名工程师 Erich Gamma 领导，Erich 是《设计模式》作者之一，Eclipse 之父，拥有多年的 IDE 开发经验。

VSC 的前身是微软基于云端的编辑器项目：Monaco 编辑器，它作为微软云服务的一部分，提供在线编辑源代码的能力。

由于云端编辑器的种种限制，和微软近年来对Windows外平台的态度转变，微软决定由它扩展开发为一个全平台通用的代码编辑器。

VSC 技术路线

Electron

为了保护本地文件的安全性，浏览器都没有提供直接的本地文件访问权限。为了实现本地文件系统的访问，VSC 采用了 Github 的开源项目 Electron。

Electron 原名 Atom-Shell，是 Github 为 Atom 编辑器编写的一个开源框架。它将 Chromium 和 Node.js 完美融合，让开发者能用使用 HTML 来实现 App UI，用 Node.js API 来访问文件系统。

TypeScript

VSC 的主要代码都是用 TypeScript 编写，目前 VSC 的核心有 1100 多个 TS 文件，TypeScript 的语言优势为多次重构提供了保障。

纯 DOM 操作

为了保证 UI 响应速度，VSC 没有采用现有的 UI 库，大部分 UI 采用绝对尺寸，简单粗暴的避免大面积 UI 的联动刷新。

VSC 为优化性能做的努力

VSC team 做了很多工作来提高 VSC 的性能，我们来看一下：

启动速度优化

基于 HTML 技术的编辑器，受限于 Chrome 一般都会有启动速度慢的问题。除了基本的 JS / CSS 合并压缩外，VSC 还将特别常用的 ActivityBar icon 直接内嵌在了 css 中。但是即便如此，启动速度跟 Sublime Text 等编辑器还是有比较大的差距。

这里说一个技巧，当我们用 VSC 打开一个文件的时候，VSC 会默认启动一个新的 VSC 窗口，这样启动的时间比较长，我们可以通过设置全局设置项里的 "window.openFilesInNewWindow": false 来使用已经打开的 VSC 实例打开新文件，这样就几乎没有了等待的时间。

代码编辑器滚动虚拟化

让编辑器只渲染可见的部分，减小大文件编辑对浏览器的压力。同时配合 css translate3d 避免重复渲染没有改变的代码行。

着色速度优化

为了不重复发明轮子，VSC 采用了跟 TextMate 一样的代码着色分析语法。它是基于正则表达式的一套分析方案，虽然 JS 原生支持正则表达式，但为了更高的效率，VSC 使用了 C++ 编写的一套正则表达式引擎来提高效率。

多进程架构红利

前面讲的这些都只是一些小的优化，真正保证响应速度的还是多进程架构带来的优势。

VSC 的进程结构

VSC 采用多进程架构，VSC 启动后主要有下面的几个进程：

p 后台进程
p 编辑器窗口 - 由后台进程启动，也是多进程架构
- HTML 编写的 UI
  - Activitybar
  - Viewlets
  - Panels
  - Editors
  - Statusbar
- Nodejs 异步 IO
  - FileService
  - ConfigurationService
- p 插件宿主进程
  - 插件实例
    - p 插件子进程 - 如 TS 语言服务
  - 插件实例
  - 插件实例
- p Debug 进程
- p Search 进程
p 编辑器窗口

后台进程

后台进程是 VSC 的入口，主要负责管理编辑器生命周期，进程间通信，自动更新，菜单管理等。

我们启动 VSC 的时候，后台进程会首先启动，读取各种配置信息和历史记录，然后将这些信息和主窗口 UI 的 HTML 主文件路径整合成一个 URL，启动一个浏览器窗口来显示编辑器的 UI。后台进程会一直关注 UI 进程的状态，当所有 UI 进程被关闭的时候，整个编辑器退出。

此外后台进程还会开启一个本地的 Socket，当有新的 VSC 进程启动的时候，会尝试连接这个 Socket，并将启动的参数信息传递给它，由已经存在的 VSC 来执行相关的动作，这样能够保证 VSC 的唯一性，避免出现多开文件夹带来的问题。

编辑器窗口

编辑器窗口进程负责整个 UI 的展示。也就是我们所见的部分。UI 全部用 HTML 编写没有太多需要介绍的部分。

IO

项目文件的读取和保存由主进程的 NodeJS API 完成，因为全部是异步操作，即便有比较大的文件，也不会对 UI 造成阻塞。IO 跟 UI 在一个进程，并采用异步操作，在保证 IO 性能的基础上也保证了 UI 的响应速度。

插件进程

每一个 UI 窗口会启动一个 NodeJS 子进程作为插件的宿主进程。所有的插件会共同运行在这个进程中。

这样设计最主要的目的就是避免复杂的插件系统阻塞 UI 的响应。这要从JS和浏览器说起。

在大部分的操作系统中，显示器的刷新频率是 60 帧每秒，也就是说应用需要在 16.7 毫秒内完成所有的计算和 UI 刷新。HTML DOM 的速度向来为人诟病，留给JS的时间就更少了。所以要在这么短的时间内完成所有指令才能保证 UI 的响应速度。

但是事实上我们很难在这么短的时间内完成诸如对一万行代码进行着色这种任务。这就需要我们将这种耗时比较长的任务转移到其他的线程或进程来做，等耗时任务结束，再将结果返回给 UI 进程即可。

VSC 最近的版本中将所有的语言支持都改成了插件。包括之前在 UI 进程用 Web Worker 实现的 Markdown 语言支持。后面我会介绍一个典型的语言服务的工作方式。

但是将插件放在一个单独进程也有很明显的缺点，因为是一个单独的进程，而不是 UI 进程，所以没有办法直接访问 DOM 树，想要实时高效的改变 UI 变得很难，在 VSC 的扩展体系中几乎没有对 UI 进行扩展的 API。

Debug 进程

Debugger 插件跟普通的插件有一点区别，它不运行在插件进程中，而是在每次 debug 的时候由UI单独新开一个进程。

搜索进程

搜索是一个十分耗时的任务，VSC 也使用的单独的进程来实现这个功能，保证主窗口的效率。

将耗时的任务分到多个进程中，有效的保证了主进程的响应速度。

Add Headers for Static Files with ASP.NET Core

2016-08-10T14:42:35+00:00

Sometimes we need to add some headers for static file requests.

For example, if we want to allow third-party website to access images or audios through XHR (it’s usefull when you want to do some custom decoding with these files). You need to add Access-Control-Allow-Origin: * (relpace * with your domain if you don’t realy want to allow any domain to access).

If you use Microsoft.AspNetCore.StaticFiles to handle static file requests, you should find app.UseStaticFiles() in startup.cs.

Then what we need to do is add an Option like this:

app.UseStaticFiles(new StaticFileOptions()
{
    OnPrepareResponse = context =>
    {
        context.Context.Response.Headers["Access-Control-Allow-Origin"] = "*";
    }
});

Done!

StaticFileOptions has some other properties to customize the StaticFileMiddleware behavior.

//
//     Used to map files to content-types.
public IContentTypeProvider ContentTypeProvider { get; set; }
//
//     The default content type for a request if the ContentTypeProvider cannot determine
//     one. None is provided by default, so the client must determine the format themselves.
//     http://www.w3.org/Protocols/rfc2616/rfc2616-sec7.html#sec7
public string DefaultContentType { get; set; }
//
//     Called after the status code and headers have been set, but before the body has
//     been written. This can be used to add or change the response headers.
public Action<StaticFileResponseContext> OnPrepareResponse { get; set; }
//
//     If the file is not a recognized content-type should it be served? Default: false.
public bool ServeUnknownFileTypes { get; set; }

Have fun!

CSS Style inherit

2016-08-02T14:42:35+00:00

Take a look at this

h1{
    color: red;
}

.content h1{
    color: green;
}

.content .header h1 {
    color: blue;
}

.content .header{
    color: purple;
}
.content .header h1 {
    color: inherit;
}

The h1 will take the color purple instead of green.

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

That’s it.

Run dotnet core on Azure.cn

2016-07-15T14:42:35+00:00

.net core RTM 了，Azure global 已经提供支持，但是慢半拍的 Azure 中国 WebSites 目前并不支持 asp.net core。

Orz

经过各种尝试，终于发现了临时解决的办法：

让我们把整个 .net core 上传上去把

操作步骤

将系统安装的.net core 文件夹上传到 wwwroot 的父级目录, 让我们能够在 wwwroot 使用 ..\dotnet\dotnet.exe 访问到它。
修改发布后的 web.config 将 configuration\system.webServer\aspNetCore@processPath 由 %LAUNCHER_PATH% 或 dotnet 改为 ..\dotnet\dotnet.exe

:)

有一个问题是，Visual Studio 发布项目后，会自动把 processPath 改为 dotnet，避免每次上传手动修改，我们在 project.json 中添加一个后处理脚本

  // project.json
  "scripts": {
    "postpublish": [
      "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%",
      "node azurecn.js %publish:OutputPath%" // <====== 执行 node 脚本，替换processPath
    ]
  }
  
  // azurecn.js
  var fs = require('fs');
  var path = require('path');
  var folder = process.argv[2];
  var filePath = path.join(folder, 'web.config');
  console.log(filePath);
  var content = fs.readFileSync(filePath, 'utf-8');
  if (content.indexOf('processPath="dotnet"') > 0) {
      content = content.replace('processPath="dotnet"', 'processPath="..\dotnet\dotnet.exe"');
      fs.writeFileSync(filePath, content);
  }
  

整个世界都美好了！(●’◡’●)

Hi from new host

2016-04-15T14:42:35+00:00

今天换了新域名 imzc.me

作为一个新的开始，好好写文章！

Chen's Blog

TypeScript 进阶：给第三方库编写声明文件

第三方库使用的关键：d.ts 文件

TSC 内置的 d.ts

指定项目需要的公共库

第三方库的 d.ts

为 jQuery 编写 d.ts

dts 中可以只包含自己需要的功能

重载的声明方式

Interface 声明

复杂类型的变量声明

回调函数的处理

TypeScript 第一步

安装 TypeScript

TypeScript 项目结构

tsconfig.json

传统浏览器运行环境

一个最基本的 TS 项目

命名空间 namespace

NodeJS 以及其他模块化组织的项目

Angular 2 two-way binding property

Twe-way binding property

使用 Accessor 提高一致性

3) VS Code 插件示例，一个 TypeScript 即时预览插件

插件目标

创建项目

添加 command，修改 activationEvents

处理用户输入

处理 TypeScript 编译

打开一个 WebView

vscode.previewHtml

构建 html

在右侧编辑区域预览

Next

2) VS Code 插件项目结构与配置文件

VS Code Extension 项目结构

package.json

字段定义

contributes（扩展点）

contributes.commands

例子

contributes.keybindings

附录1 key字段可用的按键组合字符串规则

附录2 when字段可用的字符串

例子

contributes.configuration

例子

contributes.languages

例子

contributes.debuggers

例子

contributes.grammars

例子

contributes.themes

例子

contributes.snippets

contributes.jsonValidation

1) VS Code 插件向导

VS Code 插件创建与发布

创建项目

安装生成器

启动生成器

开发测试

发布 extension

安装 vscode extension 发布工具 vsce

打包插件

发布到 vscode Marketplace

少点光芒 - 让 Web 开发环境全面黑化

IDE

Chrome Developer Tools

安装步骤

Windows

Mac OS X

Visual Studio Code / Egret Wing 技术架构：Wing 对 VS Code 的扩展

系列目录

Wing 扩展 VSC 遵循的原则

UI 改动

取消 ActivityBar

添加内置控制台

添加右边栏

附录1 `key`字段可用的按键组合字符串规则

附录2 `when`字段可用的字符串

Wing 对插件 API 的扩展