codrop

easily manage the transfer of files between vscodes on different systems

tags: #productivity, #code-link-sharing, #utility, #collaboration, #sharing

features and demo

as of current version, two commands are provided in your command pallete

• Codrop: Get Shareable Link: Copies a shareable link of active code file to your system's clipboard.
• Codrop: Add Code to Workspace: Paste the link

the above commands feel a bit mechanical, hence alternatively, we provide a Get Shareable Link button in the status bar of vscode itself, which performs the task of link-generation on click. when a user pastes the link in browser, desktop vscode application is triggered and the corresponding file gets created, filled with the required content.

problem 📌

vscode has become a staple editor for most developers, ranking as one of the top developer environment tools. but quickly sharing a code file becomes a repetitive task. let's see a general day-to-day flow when you are sharing some code files with your friend

1. writing your code on vscode, you encounter an error, and you seek help from your tech geek friend
2. you go to whatsapp (or discord or telegram or whatever) and go to send a document, navigate through your system and finally select the file, and then click on send
3. your friend receives the message, downloads the file, places it somewhere (or default downloads folder) and then opens vscode, and then opens the file

as we can see, the process of transferring files from one system to another, although quick, has still a lot of steps, which can be avoided with a simple solution (and no, i am not talking about github-like places to push code to and then share it, and some live collaboration feature): link sharing

solution 💡

what i am proposing is a vscode extension for link-sharing, which you would be able to install from the vscode marketplace itself.

once added, you can simply write your code, and then click on the share icon and generate a link that would get copied to your clipboard, and then share it with your friend over any communication channel.

your friend would simply click on the link which would open the app with the required files in it. simple? i bet your ass it is.

roadmap 🛣️

• [x] figure out typescript and how to write a basic vscode extension
• [x] add a widget to obtain shareable link
  • [x] if that doesn't work, allow the same simply from the command palette (ctrl+shift+p)
• [x] generate the link
  • [x] might involve a separate backend if it's possible with vscode extensions or i do not get much familiar with typescript (golang ftw)
    • [x] edit: golang truly was ftw
• [x] copy the link to the clipboard
• [x] clicking on the trigger should trigger the desktop launch of the vscode application
  • [x] if the app doesn't exist on the client’s system, as a fallback we can have two options
    • [x] download the code
    • [x] open vscode in the browser
    • [x] option to launch any other code editor
• [x] finalise the extension name
• [x] write extensions readme
• [x] deploy the backend and get a nice domain name
• [x] logo and stuff
• [x] publish the extension to the marketplace
• [x] share and publicize the tool

i am looking forward to extending the same to sharing multiple files/folders at once, but let's focus on POC first!!

as this is my first time with this vscode extension ecosystem, i would be penning down all the tools and resources i gather along the way 💀

tools 🔨

• programming language(s)
  • typescript (extension's frontend)
  • golang (to build APIs)
• database: postgres
• server: aws ec2
• domain+SSL: namecheap

resources 📚

• https://code.visualstudio.com/api/get-started/your-first-extension
• https://www.freecodecamp.org/news/making-vscode-extension/
• https://code.visualstudio.com/api/extension-guides/overview
• https://crodrigues.com/how-to-open-windows-desktop-applications-from-the-browser/
• https://github.com/microsoft/vscode-extension-samples
• https://www.youtube.com/watch?v=a5DX5pQ9p5M&ab_channel=BenAwad
• https://github.com/microsoft/vscode/issues/217
• https://github.com/sindresorhus/clipboardy
• https://github.com/microsoft/vscode-pull-request-github/issues/573
• https://github.com/microsoft/vscode-extension-samples/blob/main/uri-handler-sample/src/extension.ts
• https://stackoverflow.com/questions/53073926/how-do-i-create-a-file-for-a-visual-studio-code-extension
• https://stackoverflow.com/questions/22892120/how-to-generate-a-random-string-of-a-fixed-length-in-go
• https://intersog.com/blog/how-to-write-a-custom-url-shortener-using-golang-and-redis/
• https://jrstupkadev.medium.com/golang-url-shortener-22ba6c970792
• https://bobbyhadz.com/blog/typescript-http-request-axios
• https://stackoverflow.com/questions/62839519/how-convert-a-string-to-type-uint8array-in-nodejs
• https://stackoverflow.com/questions/58451856/vscode-api-check-if-path-exists
• https://www.eliostruyf.com/callback-extension-vscode/
• https://stackoverflow.com/questions/64798213/how-to-configure-axios-base-url
• https://stackoverflow.com/questions/56086972/how-do-i-run-an-extension-command-on-startup-on-vscode
• https://code.visualstudio.com/api/references/vscode-api