Issue #47  (Refactoring & Code Action Lightbulb)03/15/23

The refactoring features in VS Code are definitely something you'll want to be familiar with, if you've not already checked them out. VS Code includes built-in refactoring suggestions for JavaScript and TypeScript and refactoring for other languages can be enabled via extensions.

By default refactor suggestions are instantly visible by means of the Code Action Lightbulb feature, shown in the image below.
   
It will appear if you select some code, and it will also show up as a blue lightbulb if you're cursor is on a line that could use a 'preferred quick fix'.

If, however, you don't like seeing the lightbulbs when writing code, but would rather choose when to initiate the suggestions, you can disable the feature. Search for "lightbulb" in your settings and uncheck the Editor - Lightbulb option.
 
With the option disabled, you can still access the same refactor suggestions by right-clicking on any line of code, or on any selected section of code. In the context menu, choose "Refactor..." and you'll see options like what's shown in the image below.
 
Notice the different "Surround with" options that include some built-in selections along with the ability to "Surround with" one of your own code snippets. These are the same options available by directly clicking the lightbulb when the lightbulb feature is enabled.

For more details on refactoring in VS Code, check this article in the official documentation.
 

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

Quick Note: It helps these emails to be delivered if you add my email address to your contacts list. It also helps if you hit reply and say hi! This can prevent filters from getting a little finicky and sending certain issues straight to your spam folder.
 

VS Code Tools

Sprinkles Theme — A nice little theme for VS Code with the colors centered around the idea of 'sprinkles on a donut'. But don't worry, it's not ugly! :) It's fairly nice and includes dark and light modes.

Vetur — A popular Code extension for Vue developers that adds Vue tooling in VS Code.

Settings Editor — A VS Code extension that enhances editing of your settings, similar to prettierrc, tsconfig, etc.

Spaghettify — A real product that's actually a joke. It's a VS Code extension that makes your code 'spaghetti', i.e. not well documented, not concise, not clear, etc. Install at your own risk! :)

VS Code Articles & Videos

VS Code 1.76 (February 2023 Updates) — The latest VS Code updates include additions to the new Profiles feature, accessibility improvements, Markdown workspace header link completions, moveable explorer view, and more.

▶ VS Code Tips: Cleaning Up Editor Tabs with 'Close Saved Editors' — A quick video tip that you'll want to keep in mind if you have lots of editors open in VS Code at any given time.

dailydevlinks — A carefully curated newsletter offering the latest industry trends, news, and resources for developers, designers, and makers. Always includes a good list of resources and tools.  Sponsor 

Share Your Work in Progress in Real Time From VS Code or JetBrains — This is specifically about a feature of the popular GitLive extension and includes a YouTube short version of the tip.
 

Best of the Rest

Why I’m Relearning Vim in 2023 — Software consultant and developer Zachary Johnson provides some brief thoughts on how he picked up using Vim again after not using it for some time.

Thonny — A Python IDE for beginners that comes with Python 3.10 built in and includes features like a simple debugger, highlighted syntax errors, etc.

CodeGPT.nvim — A plugin for Neovim that provides commands to interact with ChatGPT, specifically for code-related tasks like code completion, refactorings, generating docs, etc.

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