bingyi/vscode-extension-samples
1
0
Fork 0
mirror of https://github.com/microsoft/vscode-extension-samples.git synced 2026-04-27 16:55:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use uris over using node paths module

Browse Source 
vscode.Uri.joinPath is the prefered method for working with paths as it supports web properly
This commit is contained in:
Matt Bierner
2020-08-06 13:55:57 -07:00
parent 8e1a291e62
commit ba0294cbcd
4 changed files with 18 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webview-sample/README.md
View File

@ -26,7 +26,7 @@ Demonstrates VS Code's [webview API](https://code.visualstudio.com/api/extension
## Running the example
- Open this example in VS Code 1.25+
- Open this example in VS Code 1.47+
- `npm install`
- `npm run watch` or `npm run compile`
- `F5` to start debugging

12
webview-sample/package-lock.json generated
View File

@ -48,16 +48,10 @@
"integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==",
"dev": true
},
"@types/node": {
"version": "12.12.35",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.35.tgz",
"integrity": "sha512-ASYsaKecA7TUsDrqIGPNk3JeEox0z/0XR/WsJJ8BIX/9+SkMSImQXKWfU/yBrSyc7ZSE/NPqLu36Nur0miCFfQ==",
"dev": true
},
"@types/vscode": {
"version": "1.38.0",
"resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.38.0.tgz",
"integrity": "sha512-aGo8LQ4J1YF0T9ORuCO+bhQ5sGR1MXa7VOyOdEP685se3wyQWYUExcdiDi6rvaK61KUwfzzA19JRLDrUbDl7BQ==",
"version": "1.47.0",
"resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.47.0.tgz",
"integrity": "sha512-nJA37ykkz9FYA0ZOQUSc3OZnhuzEW2vUhUEo4MiduUo82jGwwcLfyvmgd/Q7b0WrZAAceojGhZybg319L24bTA==",
"dev": true
},
"@typescript-eslint/eslint-plugin": {

5
webview-sample/package.json
View File

@ -4,7 +4,7 @@
"version": "0.0.1",
"publisher": "vscode-samples",
"engines": {
"vscode": "^1.38.0"
"vscode": "^1.47.0"
},
"categories": [
"Other"
@ -41,11 +41,10 @@
},
"dependencies": {},
"devDependencies": {
"@types/node": "^12.12.0",
"@typescript-eslint/eslint-plugin": "^3.0.2",
"@typescript-eslint/parser": "^3.0.2",
"eslint": "^7.1.0",
"typescript": "^3.9.4",
"@types/vscode": "^1.38.0"
"@types/vscode": "^1.47.0"
}
}

27
webview-sample/src/extension.ts
View File

@ -1,6 +1,5 @@
import * as path from 'path';
import * as vscode from 'vscode';
const cats = {
'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif',
@ -10,7 +9,7 @@ const cats = {
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.commands.registerCommand('catCoding.start', () => {
CatCodingPanel.createOrShow(context.extensionPath);
CatCodingPanel.createOrShow(context.extensionUri);
})
);
@ -27,7 +26,7 @@ export function activate(context: vscode.ExtensionContext) {
vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
console.log(`Got state: ${state}`);
CatCodingPanel.revive(webviewPanel, context.extensionPath);
CatCodingPanel.revive(webviewPanel, context.extensionUri);
}
});
}
@ -45,10 +44,10 @@ class CatCodingPanel {
public static readonly viewType = 'catCoding';
private readonly _panel: vscode.WebviewPanel;
private readonly _extensionPath: string;
private readonly _extensionUri: vscode.Uri;
private _disposables: vscode.Disposable[] = [];
public static createOrShow(extensionPath: string) {
public static createOrShow(extensionUri: vscode.Uri) {
const column = vscode.window.activeTextEditor
? vscode.window.activeTextEditor.viewColumn
: undefined;
@ -69,20 +68,20 @@ class CatCodingPanel {
enableScripts: true,
// And restrict the webview to only loading content from our extension's `media` directory.
localResourceRoots: [vscode.Uri.file(path.join(extensionPath, 'media'))]
localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'media')]
}
);
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath);
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri);
}
public static revive(panel: vscode.WebviewPanel, extensionPath: string) {
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath);
public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri);
}
private constructor(panel: vscode.WebviewPanel, extensionPath: string) {
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
this._panel = panel;
this._extensionPath = extensionPath;
this._extensionUri = extensionUri;
// Set the webview's initial html content
this._update();
@ -163,9 +162,7 @@ class CatCodingPanel {
private _getHtmlForWebview(webview: vscode.Webview, catGifPath: string) {
// Local path to main script run in the webview
const scriptPathOnDisk = vscode.Uri.file(
path.join(this._extensionPath, 'media', 'main.js')
);
const scriptPathOnDisk = vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js');
// And the uri we use to load this script in the webview
const scriptUri = webview.asWebviewUri(scriptPathOnDisk);