Forem: Ross-Li

Debug Diary: Vscode Extension Development Host Can't Fully Simulate Actual Vscode

Ross-Li — Sat, 22 Jun 2024 01:00:03 +0000

Encountered a problem while developing upon one of my favorite vscode extensions: better comments by Aaron Bond. I have figured it out, learned much new stuff, considering researching it (specifically vscode's Extension Development Host) a bit more, raise an issue to vscode and most importantly, share it with you guys so that you may prevent encountering issues like me.

💀 Problem

The extension works in vscode, but when I cloned the source code and test ran it in vscode's Extension Development Host, it fails to function properly (only some programming languages are properly highlighted).

🔍 Cause (TLDR)

vscode's Extension Development Host fails to simulate an actual vscode instance, resulting the extension not able to detect installed language support extensions, resulting the extension not functioning properly in Extension Development Host, but does function properly in ordinary vscode instances.

🪲 Debugging Process

After briefly reading the source code, I found that this extension basically scans all extensions installed in user's vscode, pick extensions with language support, and store those language configurations, combined with user's customized comment configurations, finally decorate comments in the editor.

Inside Extension Development Host (EDH), through debugging with breakpoints, I found that some of extensions's variables (specifically commentConfig and languageConfigFiles in the configuration.ts) which should hold language configurations only contain a part of extensions by the time of decorating comments.

⌛ Interlude: I Was Wrong with "Watch" in vscode Debugging Variable Expressions...

While I tried to use the "watch" functionality in vscode debugging, for some time I really thought these 2 variables were not properly initialized into empty Map objects, because the "watch" panel shows Uncaught ReferenceError for these 2 variables after executing the initialization statements:

private readonly commentConfig = new Map<string, CommentConfig | undefined>();
private readonly languageConfigFiles = new Map<string, string>();

Turns out, my "watch" expressions were wrong. I should have used this.commentConfig and this.languageConfigFiles instead of commentConfig and languageConfigFiles in the "watch" panel. Seems that vscode's "watch" functionality have its own way of figuring out variable scopes, but I haven't really found the documentation for it. I would really appreciate it if you could point it out to me in the comment section.

Test the "better comments" Extension by Packaging the Source Code and Installing It to vscode

If the problems lies in the EDH, then I should try to test the extension in an actual vscode instance. After packaging the source code into a .vsix file, and installing it to vscode (also disabling the extension originally installed from extension marketplace), all languages are decorated properly, which means the extension powered by the source code functions properly!!! 😆

Making a Little Extension to Confirm My Suspicions

I want to know the reason why the better comments extensions works well in an actual extension. Specifically, I want to know whether the vscode.extensions.all variables could actually pick up all extensions in an actual vscode instance.

But vscode doesn't allow me to directly inspect the vscode.extension.all variable in a vscode instance:

With the help of Copilot, I created a little extension called inspect-all-extensions to inspect the vscode.extensions.all variable of a vscode instance. The activate() functin of extension.ts looks like this:

export function activate(context: vscode.ExtensionContext) {
  console.log('Extension "inspect-all-extensions" is now active!');

  const disposable = vscode.commands.registerCommand(
    "inspect-all-extensions.inspect",
    () => {
      // Variables for formatted printing
      const publisherWidth = 20;
      const nameWidth = 30;
      const versionWidth = 10;

      // Create and show an output channel
      const outputChannel = vscode.window.createOutputChannel("AllExtensions");
      outputChannel.show(true);

      // Get all extensions
      const extensions = vscode.extensions.all;
      const extensionsInfo = extensions
        .map(
          (ext) =>
            `${ext.packageJSON.publisher.padEnd(
              publisherWidth
            )}\t${ext.packageJSON.name.padEnd(
              nameWidth
            )}\t${ext.packageJSON.version.padEnd(versionWidth)}`
        )
        .join("\n");

      // Print all extensions in the output channel and console
      outputChannel.appendLine(extensionsInfo);
      outputChannel.appendLine("Extensions count: " + extensions.length);
      console.log(extensionsInfo);
      console.log("Extensions count:", extensions.length);
    }
  );

  context.subscriptions.push(disposable);
}

After packing, installing this helper extension and running its command, here is the output

vscode                  configuration-editing           1.0.0
vscode                  css-language-features           1.0.0
vscode                  debug-auto-launch               1.0.0
vscode                  debug-server-ready              1.0.0
vscode                  emmet                           1.0.0
vscode                  extension-editing               1.0.0
vscode                  git                             1.0.0
vscode                  git-base                        1.0.0
vscode                  github                          0.0.1
vscode                  grunt                           1.0.0
vscode                  gulp                            1.0.0
vscode                  html-language-features          1.0.0
vscode                  ipynb                           1.0.0
vscode                  jake                            1.0.0
vscode                  json-language-features          1.0.0
vscode                  markdown-language-features      1.0.0
vscode                  markdown-math                   1.0.0
vscode                  merge-conflict                  1.0.0
ms-vscode               js-debug                        1.90.0
ms-vscode               vscode-js-profile-table         1.0.9
vscode                  npm                             1.0.1
vscode                  php-language-features           1.0.0
vscode                  references-view                 1.0.0
vscode                  search-result                   1.0.0
vscode                  tunnel-forwarding               1.0.0
vscode                  typescript-language-features    1.0.0
42Crunch                vscode-openapi                  4.26.3
bierner                 github-markdown-preview         0.3.0
bierner                 markdown-checkbox               0.4.0
bierner                 markdown-emoji                  0.3.0
bierner                 markdown-footnotes              0.1.1
bierner                 markdown-mermaid                1.23.1
bierner                 markdown-preview-github-styles  2.0.4
bierner                 markdown-yaml-preamble          0.1.0
dbaeumer                vscode-eslint                   3.0.10
eamodio                 gitlens                         15.1.0
esbenp                  prettier-vscode                 10.4.0
GitHub                  copilot                         1.206.0
GitHub                  copilot-chat                    0.16.1
golang                  go                              0.41.4
golang                  go-nightly                      2024.5.3021
mhutchie                git-graph                       1.30.0
ms-python               debugpy                         2024.6.0
ms-python               python                          2024.8.1
ms-python               vscode-pylance                  2024.6.1
ms-vscode               extension-test-runner           0.0.9
ms-vscode               live-server                     0.4.13
oderwat                 indent-rainbow                  8.3.1
redhat                  java                            1.31.0
redhat                  vscode-yaml                     1.15.0
undefined_publisher     inspect-all-extensions          0.0.1
VisualStudioExptTeam    intellicode-api-usage-examples  0.2.8
VisualStudioExptTeam    vscodeintellicode               1.3.1
vscjava                 vscode-java-debug               0.57.0
vscjava                 vscode-java-dependency          0.23.6
vscjava                 vscode-java-pack                0.27.0
vscjava                 vscode-java-test                0.41.1
vscjava                 vscode-maven                    0.44.0
Vue                     volar                           2.0.21
waderyan                gitblame                        11.0.1
Extensions count: 60

Now it shows all extensions properly, including vscode built-in extensions that are not overriden by third party extensions and third party extensions.

😭 What I Could Had Done Better & 🚀 Future Improvements

Somehow I am not able to reproduce the problem of "only partial extensions detected in EDH". This is a VERY VERY BIG mistake because now I can't reproduce the problem anymore, which means I couldn't raise an issue or question about this online anymore and everybody would think that I was hallucinating 😭. Next time I would document the outputs (screenshots may better) somewhere else. Maybe I have just overturned the conclusion of this entire blog...

Since now the vscode.extensions.all variable seems to be working properly in EDH (showing 61 extensions), the real problem may lie somewhere else, such as the UpdateLanguagesDefinitions() function, where its result languageConfigFiles only picked up 15 of the extensions...

Mobilizing Others: Some Reflections

Ross-Li — Sun, 02 Jun 2024 04:02:35 +0000

I just realized that I am not good at managing. Here are some reflections:

I expected teammates to work at a certain standard and in a certain way that I hadn't specify or encourage. I feel a lack of vocabulary and awareness of praising others or saying positive things in general.

Although I was the team leader, I didn't feel like leading because I associate leadership with manipulation and coercion, which obviously I don't like therefore I don't want to project these influences towards my teammates.

I don't feel like repeating things (sticking to a certain format when writing the API document) because I thought words of team leader should be executed if no objection was raised. But that is not true.

I wanted to be a software developer partially because of the possibility of creating something great just by myself learning and developing. But that is not true for software developers. SDEs work with other SDEs with different skill levels and technical background, and staff from other departments such as design and product management with less tech-literacy. I can develop by myself and make cool stuff, but that is only for side-projects. For the "day job" (so to speak), working with others is a absolute necessity.

When I watch short videos (which I shouldn't) on platforms such as YouTube, one of the video types I watch is powerful figures commanding the team and getting things done. I guess it's me wanting to do the same thing but lacking the courage to do it.

So today is my first day of correcting these mistakes. I asked one of my roommates whether he was using my tools because I noticed the tools was misplaced. I have been putting this conversation off for a few days. My roommate said no and he didn't blame me at all for bringing up this issue. I felt a bit reassured. It's could be the most trivial thing to mention in a blog like this, but I want to start to do something to correct my habits no matter how small it is.

Cloud Newbie Fixing Newbie Problems: Snap

Ross-Li — Sat, 18 May 2024 20:18:45 +0000

Initial problem: can't connect to a Google Cloud VM instance created through vscode.

Try to get SSH connection to the instance through Google Cloud Console:

Checked firewall rules. There already exists a predefined rule that applies to all instances allowing port 22 for SSH communication.

Enable the serial console, get into the serial console:
The serial console only outputs information and I can't input any command. The outputted information suggests some sort of snapd problem.

Taking a look at CPU usage:

I continued to work until around 01:00 AM this morning, then I disconnected from the SSH in vscode. But somehow the CPU kept running. Let's check the log around that time.

May 18 00:49:29 appstore snapd[532]: storehelpers.go:923: cannot refresh: snap has no updates available: "code", "core20", "google-cloud-cli", "lxd", "snapd"

Well I forgot the technique of "just fxxking restart it". My concern is that if I stopped and restarted the VM instance, its external IP would be changed (it happened last time), causing a lot of config issues for testing. So I searched for methods to keep the IP not changed during restart. After a little bit of researching I promoted the ephemeral IP to static IP (well for more charges I guess). Now I can restart the instance without worries.

After restarting the instance, everything worked. I was curious what does Snap do other than being a newer fancier package manager than apt (e.g. what do these /dev/loop directories have to deal with my installed applications?), and a brief search online shows me a decent amount of other users ranting about this issue. So I guess the problem could be that my VM instance isn't powerful enough to handle the Snap automatic update (Copilot told me I can't completely turn off the automatic update, WTF?), or some restrictions of my VM instance (e.g. size or number of loopback devices) was reached during the Snap automatic update of some applications that I (vscode specifically, following the instruction of Bash output) or the system installed (google-cloud-cli). I am considering removing Snap altogether but I can't just do it because something important (i.e. google-cloud-cli) was installed by the system default via Snap.

Well Snap (and the version of Ubuntu that started to use Snap), you just got yourself another unsatisfied customer!

Opinion: CS Education Should Include More Code Reading

Ross-Li — Fri, 12 Apr 2024 05:31:18 +0000

I was reading through the code for an amazing open source project called BFBAN today. Specifically, I was reading the SQL scripts. There I encountered many familiar SQL stuff, but also many SQL stuff that I didn't know: json data type, ENGINE=InnoDB, COLLATE=utf8mb4_0900_ai_ci, COMMENT, PRIMARY KEY (id) USING BTREE...... As I understood these concepts with the help of Copilot and documentation, I developed a better understanding of MySQL and starting thinking this blog's topic.

My (could be arbitrary) point is: I don't think in today's CS education (in some universities at least), students are reading (or instructors are not assisting students to read) enough good quality code for students to produce good quality code.

If you want to write good articles or essays, you should first read and "digest" quite a few classical books or essays (e.g. Plato's work, Shakespeare's work) to understand word-by-word, sentence-by-sentence, paragraph-to-paragraph how good essays should be written usually with the help from teachers to build up the "vocabularies".

Then how comes when it comes to CS education (especially the software engineering part), students are expected to know how to program properly after only a few semesters' equivalent of "learning the ABCs" without much exposure and understanding of good quality code?

Maybe the instructors could do some live coding sessions just like what software developers would do when they pair-program? Maybe the instructors could pick some entry-level but good quality open source code bases to let the students to write "summary and response" with? Maybe instead of asking "who knows answer to this question", instructors could ask a student to the front and present his/her idea to improve existing sample code? Those are just some random thoughts, but maybe we can draw experiences from how writing was taught (or should I say, "should be taught") in school.

I remember listening to this video Can Great Programmers Be Taught discussing the software engineer education. I remember that one of the argument the present made was that programming can be taught properly by reducing the class capacity, increasing in-class interaction, essentially "tailoring" the education to the audience, subsequently increasing the cost of education (or should I call it individual tutoring at this point) by a large amount. (Just think about how much you are paying for your CS education, then multiply that by a few times).

I do agree that the greatest programmers are self-taught, because programming is a field that just isn't possible to be 100% taught, a field where the practitioner must be willing to "chew through the book like a worm" to build up their programming knowledge. But I still think that good introductory CS education will guide beginners towards the right direction and speed up their progress.

Database Education Needs Moderization

Ross-Li — Fri, 12 Apr 2024 04:52:42 +0000

I just bombed my database course exam today. I am not gonna blame anyone else. It's was because I didn't properly study how to join multiple tables.

But it made me think during the exam: I really wish I could had the assistance to write SQL code from AI. It is certainly not allowed during exams, but I should had used it when I was learning it. Actually, it should be made available during the learning process. Combined with the fact that this class is taught using MAMP with MySQL version of 5.x.x while the textbook published in 2014 whose SQL examples are mostly of Oracle dialect......, I think the database education really needs some modernization. (Kinda a arbitrary opinion though, considering I haven't researched how other colleges / universities teach database courses.)

Just raising the problem is not enough. I don't want to be just another complainer. I will think about some ways (also existing ways) to modernize database education in my free time. Specifically I want the teaching to:

Be in line with latest popular SQL syntax
Have user-friendly way to install tools with AI assistant equipped with knowledge of the database
Maybe integrate sample projects and exercises from popular textbooks to "standardize" them all?

vanna-ai is a pretty cool project that combines AI with database knowledge. SQLAI seems to be a small German company which specializes in this area. I will start exploring these in my free time.

Don't "Trust" GitHub Code Just Because It's Got Lots Of Stars

Ross-Li — Wed, 10 Apr 2024 23:13:00 +0000

I was reviewing data structures and algorithms for interview prep. So I went on GitHub and find this organization TheAlgorithms and its repo collecting data structures and algorithms in many different languages. It was a treasure for sure, but I also find some code that looks really terrible to even a amateur like me: bad function naming, confusing class organization and some other heavy code smells. Although it was some good material for a foundation to modify with and it could be regarded as some OK refactoring practices, it was a bit annoying to refactor the code that was kinda supposed to be polished.

The message of this story is that you should not take code from GitHub as good, finished, polished code, especially when the code is from (below are my hypothesis):

"Hot" repos that got a lot of stars, not necessarily because it is widely used but because it is a "resource collection" and people just "wishlist" it by starring (e.g. the "awesome" series of repos).
Non-production code base or code base for educational purposes

Way to BETTER explain Python lambda in for loop.

Ross-Li — Mon, 06 Nov 2023 04:35:23 +0000

This Python FAQ, addresses a problem new Python programmers always run into: lambda in list comprehension (in essence, in a for loop). However, it is poorly explained.

I tried to figure out a way to explain it by breaking down and refactoring the code just like what you would do in a math proof problem. Tell me whether this "proof" makes sense or whether "proof" makes better explanation.

Credit: Thanks to YouTube channel mCoding for showing the internals of Python list comprehensions!

increment_by_i = [lambda x: x + i for i in range(5)] is equalivent to:

increment_by_i = list(lambda x: x + i for i in range(5)), where

lambda(x: x + i for i in range(10)) is a generator expression, which is equalivent to:

def lambda_generator():         # Define a generator function
    for i in range(5):
        yield lambda x: x + i
generator = lambda_generator()  # Then call it

By the property of lambda in Python, this is eqivalent to:

def lambda_generator():
    for i in range(5):
        def lambda_function(x):
            return x + i
        yield lambda_function
generator = lambda_generator()

If you run this code with the inspcect.getclosurevars function, you can already see from the printed output that during the definition of lambda_generator(), the i variable have already been iterated from 0 to 4. So lambda_generator() function becomes a function that adds 4 to its inputs.

from inspect import getclosurevars

def lambda_generator():
    for i in range(5):
        def lambda_function(x):
            return x + i
        yield lambda_function
        print(getclosurevars(lambda_function))
generator = lambda_generator()

list(generator)[3](4)

# Output:
# ClosureVars(nonlocals={'i': 0}, globals={}, builtins={}, unbound=set())
# ClosureVars(nonlocals={'i': 1}, globals={}, builtins={}, unbound=set())
# ClosureVars(nonlocals={'i': 2}, globals={}, builtins={}, unbound=set())
# ClosureVars(nonlocals={'i': 3}, globals={}, builtins={}, unbound=set())
# ClosureVars(nonlocals={'i': 4}, globals={}, builtins={}, unbound=set())
# 8

(Lemma: A small example demonstrating the underlying mechanism of for loops in Python)

"""
for i in range(5):
    print(i)
is equivalent to
"""

itr = iter(range(5))    # Apply `iter()` to range object to get iterator `itr`
while True:
    try:
        print(next(itr))
    except StopIteration:
        break

By the underlying mechanism of for loops (create an iterator with iter() function, then repeatedly apply next() to the iterator until StopIteration) in Python, lambda_generator() is equalivent to:

def lambda_generator():
    itr = iter(range(5))    # Apply `iter()` to range object to get iterator `itr`
    while True:
        try:
            def lambda_function(x):
                return x + next(itr)    # `next(iter)` is the `i`
            print(lambda_function(0))   # Set `x` to be 0, so that the printed result = next(itr)
        except StopIteration:
            yield lambda_function
            break                       # This break may not be necessary though

In every while loop (before StopIteration), next(itr) is called, modifying the itr iterator outside the while loop (inside the lambda_generator() function). Therefore, it is OK to refactor the itr iterator inside the while loop:

def lambda_generator():
    def lambda_function(x):
        itr = iter(range(4))
        result = None
        while True:
            try:
                result = x + next(itr)
            except StopIteration:
                break
        return result
    yield lambda_function

Now we can easily see that by the time lambda_function() is yielded to lambda_generator(), lambda_function() have already become a function that adds 4 to its input.

def lambda_function(x):
    itr = iter(range(5))
    result = None
    while True:
        try:
            result = x + next(itr)
        except StopIteration:
            break
    return result

print(lambda_function(0))   # Set x = 0, so that the printed result = the final next(iter) value

# Output: 4

Self learning is so important...

Ross-Li — Mon, 13 Jun 2022 10:02:15 +0000

The lesson I learnt from watching Python tutorial videos on YouTube ,reading PEP documents and some full-semester computer courses is that in terms of computer science stuff, self learning is just much more effective and fun, especially if (1) your all that your instructor do in lectures is reading through PowerPoints and (2) not showing the mechanism with LIVE CODING or (3) just have a strong English accent.

First GitHub Pull Request

Ross-Li — Tue, 07 Jun 2022 16:03:25 +0000

Just created my first GitHub pull request today, it was about correcting an error in a simple sudoku game solver. Although it was simple, it sure felt good!