Frontend Development 6 min read

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.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Developing VSCode Extensions: Alias Manager and Copy Filename Pro

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.

TypeScriptVSCodeextension developmentAlias ManagerCopy Filename
Rare Earth Juejin Tech Community
Written by

Rare Earth Juejin Tech Community

Juejin, a tech community that helps developers grow.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.