Updated documentation for upcoming VSCode extension release

[vinzbarbuto]

This PR aims to update the VSCode extension documentation to reflect the recent changes made to the extension (see this PR).

[axmmisaka]

Nit: your SVGs are just inlined base64 armoured PNGs with nothing else. Would be better to just upload the PNGs.
This applied to the other 2 SVGs as well

[vinzbarbuto]

I used SVG files to maintain high resolution, but switching to PNG causes blurriness

[axmmisaka]

Interesting, lemme check what might be happening later

[lhstrh]

Any updates on this, @axmmisaka?

[lhstrh]

Suggested change

	The Lingua Franca extension for Visual Studio Code (VS Code) provides syntax-directed editing capability, compilation, diagram synthesis and a packages explorer for Lingua Franca programs.
	The Lingua Franca extension for Visual Studio Code (VS Code) provides syntax-directed editing capability, compilation, diagram synthesis and a package explorer for Lingua Franca programs.

[lhstrh]

Suggested change

	Overall, we encourage you to open your project in VS Code using the following structure to fully leverage the features of the VS Code extension:
	:::note
	We recommend selecting the root of your Lingua Franca package as your workspace in VS Code. This will enable the package explorer.
	:::

[lhstrh]

This stuff should be mentioned before the "creating a new file" stuff and should probably mention lingo init.

[lhstrh]

Suggested change

	The **Lingua Franca Packages Explorer** can be accessed by clicking on the **LF icon** in the activity bar on the left side of the screen. Once opened, the **Packages Explorer** displays a **Tree View** with the following structure:
	The **Lingua Franca Package Explorer** can be accessed by clicking on the **LF icon** in the activity bar on the left side of the screen. Once opened, the **Package Explorer** displays a **Tree View** with the following structure:

[lhstrh]

• discuss naming of GitHub org

[lhstrh]

It seems like we mix the term "package" and "project" a lot. Maybe we should only use one?

[lhstrh]

Suggested change

	> **Note**: The **Import Selected Reactor** option is available only if an LF program is open in the editor.
	:::note
	The **Import Selected Reactor** option is available only if an LF program is open in the editor.
	:::

[lhstrh]

This should probably refer to a "creating a new project" paragraph

[axmmisaka]

Tried it locally, it's blurry but not that terrible if we use the same size/ppi:

You can use a bigger-sized PNG:

Or you can use this plugin which we enabled for our site, then inline the image. The documentation is garbage though.

import Image from '@theme/IdealImage';

{/* stuff in the middle  */}
import local_libraries from '../assets/images/vs_code/local_libraries.png';
<Image img={local_libraries} style={{maxWidth: 400}} />

The reason inline SVG looks better is that it inlines the style and additional metadata in the SVG, and stored a bigger PNG.