I've been trying to figure out the best way to implement a "Save As" using the vscode extension API.
So far, here's the best I've got:
// First turn the path we were given into an absolute path
// Relative paths are interpreted as relative to the original file
const newFileAbsolutePath = path.isAbsolute(saveFileDetails.newPath) ?
saveFileDetails.newPath :
path.resolve(path.dirname(saveFileDetails.filePath), saveFileDetails.newPath);
// Create an "untitled-scheme" path so that VSCode will let us create a new file with a given path
const newFileUri = vscode.Uri.parse("untitled:" + newFileAbsolutePath);
// Now we need to copy the content of the current file,
// then create a new file at the given path, insert the content,
// save it and open the document
return vscode.workspace.openTextDocument(saveFileDetails.filePath)
.then((oldDoc) => {
return vscode.workspace.openTextDocument(newFileUri)
.then((newDoc) => {
return vscode.window.showTextDocument(newDoc, 1, false)
.then((editor) => {
return editor.edit((editBuilder) => {
editBuilder.insert(new vscode.Position(0, 0), oldDoc.getText());
})
.then(() => {
return newDoc.save()
.then(() => EditorOperationResponse.Completed);
});
});
});
});
We open the old doc, then open a new doc (which is an untitled document), then insert the old doc's text into the new doc and then save the new doc.
The new doc then closes (for some reason).
Anyone have any advice?
It seems like this is a known issue and caused by the use of the untitled:// scheme:
TextDocument.save() closes untitled documents (#29156)
For now, you could work around it by just reopening the file again since you know the final URI (unlike in the case of the person who reported the issue).
newDoc.save().then((completed) => {
const finalUri = vscode.Uri.file(newFileAbsolutePath);
vscode.workspace.openTextDocument(finalUri).then((doc) => {
vscode.window.showTextDocument(doc, {preview: false});
})
});
Unfortunatenly this does lead to a noticable "flicker"-effect. To avoid this, I'd suggest to simply bypass the VSCode API and use fs for file IO, and only use vscode for showing the file at the end. This also simplifies the code quite a bit:
import * as fs from 'fs';
function runCommand() {
// obtain newFileAbsolutePath / oldFileAbsolutePath
var oldDocText = fs.readFileSync(oldFileAbsolutePath);
fs.writeFileSync(newFileAbsolutePath, oldDocText);
const finalUri = vscode.Uri.file(newFileAbsolutePath);
vscode.workspace.openTextDocument(finalUri).then((doc) => {
vscode.window.showTextDocument(doc, {preview: false});
});
}
Related
I'm trying to create a simple vscode extension that will insert some default text into a newly created file. What I want is for the vscode.workspace.createFileSystemWatcher to call a function that gets the activeTextEditor and writes to the new file. Here is what I've tried:
import * as vscode from "vscode";
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand(
"default-text-generator.generate",
() => {
function _watcherChangeApplied(editor?: vscode.TextEditor) {
if (editor) {
editor.edit((editBuilder) => {
editBuilder.insert(editor.selection.active, "Hello World");
});
}
}
const editor = vscode.window.activeTextEditor;
let uri: vscode.Uri | undefined = editor?.document.uri;
if (uri) {
let watcher = vscode.workspace.createFileSystemWatcher(
new vscode.RelativePattern(
vscode.workspace.getWorkspaceFolder(uri)!,
"**/*.ts"
),
false,
false,
false
);
watcher.onDidCreate(() => _watcherChangeApplied(editor));
}
}
);
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate(): void {
//deactivate
}
Here's what's happening. The editor seems to insert the text, then immediately gets overwritten back to a blank page. I can't seem to figure out why.
The problem happens because the editor you are referring to is not what you think to be. It is not the newly created editor but instead, the editor that you are focused/active when the new .ts file is created.
The FileSystemWatcher.onDidCreate event provides you a Uri to the newly created file inside your workspace, but not necessarily opened in VS Code. Try creating a file via terminal and you will see what I mean. The file is created, the event is fired, but no editor is opened in VS Code.
So, you won't be able to use the editor.edit API to manipulate the file. Instead, you should edit the file using RAW/Node functions. But, in this case, maybe/probably you will clash with the external tool that is creating the .ts file (which may not be VS Code, if you use the FileWatcher). If only files created via VS Code must be detected, you should change to the workspace.onDidCreateFiles event instead. But yet, it also only provides you the Uri, not the Editor.
Hope this helps
This works:
let disposable2 = vscode.commands.registerCommand('yourCommand.here', async (...file) => {
async function _watcherChangeApplied(uri) {
if (uri) {
const editor = await vscode.window.showTextDocument(uri);
editor.edit((editBuilder) => {
editBuilder.insert(editor.selection.active, "Hello World");
});
await editor.document.save();
}
}
const editor = vscode.window.activeTextEditor;
let uri = editor?.document.uri;
if (uri) {
let watcher = vscode.workspace.createFileSystemWatcher(
new vscode.RelativePattern(
vscode.workspace.getWorkspaceFolder(uri),
"**/*.ts"
),
false,
false,
false
);
// watcher.onDidCreate(() => _watcherChangeApplied(editor));
watcher.onDidCreate((uri) => _watcherChangeApplied(uri));
}
}
The key point is that watcher.onDidCreate() will return the uri of the newly created file. You can pass that to your _watcherChangeApplied(uri) function.
In _watcherChangeApplied(uri) you can show the created file via await vscode.window.showTextDocument(uri) and that function returns an editor that you can use with its edit functions.
The code works whether you create the file within vscode (like the New File... icon button at the top of the explorer) or via the terminal (like touch test.ts).
If you want to enable creating new files through the terminal, for example, and NOT open them, try this _watcherChangeApplied(uri):
async function _watcherChangeApplied(uri) {
if (uri) {
const document = await vscode.workspace.openTextDocument(uri);
const strToAdd = "Hello World";
const wse = new vscode.WorkspaceEdit();
wse.insert(uri, new vscode.Position(0,0), strToAdd);
await vscode.workspace.applyEdit(wse);
await document.save();
}
}
I want to store in variable the path of local directory selected using dialog.showOpenDialog.
I tried every tutorial and stack answer without any luck.
Best part is that even the electron-api-demos solution isn't working (I am using one here)
So, dialog opens, I can select a folder or a file - but nothing is send back to renderer process.
Here I am testing this with opening files but also no results.
I am using jquery btw and elcetron v 12.
Here is my code:
Renderer process:
$('.js_select_folder').on('click', (e) =>{
ipcRenderer.send('open-folder')
e.preventDefault();
})
ipcRenderer.on('selected-folder', (event, path) => {
console.log('wtf',path)
$('#info').text('Result :'+path)
})
Main process:
ipcMain.on('open-folder', (event) => {
dialog.showOpenDialog({ properties:['openFile']}, (files) => {
if(files){
console.log(files)
event.reply('selected-folder', files)
}
})
})
No trace of console.log(files) anywhere.
Any ideas what I am doing wrong?
I figured it out:
renderer process:
$('.js_test').on('click', (e)=>{
e.preventDefault();
ipcRenderer.send('open-folder')
})
ipcRenderer.on('sel-dir', (event, path) => {
const message = `This app is located at: ${path}`
$('#info').text(message)
})
main process:
ipcMain.on('open-folder', (event, arg) => {
dialog.showOpenDialog({properties: ['openDirectory']}).then(result=>{
event.sender.send('sel-dir', result.filePaths)
})
})
So it is actually super simple as you can see but took me two days to figure it out.
The result is that I get the path (or any data) back to renderer after choosing dir or file.
Regards, Mac.
I have certain files within the VSCode extension src folder that I would like to copy into the root of the workspace on running a certain command. Once this is working I would also like to extend this to copy other static files with specific content into other sub-folders within the workspace. I found a way to create new files here. However, I am unable to find a way to copy entire files bundled within the extension into the workspace. Looking at the MSFT documentation here, I cannot find anything that would work for my use case. Any pointers are appreciated.
I created a function copyFile that can copy file from within a VSCode extension to the workspace at the provided destination.
You can use WorkspaceEdit and FileSystem VS Code API to achieve this task as shown below.
async function copyFile(
vscode,
context,
outputChannel,
sourcePath,
destPath,
callBack
) {
try {
const wsedit = new vscode.WorkspaceEdit();
const wsPath = vscode.workspace.workspaceFolders[0].uri.fsPath;
const data = await vscode.workspace.fs.readFile(
vscode.Uri.file(context.asAbsolutePath(sourcePath))
);
const filePath = vscode.Uri.file(wsPath + destPath);
wsedit.createFile(filePath, { ignoreIfExists: true });
await vscode.workspace.fs.writeFile(filePath, data);
let isDone = await vscode.workspace.applyEdit(wsedit);
if(isDone) {
outputChannel.appendLine(`File created successfully: ${destPath}`);
callBack(null, true);
}
} catch (err) {
outputChannel.appendLine(`ERROR: ${err}`);
callBack(err, false);
}
}
Sample function call:
function activate(context) {
...
let testChannel = vscode.window.createOutputChannel("TestChannel");
// copy tasks.json file from vs code extension to the destination workspace
copyFile(vscode, context, testChannel,
'assets/tasks.json', '/.vscode/tasks.json', function(err, res) {});
...
}
I am new to visual studio code API.
I would like to listen some event like onSave , onClose etc...
I am currently using this API.But I think this is vary expensive like this. When you only need to listen event for only a specific file.
let { workspace } = require("vscode");
module.exports = {
activate(ctx) {
ctx.subscriptions.push(
workspace.onDidSaveTextDocument(({ fileName, version }) => {
})
)
},
deactivate() {}
};
Not a great solution .But worked for me.
Still Though is there any other way,The better way?...
My solution is...
let onSaveCleaner = workspace.onDidSaveTextDocument((e) => {
// watch for all file save event ... yuck!
});
let onCloseCleaner = workspace.onDidCloseTextDocument(({ fileName, languageId }) => {
// some condition like once `specific` file closed
if (languageId == "python" && fileName == "...") {
onSaveCleaner.dispose()
onCloseCleaner.dispose()
}
});
By doing that We only run expensive code when file is not closed!
Once the file closed...Destroy everything!
I have an extension that grabs the open file's text and alters it. Once the text is altered, how do I put it back into the file that is displayed in 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 "myExtension" is now active!');
console.log(process.versions);
// 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.myExtension', () => {
// The code you place here will be executed every time your command is executed
let activeEditor = vscode.window.activeTextEditor;
if (!activeEditor) {
return;
}
let text = activeEditor.document.getText();
getAsyncApi(text).then((textToInsertIntoDoc) => {
let finaldoc = insertTextIntoDoc(text, textToInsertIntoDoc);
// not what I want - just used to see new text
vscode.window.showInformationMessage(textToInsertIntoDoc);
});
});
context.subscriptions.push(disposable);
}
The API you can use here is TextEditor.edit, whose definition is
edit(callback: (editBuilder: TextEditorEdit) => void, options?: { undoStopBefore: boolean; undoStopAfter: boolean; }): Thenable<boolean>;
It asks for a callback as the first parameter and in the callback, you can make edits to the document by visiting editBuilder.
I put a sample extension in https://github.com/Microsoft/vscode-extension-samples/tree/master/document-editing-sample which reverses the content in current selection, which is basically a simple use TextEditor.edit.
This is a revision of the main function in Rebornix's extension sample (included with the set of Microsoft extension samples) that handles the selection issues you raised. It reverses the content of the selection(s) (leaving the selections) or if a selection is empty it will reverse the word under the cursor at that selection without leaving anything selected. It often makes sense to leave a selection, but you can add code to remove selection.
let disposable = vscode.commands.registerCommand('extension.reverseWord', function () {
// Get the active text editor
const editor = vscode.window.activeTextEditor;
if (editor) {
const document = editor.document;
editor.edit(editBuilder => {
editor.selections.forEach(sel => {
const range = sel.isEmpty ? document.getWordRangeAtPosition(sel.start) || sel : sel;
let word = document.getText(range);
let reversed = word.split('').reverse().join('');
editBuilder.replace(range, reversed);
})
}) // apply the (accumulated) replacement(s) (if multiple cursors/selections)
}
});
Admittedly, while I could remove a single selection by setting .selection to a new empty selection that doesn't seem to work with .selections[i]. But you can make multiple changes without having selections in the first place.
What you don't want to do is make a selection through code just to alter text through code. Users make selections, you don't (unless the end purpose of the function is to make a selection).
I came to this question looking for a way to apply a textEdit[] array (which is normally returned by a provideDocumentRangeFormattingEdits callback function). If you build changes in the array you can apply them to your document in your own function:
const { activeTextEditor } = vscode.window;
if (activeTextEditor) {
const { document } = activeTextEditor;
if (document) {
/*
build your textEdits similarly to the above with insert, delete, replace
but not within an editBuilder arrow function
const textEdits: vscode.TextEdit[] = [];
textEdits.push(vscode.TextEdit.replace(...));
textEdits.push(vscode.TextEdit.insert(...));
*/
const workEdits = new vscode.WorkspaceEdit();
workEdits.set(document.uri, textEdits); // give the edits
vscode.workspace.applyEdit(workEdits); // apply the edits
}
}
So that's another way to apply edits to a document. Even though I got the editBuilder sample to work correctly without selecting text, I have had problems with selections in other cases. WorkspaceEdit doesn't select the changes.
Here is the code snippet that will solve your issue :
activeEditor.edit((selectedText) => {
selectedText.replace(activeEditor.selection, newText);
})
Due to the issues I commented about in the above answer, I ended up writing a quick function that does multi-cursor friendly insert, and if the selection was empty, then it does not leave the inserted text selected afterwards (i.e. it has the same intuitive behavior as if you had pressed CTRL + V, or typed text on the keyboard, etc.)
Invoking it is simple:
// x is the cursor index, it can be safely ignored if you don't need it.
InsertText(x => 'Hello World');
Implementation:
function InsertText(getText: (i:number) => string, i: number = 0, wasEmpty: boolean = false) {
let activeEditor = vscode.window.activeTextEditor;
if (!activeEditor) { return; }
let sels = activeEditor.selections;
if (i > 0 && wasEmpty)
{
sels[i - 1] = new vscode.Selection(sels[i - 1].end, sels[i - 1].end);
activeEditor.selections = sels; // required or the selection updates will be ignored! 😱
}
if (i < 0 || i >= sels.length) { return; }
let isEmpty = sels[i].isEmpty;
activeEditor.edit(edit => edit.replace(sels[i], getText(i))).then(x => {
InsertText(getText, i + 1, isEmpty);
});
}
let strContent = "hello world";
const edit = new vscode.WorkspaceEdit();
edit.insert(YOUR_URI, new vscode.Position(0, 0), strContent);
let success = await vscode.workspace.applyEdit(edit);