Developing VSCode Extensions: Alias Manager and Copy Filename Pro
The author shares the complete development journey of two VSCode extensions—Alias Manager for managing shell aliases with grouping and internationalization, and Copy Filename Pro for quickly copying file and directory names—detailing motivations, design ideas, implementation steps, and useful tooling recommendations.
Preface
In the past two weeks I built two VSCode extensions despite having no prior experience with VSCode extension development, learning a great deal from official documentation, scaffolding tools, and community resources such as ChatGPT.
Gains
Starting from zero, I consulted the official docs, generated a template project, clarified requirements, developed, debugged, and published the extensions; the only notable challenges were internationalization and alias grouping data storage, which were solved with documentation, ChatGPT, and Google.
Alias Manager
Background
The idea originated from a weekly article by Ruan Yifeng that introduced git alias , inspiring me to create a VSCode plugin. After discussing with peers, I explored linux alias and designed a simple UI, completing the first version in about a day.
Alias
For readers unfamiliar with alias , refer to the linked article for an introduction.
Effect
Key screenshots demonstrate the plugin’s UI, including a button to execute an alias, support for grouped alias management, and other features.
Idea
The plugin implements CRUD operations for aliases, grouping, internationalization, sorting, and remarks. Alias changes are persisted by editing the .zshrc file and re‑sourcing it with source ~/.bashrc . Group data is stored in the extension’s context.globalState , ensuring persistence across sessions without affecting the original file.
Copy Filename Pro
Background
During development I often needed to copy a file name (e.g., app-upload-image.vue ) without its extension to the clipboard, but existing extensions either lacked this feature or were unmaintained, prompting me to create my own solution.
Effect
The extension can copy the full file name, the name without extension, and the directory name, and it also works on the currently opened file. It supports internationalization, automatically switching to Chinese when the "Chinese (Simplified)" language pack is installed.
Idea
The extension provides three commands:
Copy file name with extension
Copy file name without extension
Copy directory name
VSCode already offers the file path, so the implementation simply extracts the desired part.
Code
The Node path module handles file‑name and directory extraction, while VSCode’s clipboard API manages clipboard operations. The core logic is under thirty lines of code.
Tool Recommendations
Tool library rattail
A utility library open‑sourced by Varlet author haoziqaq.
Packaging tool tsup
A fast bundler used for building the extensions.
Release tool @varlet/release
A tool that streamlines publishing new versions.
Conclusion
If these plugins helped you, please star the repositories (Alias Manager and Copy Filename Pro) and feel free to leave comments or suggestions.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.