![](https://s5-media.51cto.com/ost/pc/static/noavatar.gif)
回复
当后端同学给到我们Swagger接口文档的时候,是不是在为要写接口类型烦恼,为了偷懒,那么就any吧。any一时爽,同事泪两行。为了高质量的偷懒,来开发个插件leizl.swagger-generate-ts。
export interface PropertyValueAddRequest {
/**
* Format: int64
* @description 属性Id
*/
propId?: number;
/** @description 属性值列表 */
propValueList?: string[];
}
export interface ApiResultboolean {
code?: string;
data?: boolean;
msg?: string;
success?: boolean;
traceId?: string;
}
import { post } from '@/utils/request';
import {
PropertyValueAddRequest,
ApiResultboolean,
} from '@definitions/gmp-product-library-portal/library/manage/property';
export function addPropValue(
data: PropertyValueAddRequest,
): Promise<ApiResultboolean> {
return post(
`/gmp-product-library-portal/library/manage/property/addPropValue`,
data,
);
}
flowchart LR
id1[(OpenApiJson)]-->|openapiTS解析|DefinitionsAst-->|遍历组装| TsFileAst --> |print| File
Cmd+,
打开用户设置,搜索swagger-generate-ts.openApiJsonUrlOptions
[
{
"label": "admin",
"value": "http://xxx/admin/v2/api-docs"
},
{
"label": "gmp-product-library-portal",
"value": "http://xxx/gmp-product-library-portal/v2/api-docs"
},
]
Cmp+shift+P
and typing SwaggerGenerateTs:生成Ts声明和Service请求
.import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.commands.registerCommand('catCoding.start', () => {
// 创建和显示webview
const panel = vscode.window.createWebviewPanel(
'catCoding',
'Cat Coding',
vscode.ViewColumn.One,
{}
);
// 设置HTML内容
panel.webview.html = getWebviewContent();
})
);
}
function getWebviewContent() {
return
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
</body>
</html>
`;
}
$root
,方便后面的替换路径。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
<script defer="defer" src="/$root/static/js/main.e3b97742.js"></script>
<link href="/$root/static/css/main.9e304a5a.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
const baseUri = panel.webview.asWebviewUri(rootPath);
这段代码必须要,否则无法读取文件,踩坑出来的,文档上没有写。 // 加载React项目web-app构建的html文件。
async function loadLocalHtml() {
const htmlPath = path.resolve(extensionPath, "web-app/build/index.html");
const webAppHtml = await fs.promises.readFile(htmlPath, {
encoding: "utf-8",
});
//
const rootPath = vscode.Uri.file(path.join(extensionPath, "web-app/build"));
const baseUri = panel.webview.asWebviewUri(rootPath);
panel.webview.html = webAppHtml.replace(/\/\$root/g, baseUri.toString());
}
useEffect(() => {
function onMessage(event: { data: VsCodeMessage }) {
const data = event.data; // The JSON data our extension sent
if (data.source !== "vscode") return;
console.log("vscode => message", data);
}
window.addEventListener("message", onMessage);
return () => {
window.removeEventListener("message", onMessage);
};
}, []);
async function loadRemoteHtml() {
const { data: html } = await axios.get("http://localhost:3000");
panel.webview.html = html.replace(
/\/\$root/g,
"http://localhost:3000/$root",
);
}
{"debug": true}
,然后在.vscodeignore文件中忽略它,这样的话,发布之后的插件就读不到这个配置,就认为是生产模式了。leizl.swagger-generate-ts
,觉得好用点个赞,一键三连。觉得不好用的地方,提个issue或者留言,好用的插件需要大家的批评与指点。