Issue #42  (Code Snippets in VS Code)02/08/23

VS Code's Snippets feature is a really powerful way to improve your code productivity. Most of you are probably aware of the Snippets feature, which allows you to save predefined, reusable code Snippets, but here's a quick rundown of how it works and the primary things you can do with it.

To save a Snippet, choose the "Snippets: Configure User Snippets" option in your command palette. From there you'll see the option to select the Snippet file you want to open. You can select a specific language or even choose a global or project-level Snippet.
   
Once your Snippets are saved, you can access them using one of the following options:

• While editing a file, trigger IntelliSense (CTRL-SPACE) and your Snippets will appear as part of the suggestions. In your VS Code settings you can decide where in the suggestions menu the Snippets will appear (top, bottom, etc).
• In your command palette, choose the "Insert Snippet" option, then select your Snippet from the suggestions listed, which include user-defined Snippets and some built-in ones included with VS Code for certain languages.
• In your settings, enable the option for "Editor: Tab Completion", to allow Snippets to be inserted via tab completion when a prefix is recognized in your editor.

In your Snippets file, the basic syntax for a Snippet looks like this:
 
Notice you can define a name, prefix, body, and description. The prefix is what triggers the Snippet suggestion with tab completions and the body is what ends up as the output.

You can define specific placeholders (marked as ${2:element}, ${1:array}, $0 in the above code) that you can use to quickly add variable slots and other data that will change with each Snippet insertion. The text after the colon for placeholders is default text for that slot and $0 will always be the last placeholder that forces Snippet insertion to exit.

And one last useful thing to know about Snippets is the ability to replace an entire file's contents with a single Snippet. If you open the option "Snippets: Populate File From Snippet" in your command palette, you'll get a list of saved and predefined Snippets that can be used as full file templates.
 
And that's the Snippet feature in VS Code. If you haven't started using it, you definitely should! It's a huge productivity booster to be able to immediately insert stuff you use often. And the fact that you can save them globally, at a project level, and for each language is powerful and incredibly useful.
 

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

VS Code Tools

Kodezi — A VS Code extension and web-based IDE that uses language-trained AI to provide code debugging, auto-correct, code conversion to other languages, doc generation, and more.

Moegi Theme — A set of elegant dark and light themes for VS Code, optimized for text selection and search.

WindiCSS IntelliSense — A VS Code extension for CSS utility framework Windi CSS, that includes autocomplete, syntax highlighting, code folding, and more.

ChatGPT by Tim Kmecl — Another option for adding ChatGPT questions and responses inside your editor in VS Code.
 

VS Code Articles & Videos

VS Code 1.75 (January 2023 Updates) — After the usual December down time, the latest VS Code update includes profiles, accessibility improvements, tree view search history, and lots more. Quick summary in this YouTube short.

My VS Code Setup — This post covers themes, icons, settings, and a fairly long list of extensions for CSS, Python, Markdown, C/C++, JSON, and JavaScript.

Advanced React — A premium training course consisting of 70+ HD videos across 11 course modules, to learn to build modern, full-stack React and GraphQL apps.   Sponsor 

Create a VS Code Extension in 60 Seconds — A YouTube short from the VS Code YouTube channel giving a nice quick look at what's involved in creating a simple TypeScript-based extension that searches the web. It's a good video but the comments ragging on the video creator for switching "Google" to "Bing" are pretty funny.
 

Best of the Rest

butler.vim — A plugin to communicate with OpenAI APIs from Vim and Neovim.

themeforge — Paste the JSON content from any VS Code theme into this website and it will generate an equivalent theme for Vim and Emacs.

ecode — A lightweight multi-platform code editor designed for modern hardware with a focus on responsiveness and performance.

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