Issue #49  (Features on vscode.dev)03/29/23

If you haven't yet tried the web version of VS Code, which you can try by visiting the URL vscode.dev, it's definitely something you'll want to put on your radar as the VS Code team continues to make improvements to it.

Here are some tips and info on vscode.dev (AKA VS Code for the Web) just to bring you up to speed with a few of its capabilities.

VS Code for the Web has a very similar UI to the desktop version of VS Code, with many of the same features including search, syntax highlighting, and even extension support. You can open repositories, forks, and pull requests via GitHub and Azure Repos (currently in preview), and you can work with code stored on your local machine.
   
As the VS Code for Web docs point out, it's recommended to use the Web version for "lightweight" or "simpler" code changes. If you need to do things like run, build, or debug code, or require use of the terminal, it's recommended to use the desktop version instead.

You can navigate to edit any GitHub repository via your browser's URL field, basically using the URL as an API. For example you can visit the repo for React.js by entering: vscode​.dev/github/facebook/react in the URL field. Just use the format vscode​.dev/github/user/repo/.
 
When first trying to navigate to a GitHub repo, you'll have to give permission to the GitHub VS Code extension, which you'll only have to do once.

Another cool thing you can do with VS Code for the Web is try out different VS Code themes, again by simply altering the URL. In this case the URL can be changed using /theme/theme-name.

For example, here are some themes you can try directly on VS Code for the Web right now:

• vscode.dev/theme/RobbOwen.synthwave-vscode
• vscode.dev/theme/carloscuesta.sprinkles-vscode
• vscode.dev/theme/GitHub.github-vscode-theme
• vscode.dev/theme/sajibsrs.soft-sight

And if a particular theme extension has multiple themes available (like the GitHub one shown above), simply add the theme name to the end of the URL, after the extension name, otherwise VS Code for Web will select the first theme in the options. For example here's the one for GitHub Dark High Contrast.

So while it does have limitations, the web version of VS Code is something to keep an eye on and use from time to time.

Now on to this week's hand-picked links!

 

VS Code Tools

Code Snippets AI — A GPT-4-powered VS Code extension that lets you easily store and securely fetch your code snippets, with features to refactor, debug, collaborate with your team.

Output Colorizer — An older but popular VS Code extension that adds syntax colorization for both the output/debug/extensions panel and *.log files.

CodiumAI — A GPT-based VS Code extension that analyzes your code to catch bugs and quickly create both small and comprehensive test suites, with support for Python, JavaScript, and TypeScript.

Tech Brew — Join more than 450K people reading Tech Brew – the 3-times-a-week free newsletter covering all updates from the intersection of technology and business, so you can make more informed decisions.  Sponsor 

XPath Notebook — VS Code extension that adds XPath 3.1's extensive JSON and XML analysis features to VS Code's Notebooks.

VS Code Articles

It's Official: the Standard Ruby VS Code Extension — Justin Searls reports on the official VS Code extension for the Standard Ruby linter and code formatter, which just got added to the VS Code Marketplace in February.

Advanced VS Code Shortcuts to Code Like a Wizard — Includes 12 different keyboard shortcuts with details for Mac, Windows, an Linux.

Bytes: Your Favourite JavaScript Newsletter — I subscribe to a lot of newsletters, but this is definitely one I look forward to. Entertaining with lots of cool and useful JavaScript coding tidbits, news, and tools.  Sponsor 

Improve Your VS Code Workflow to the Max — Sami Jaber from Builder.io lists his favourite VS Code tips and customizations, many involving the use of AI-based tools. He also did a short YouTube video on the AI tips.
 

Best of the Rest

Strudel REPL — A web-based live coding environment that implements the Tidal Cycles algorithmic pattern language for making music or even other patterns, including weaving.

Zed — A high-performance, multiplayer code editor from the creators of Atom and Tree-sitter (the Rust-based parsing library).

Make Bookmarklets — A neat little online editor to create and modify JavaScript bookmarklets that includes IntelliSense, multi-cursor mode, linting, and auto-minification. The result will also display a button you can drag to your bookmarks bar. You might also want to try out this simpler tool that additionally allows you to convert to and from bookmarklet code.

Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris