In the rapidly evolving world of software development, having the right tools can make all the difference in productivity and code quality. Today, I’m going to walk you through building a Visual Studio Code extension from scratch using Qwen Code and Lingma. Both of them are powerful AI coding assistant that helps streamline the development process.

VS Code Extensions Introduction & Environment Setup

Visual Studio Code extensions allow developers to add new features and functionality to the editor without modifying the core application. These extensions can range from simple syntax highlighting to complex development tool integrations. Building your own extension gives you the power to customize your development environment exactly to your needs.

For extension development follow the instructions here.

As for my vs code extension, the name is code-jsonx. This is a json text format and compact extension. After the initiation of the vs code extension project, The generated extension will have the following structure:

.
├── package.json
├── src
│   └── extension.ts
├── tsconfig.json
├── .gitignore
└── README.md

The introduction of these files can be found here

Building Extension Basic Functionality

Now that we have our basic structure, let’s add some functionality. For this example, we’ll create a simple extension that adds a command to transform JSON files. Instead of coding in the editor by ourself, we now build software with Qwen Code. For installition and usage, please refer to the README.md of Qwen Code github repository. Now let’s start prompting.

First, we tell Qwen Code what is the project is for.

> this is a visual studio code extension project, and this extension is for json text formatting and compaction.

Then, Qwen Code will start to reasoning for what he/she received, and add code in the extionsion.ts file. Besides, Qwen Code will also modify the package.json file, add testcase for the code he/she generated, and run the testcase(including download package that needed by the testcase).

After he/she finishes the code, Qwen Code will give you a summary of the code he/she generated. Ant then we can run the extension in the VS Code by clicking the “Run and Debug” button. Little tips: the extension.ts file should be opened in the editor when you run the extension.

After running the extension, you will see a new window pop up. In this window, you can execute the extension command from VS Code Command Palette.

Format and Compact from Command Palette

Adding Advanced Features

With Qwen Code, we can significantly speed up the development process. For example, if we want to add a menu item to format and compact json text, we can just use the following prompt:

> Now we can format and compact json text through Command Palette of visual studio code, can we add some item in the menu to manipulate json text like formatting or compactting json text?

The Qwen Code will generate code in the extension.ts file and add menu item in the pop up menu list.

Format and Compact from Menu

Then we can ask Qwen Code to format and compact json text that only selected in the editor, input the prompt following:

> Now we can format and compact json text of the whole file in the editor through both Command Palette and right click pop menu. So next, can we format and compact only the selected text in the editor when there is selected?

Yes, Qwen code can. After Qwen Code finished executing the prompt, we can test the selected json text format and compact in the visual studio code editor.

Text Selected

Switch to Lingma

Let’s keep adding features to my extension generated by Qwen Code. We offten receive some json text from others like our colleages, but sometime the json text is not well formatted and even not valid json. So the json extension should telll us the character position which cause the invalid json. So I use the prompt to ask Qwen Code to make the extension more powerful.

> If the text to be formated or compacted is not a valid json text, please pop a message to tell the operator and move the cursor of the editor to the first charactor position that lead the json to be invalid

But what dispointed me is that the code generated by Qwen code is not working. And I tried to tell Qwen Code to fix it.

> I think you failed to implement the task I need as I just tested

But it failed again. And I keeping telling Qwen Code the json text I tried to fix the problem. But it still not working. So I gave up after I runing out of my free tokens of Qwen Coder Model.

And I learned that the Qwen Coder offered by Lingma is free, which is also a code assistant code agent from Alibaba Group, So I switch to Lingma visual studio code extension and tried again.

After I installed Lingma and switch to Agent mode, I tried this prompt:

> In this codebase we have achived a json format and compact extension tool in visual studio editor. Now we leave a bug for you. Now you need to refactor the codebase to move the cursor in the editor when detect the invalid charactor that cause the invalid json format of the text. Let's go...

No surprise, the agent generated some code based on the codebase generated by Qwen Code, but it failed, still not working. And I tell the agent my testcase.

> I make a test just now, and it is still not working. My testcase is [{"a":"b","c":1,"d":true},,{"a":"b","c":1,"d":true}]

After a while, Lingma fix the previous problem, but I found another testcase that still not working.

> Great, You have done a very awesome job, but I still found a testcase that can not passed. [
  {
    "a": "b",
    "c": 1,
    "d": true
  },
  ,
  {
    "a": "b",
    "c": 1,
    "d": true
  }
]

When Lingma finished the code, it can work as my expectation. But, the codebase is not very clean. All the code is in one file. So I want to split the code into multiple files. And I prompted:

Now we have another problem, about the codebase. All the code is in the extension.ts file, this is a kind of messy. Can you reorgnize the functions and definitions for the codebase? Please keep in mind that the refactored codebase should pass all testcase that you generated. Quality is very import.

Lingma did a great job! The codebase it reorgnazed is much cleaner and easier to read. And the extension works well Before I found another bug. That fix this bug later. And I push the code to a github repo: https://github.com/guimingyue/code-jsonx

Conclusion

Building VS Code extensions is not easy for a developer who is not familiar with VS Code extension and fronted development. But with code assistant tools like Qwen Code and Lingma, the process becomes even more efficient, allowing you to focus on the functionality rather than getting bogged down in implementation details. In this article, we’ve seen how to use Qwen Code and Lingma to build a VS Code extension from scratch. Just with prompts and a few clicks, you can create a fully functional extension that meets your needs.