In C# WinForms, I could do this
var data = new DataObject(DataFormats.FileDrop, filePaths);
myControl.DoDragDrop(data, DragDropEffects.Copy);
to make another application, such as Notepad, open the file specified by filePaths. The code is similar in WPF or even in JavaFX. The file path can be any arbitrary file path that is accessible within the system, such as C:\Windows\win.ini or \\myFileServer\sharedDir\sharedFile.txt. I mean making Notepad OPEN the file, NOT displaying the file path text in its editing area. That is, I am d&d'ing a file path, not a string that contains the file path.
Can I do the same thing if I make a desktop application with Electron (only for desktops; don't care about web/mobile)? I have tested it with VS Code, which is said to be created with Electron, and when I dragged a file from its "Explorer" into Notepad, nothing happened. When I did it into Notepad++, it just displayed the file path string in its editing area, so I am guessing Electron doesn't support it, but I want to make it sure.
Yes, there even is a full example in the Electron documentation about this.
Short summary of the example code: when a specific DOM element is being dragged, the renderer sends an event to the main process. For the dragstart event to fire, the DOM element needs to have the attribute draggable="true". In this example, we pass the filename of the file to be dragged along in the message to the main process.
document.getElementById("foo").ondragstart = event => {
event.preventDefault();
ipcRenderer.send("my-drag-start", "test-file.txt");
}
The main process handles the IPC message from the renderer and starts the drag operation. Note that you need to specify an icon to be attached to the cursor during the drag operation, triggering an error message if left out.
ipcMain.on("my-drag-start", (event, filePath) => {
event.sender.startDrag({
file: path.join(__dirname, filePath),
icon: path.join(__dirname, "dnd.png"),
});
});
I'm reading through electron and electron-builder docs, but I still do not quite understand what is the purpose of the buildResources folder?
Here's what a configuration doc for electron-builder says:
buildResources = build String - The path to build resources.
Kind of self-explanatory... But how or when they are involved in the build process, especially having that:
...build resources is not packed into the app. If you need to use some
files, e.g. as tray icon, please include required files explicitly
Can we simply put those icon files in an arbitrary folder and then copy over into the app/ manually (since we need to include buildResources manually anyway)?
TL;DR:
As far as I can tell from a quick glance at the source code, the buildResources folder is used to hold additional scripts, plugins, etc. that can be used by the package building software. Electron-builder doesn't generate the packages itself, it uses tools like NSIS.
Explanation:
I've had the same question and unfortunately find an answer for this isn't very straight-forward. The docs entry is pretty useless. I found out that someone asked about it in the GitHub issues but never got an answer.
I decided to dig in the code a bit myself to find out what it does. In NsisTargets.ts, you can see that the buildResources folder can contain custom includes and plugins for NSIS.
// NsisTargets.ts
taskManager.add(async () => {
const userPluginDir = path.join(packager.info.buildResourcesDir, pluginArch)
const stat = await statOrNull(userPluginDir)
if (stat != null && stat.isDirectory()) {
scriptGenerator.addPluginDir(pluginArch, userPluginDir)
}
})
// [...]
taskManager.add(async () => {
const customInclude = await packager.getResource(this.options.include, "installer.nsh")
if (customInclude != null) {
scriptGenerator.addIncludeDir(packager.info.buildResourcesDir)
scriptGenerator.include(customInclude)
}
})
and in pkg.ts it's used to load additional scripts to the pkg builder:
// pkg.ts
if (options.scripts != null) {
args.push("--scripts", path.resolve(this.packager.info.buildResourcesDir, options.scripts))
}
It appears as though buildResources can contain assets/scripts specifically used for the build process. That also explains why the contents of buildResources aren't included in the resulting app.asar file.
So, I'm going to say straight away that the documentation for this option is just awful.
Files included in buildResources will appear in the asar file which you can find documentation about on electron's website.
The option files will include files such as pictures which are not accessible in the asar file.
I.E.
given I have a folder called assets in my build folder I want to include with my app.
"files": [
"./build/**/*"
],
"directories": {
"buildResources": "assets"
}
This will put all folders inside build into the asar file, which you can then unpack by including,
"asarUnpack": "**/assets/*"
This will put the folder assets into the build folder in the app directory.
I've created a script using electron-link. Within the links are basic requires needed for electron i.e:
function get_app() {
return app = app || require("./node_modules/electron/index.js").app;
}
when running the script through electron I get the below error:
"To use Node's require you need to call snapshotResult.setGlobals first!"
I've attempted to add this line to many areas without much affect. is there a correct area to place this?
Figured it out. I needed to wrap my main.js file in a function and export that function. then I can call the function after calling the .setGlobals function.
Is it possible to add custom code snippets in Visual Studio Code? And if so, how? VSCode is based on Atom, so it should be possible.
Hit > shift + command + p and type snippets
Select Preferences: Configure User Snippets
Choose the language type for which you want to add the custom snippet in the vscode inputbox
vscode has comments to explain on how to add a snippet, as described on :> vsdoc or you can follow the next link with a short guide:
Lets say, we want to open custom snippets for the language GO. Then we can do:
Hit > command + p
Type: go.json + enter And you land on the custom snippet page
Snippets are defined in a JSON format and stored in a per-user (languageId).json file. For example, Markdown snippets go in a markdown.json file.
Using tools:
Snippet Generator extension (recommended)
Online snippet generator
Option 1 - Use the Snippet Generator extension.
It supports code to JSON conversion with optional scope support and space to \t conversion.
Demo:
Option 2 - Another extension is snippet-creator (deprecated).
After installing it, all you have to do is to :
Select the code that you want to make a snippet.
Right-click on it and select "Command Palette"(or Ctrl+Shift+P).
Write "Create Snippet".
Choose the type of files needed to be watched to trigger your snippet shortcut.
Choose a snippet shortcut.
Choose a snippet name.
Option 3 - check this website. you can generate snippets for vs code, sublime text, and atom.
Once snippet being generated on this site. Go to the respective IDE's snippet file and paste the same. For example for a JS snippet in VS code go to File->preference->user snippet then it opens javascript.json file then paste the snippet code from an above site inside this and we are good to go.
As of version 0.10.6 you can add custom snippets. Read the documentation on Creating your Own Snippets.
You can find/create custom snippets by placing the json file in C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets.
For example, a custom javascript snippets would be in a \snippets\javascript.json
You can also publish you snippets which is a really neat feature as well. John Papa created a nice angular + typescript snippet you can download as an extension in the marketplace.
Here is an example snippet taken for the documentation on a javascript for loop:
"For Loop": {
"prefix": "for",
"body": [
"for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
"\tvar ${element} = ${array}[${index}];",
"\t$0",
"}"
],
"description": "For Loop"
},
Where
For Loop is the snippet name
prefix defines a prefix used in the IntelliSense drop down. In this case for.
body is the snippet content.
Possible variables are:
$1, $2 for tab stops
${id} and ${id:label} and ${1:label} for variables
Variables with the same id are connected.
description is the description used in the
IntelliSense drop down
You can check out this video for a quick short tutorial
https://youtu.be/g1ouTcFxQSU
Go to File --> Preferences --> User Snippets. Select your preferred language.
Now type the following code to make a for loop snippet:
"Create for loop":{
"prefix": "for",
"body":[
"for(int i = 0; i < 10; i++)",
"{",
" //code goes here",
"}"
],
"description": "Creates a for loop"
}
You are done.
Type "for" in the editor and use the first prediction.
SHORTCUT
install snippet-creator extension (now deprecated).
Highlight the code that you need to make snippet.
press ctrl+shift+P and type "Create snippet" on the command palette and
press ENTER.
select language for which you want to create snippet(eg:-CPP), then type
snippet name, type snippet shortcut and then type snippet description.
You are now good to go.
Type the snippet shortcut in the editor that you entered in step 4, and select the prediction (if no prediction comes press ctrl+space) that comes first.
Hope this helps :)
Note: goto File->Preferences->User Snippets. Then select the language in which youcreated the snippet. You will find the snippet there.
You can add custom scripts, go to File --> Preferences --> User Snippets. Select your preferred language.
If you choose Javascript you can see default custom script for console.log(' '); like this:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
There's a VSCode Plugin called: snippet-creator (now deprecated).
After installing it , all you have to do is to:
Select the code that you want to make it a snippet.
Right click on it and select "Command Palette"(or Ctrl+Shift+P).
Write "Create Snippet".
Choose type of files needed to be watched to trigger your snippet shortcut.
Choose a snippet shortcut.
Choose a snippet name.
That's All.
Note : if you want to edit your snippets , you will find them in [fileType].json
Example : Ctrl+P , then select "javascript.json"
I tried by adding snippets in javascriptreact.json but it didn't worked for me.
I tried adding snippets into global scope, and it's working like charm.
FILE --> Preferences --> User snippets
here select New Global Snippets File, give name javascriptreact.code-snippets.
For other languages you can name like [your_longuage].code-snippets
This is an undocumented feature as of now but is coming soon. There is a folder you can add them to and they will appear, but it may change (its undocumented for a reason).
Best advice is to add this to the uservoice site and wait til its final. But it is coming.
On MacOS:
Open the VSCode
Code -> Preferences -> User Snippets
Search for "python" (or any language)
Write your snippet like this:
{
"Write pdb": {
"prefix": "pdb",
"body": [
"import pdb; pdb.set_trace()",
"$2"
],
"description": "Write pdb.set_trace() to debug Python scripts"
}
}
Save the file with command + S.
VSCode introduce this in version 0.5, see here.
Snippet syntax follows the TextMate snippet syntax and can write in User Preferences.
If you'd rather not deal with writing your snippets in JSON, check out Snipster. It lets you write snippets as you would write the code itself - not having to wrap each line in quotes, escape characters, add meta information, etc.
It also lets you write once, publish anywhere. So you can use your snippet in VS Code, Atom, and Sublime, plus more editors in the future.
This may not be a real answer (as some have answered above), but if you're interested in creating custom code snippets for other people, you can create extensions using yeoman and npm (which by default comes along with NodeJS) . NOTE: This is only for creating snippets for other's systems. But it also works for you too! Except you need JS code for whole thing.
You can add custom scripts, go to File --> Preferences --> User Snippets. Select your preferred language.
Like mine code is go, I do it as below:
"channel code": {
"prefix": "make_",
"body": [
"${1:variable} := make(chan ${2:type}, ${3:channel_length})",
"$4"
]
}
explanation: $1 will take your tabs & to give hints what are those tabs values, we make it like ${1:some_variable} which could give us hints what are those
I hope, it helps!
I'm building a generator that in part includes scaffolding from another project created with exec. Depending on user input I need to move or delete parts of this scaffolding.
Right now I'm doing it with node's fs.child_process.spawn and shelljs, but seeing as the Yo generator has mkdir, write, template, and copy, I'm wondering if there's a Yo way to move or delete files and directories.
I just use rimraf like this:
MyGenerator.prototype.removeDir = function removeDir () {
var cb = this.async(),
self = this;
rimraf('path/to/dir', function () {
self.log.info('Removing dir');
cb();
});
};
Remember to add rimraf as a dependency in your package.json file. Not sure if there's a built-in function for this but this one's been working fine for me so far.
Yeoman now supports this via the fs API, which is an in memory filesystem implementation.
this.fs.move('source/file', 'dest/file');
this.fs.copy('source', 'dest');
File System Docs
Still not documented, but this is the delete method (works for me):
this.fs.delete('file/to/delete');
Link: Yeoman issue 1505