Back to Freecodecamp

What Are Some Good VS Code Extensions You Can Use in Your Editor?

curriculum/challenges/english/blocks/lecture-working-with-code-editors-and-ides/672d457bcdd8b350ec2b6254.md

latest3.7 KB
Original Source

--description--

Better Comments is an extension that offers special highlighting for specific code comments. For example, it will call out "TODO" comments, as well as syntax to indicate questions or warnings.

Code Spell Checker offers indication when you have spelled something incorrectly in your code. Because it is designed for code files, it will account for things like camel case.

Error Lens will help you catch any highlighted errors in your code. Rather than having to rely on the underline that VS Code shows by default, this extension highlights the entire line and displays the error message.

Indent Rainbow adds color to your different levels of indentation. In combination with VS Code's native bracket pair colorization, this can dramatically help identify what scope your code is in.

Or maybe you're looking for something a bit more practical? Consider an AI assistant, like GitHub Copilot or Tabnine, to offer you inline suggestions as you are writing your code.

An icon pack, such as VS Code Great Icons, can help make your file tree cleaner and easier to parse at a glance. And an extension like Colorize can help you understand the values in your CSS properties.

You'll also want language-specific extensions for your projects. If you are using JavaScript, you will likely want ESLint and Prettier to lint and format your code. If you are using TypeScript, you might want Pretty Typescript Errors for easier to read messages.

Finally, you can also have a bit of fun with your editor. VS Code Pets offers configurable virtual pets to keep you company while you squash some bugs.

Power Mode will create flashy effects when you achieve a high enough "combo" by writing more code.

Discord Presence will let you show off what you're working on to all of your friends.

And there are so many more extensions out there. Feel free to explore the extension marketplace and see what works best for you.

--questions--

--text--

What feature does the "Better Comments" extension provide in VS Code?

--answers--

Automatic spell-checking for comments.

--feedback--

The lesson mentions how this extension affects certain types of comments.


Special highlighting for specific types of code comments.


Conversion of comments into documentation.

--feedback--

The lesson mentions how this extension affects certain types of comments.


Removal of unnecessary comments.

--feedback--

The lesson mentions how this extension affects certain types of comments.

--video-solution--

2

--text--

Which VS Code extension is described as helping to catch highlighted errors in your code by displaying the error message on the entire line?

--answers--

Code Spell Checker

--feedback--

The lesson mentions an extension that enhances error visibility beyond VS Code's default underline.


Indent Rainbow

--feedback--

The lesson mentions an extension that enhances error visibility beyond VS Code's default underline.


Error Lens


ESLint

--feedback--

The lesson mentions an extension that enhances error visibility beyond VS Code's default underline.

--video-solution--

3

--text--

What unique feature does the "VS Code Pets" extension offer?

--answers--

It helps debug pet-related code.

--feedback--

The lesson mentions this extension in the context of having fun with your editor.


It provides virtual pets to keep you company while coding.


It adds animal-themed icons to your file tree.

--feedback--

The lesson mentions this extension in the context of having fun with your editor.


It generates code snippets related to pets.

--feedback--

The lesson mentions this extension in the context of having fun with your editor.

--video-solution--

2