![](https://img.haomeiwen.com/i8207483/6755e48059623bc5.jpg)
一切重想法开始,我们都是从一个想象走向一个实现。
- 使用 yeoman 创建项目脚手架
- 创建个人的 VS 在线账号
- 发布自己的
an average individual that likes the program and as we are as we all
最近许多 csharp 工程师转型为 javascript
扩展目录结构
![](https://img.haomeiwen.com/i8207483/7fca044a683ff244.png)
package.json 是整个项目配置,也可以提供对项目描述和说明
tsconfig.json 配置以何种方式来对 typescript 文件进行编译
tslint.json 对 ts 语法问题给予开发者友好提示
CHANGELOG.MD 包好 extension 更改的日志信息
.vscode\launch.json 配置启动扩展的方式
src\extension.js 扩展程序的代码
test 测试目录
在项目中默认的测试工具为 Mocha 测试框架,今天可能会用到比较熟悉的 jest 测试框架
cnpm install -D jest ts-test @types/jest
- jest 单元测试框架
- ts-jest 支持我们用 typescript 来写 jest 单元测试
- @types/jest 有助于我们 coding jest,API 提示和自动补全功能
import * as path from "path";
import * as fs from "fs";
import { InputBoxOptions } from "vscode";
import { IDisposable } from "./disposable.interface";
import { ScExistError } from "./errors/sc-exist.error";
import { VSCodeWindow } from "./vscode.interfaces";
export class ScGenerator implements IDisposable {
private readonly extension = ".js";
private readonly scFiles = [
"operators",
"selectors",
"actions",
"reducers",
"types",
"test",
"index"
];
private readonly defaultPath = "src/state/sc";
constructor() {}
async execute(): Promise<void> {}
async prompt(): Promise<string | undefined> {}
create(absSCPath: string) {}
validate(name: string): string | null {}
toAbsolutePath(name: string): string {}
dispose() {}
}
可能看到文件内容有点 confusing,我们先不管其他内容,只是关注我们关心的内容,
- 当我们执行一个 extension 时候会找到 execute 方法来执行,所以我们必须有一个 execute 方法
- prompt 提示输入文件名称
- validate 对输入是否合法进行校验
- create 在本地目录创建最终的文件
构造函数
在构造函数中我们定义两个参数分别是
constructor(
private workspaceRoot:string,
private window:VSCodeWindow
) {
}
使用下面接口好处是我们并不想使用 vscode sdk,所以抽象出一个接口将我们想要用的方法整合到这里。
vscode.interfaces.ts 文件
import { InputBoxOptions } from "vscode";
export interface VSCodeWindow {
showErrorMessage(message: string): Thenable<string>;
showInfomationMesssage(message: string): Thenable<string>;
showInputBox(options?: InputBoxOptions): Thenable<string | undefined>;
}
toAbsolutePath 方法
将相对路径转换为绝对路径,如果是文件则使用默认路径放置文件
toAbsolutePath(nameOrRelativePath: string): string {
//检查参数中是否包含 / 或 ./
if (/\/|\\/.test(nameOrRelativePath)) {
return path.resolve(this.workspaceRoot, nameOrRelativePath);
}
// 如果是文件则使用默认路径
//
return path.resolve(
this.workspaceRoot,
this.defaultPath,
nameOrRelativePath
);
}
对输入名称是否正确进行检查
validate(name: string): string | null {
if (!name) {
return "Name is required";
}
if (name.includes(" ")) {
return "Space are not allowed";
}
return null;
}
async prompt(): Promise<string | undefined> {
const options: InputBoxOptions = {
ignoreFocusOut: true,
placeHolder: "quack",
validateInput: this.validate,
prompt: `Sc name: 'some_sc , or relative path:'src/state/sc/some_sc'`
};
return await this.window.showInputBox(options);
}
网友评论