"activationEvents": [ "onCommand:extension.helloWorld", "onCommand:extension.loginValidate" ], "main": "./out/loginValidate", "contributes": { "commands": [ { "command": "extension.helloWorld", "title": "登录" }, { "command": "extension.loginValidate", "title": "登录验证" } ] },
这一部分分别对应extension.ts和loginValidate.ts，如下图所示:
大家可以看到，其实两者区别并不大，主要的差异还是registerCommand括号里面的。
有朋友也行会疑惑这个是什么意思不太明白。
registerCommand主要是注册命令，这个注册命令与图中的一致:
保持一致的话，就能F5运行插件项目打开一个新的窗口(可理解为是插件)，通过快捷键ctrl+shift+p就可以看到如图:
点击这个登录验证回车，即可出现如下webview视图
对了还有一点要强调一下，目前有个小局限性就是不能命令有一定的限制，主要是因为这个地方:
由于指定该主函数，所以只能对应的loginValidate.js起作用，所以extension.js就不能起作用了，如果你要强行点击登录就会出现命令找不到，如图所示:
tsconfig.json(关于它的详解，可以参考这篇文章:https://www.jb51.net/article/161435.htm)
虽然有详解不过我还是要说一下，如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。
tslint.json 主要用于typescript的语法检查
最后贴一下我的loginValidate.ts代码(extension.ts代码就不贴了，前面说到过它们的区别，基本上是大同小异):
loginValidate.ts
// The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below import * as vscode from 'vscode'; // this method is called when your extension is activated // your extension is activated the very first time the command is executed export function activate(context: vscode.ExtensionContext) { // Use the console to output diagnostic information (console.log) and errors (console.error) // This line of code will only be executed once when your extension is activated console.log('Congratulations, your extension "loginValidate" is now active!'); // The command has been defined in the package.json file // Now provide the implementation of the command with registerCommand // The commandId parameter must match the command field in package.json let disposable = vscode.commands.registerCommand('extension.loginValidate', () => { // The code you place here will be executed every time your command is executed // Display a message box to the user const panel = vscode.window.createWebviewPanel( 'catCoding', 'Login Validate', vscode.ViewColumn.One, { // Enable scripts in the webview enableScripts: true } ); panel.webview.html = getWebviewContent(); }); context.subscriptions.push(disposable); } // this method is called when your extension is deactivated export function deactivate() {} function getWebviewContent() { return `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <title>登录</title> </head> <body> <div> <form> <p>用户名:<input type="text"/></p> <p>密 码 :<input type="password"/></p> <p> <input type="button" value="提交"/> </form> <div> <input type="button" value="退出"/> </div> </div> <script> function test(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { console.log(xhr.responseText); $("#login).hide(); } else { console.log(xhr.responseText); } } }; xhr.open("POST", "http://localhost:8080/test-web/sysUser/queryUserCodeByInfo?userCode=2", true); xhr.send(null); } function exits(){ $("#login").show(); } </script> </body> </html>`; }