My Top 20 Favorite VS Code Extensions


August 02, 2021 / 15 min read / 3,011 views, 3 likes, 0 comments

Last updated: September 30, 2022

Tags: vscode, editors, awesome lists


VS Code

Microsoft released VS Code (Visual Studio Code) in 2015, and since then it has become one of the most popular text editors on the market. What has led to that popularity? It is free and lightweight, with a beautiful and intuitive user interface and it is fully customizable through extensions. Extensions can bring nearly any look or functionality you like to VS Code. But with so many extensions to choose from, which ones are right for you? I'm here to guide you with my top 20 favorite VS Code extensions.

1. Project Manager

Project Manager

Do you work on several projects and find yourself switching back and forth all the time between them. Then this is the perfect extension for you. The Project Manager extension easily tops this list as one of my all-time favorite extensions.

Once downloaded, a new folder tab icon will appear on the left-hand side of your VS Code editor. Whenever you start a new project, open this tab and hit the "save project" icon at the top of the left-hand panel. Project Manager will add your project to a list of your favorite projects.

In the future, if you ever want to return to this project, open up this panel and left-click your project to jump to it. You can also right-click a project to open that project in a new window. This functionality is very convenient if you like to reference code from previous projects when starting a new project.

2. GitLens

GitLens

GitLens helps you examine the commit history for a line of code. Click on a line of code, and off to the right-hand side, you will see an un-obtrusive git blame message. The message will contain (1) who last changed that line of code, (2) when they changed it, and (3) what the commit message said for that change. If you then hover that git blame segment, you'll have options to pull up a diff with all the changes made to the current file for that commit, pull up the commit in GitHub or GitLab, and other options.

3. Open in Browser

Open in Browser

This simple extension allows you to easily open an HTML file in the browser. You can right-click the file itself in the left-hand file browser or right-click in the opened HTML file itself. You'll have the option to "Open in Default Browser" or "Open in Other Browsers". Supported browsers are Chrome, Firefox, and Opera.

4. Code Spell Checker

Code Spell Checker

I type fast and frequently make small spelling mistakes.These mistakes often used to go unnoticed until a co-worker pointed them out in code review. Well, no more! As the name suggests, Code Spell Checker checks your code for spelling mistakes. And not just spelling mistakes in comments, but in variable names, function names, and class names as well. It is smart about word tokenizing on snake_case and camelCase code. Code Spell Checker underlines misspelled words. If you click the underlined word, a lightbulb will appear on the left side of your screen with suggestions for words with similar spellings. And if you right-click the word, you can tell the extension to add the word to the dictionary or to ignore the word for now.

5. Bracket Pair Colorizer

Bracket Pair Colorizer

This nifty extension will color [square brackets], {curly braces}, and (parentheses) colors that match on the left and right sides. Inner brackets get different colors than the outer brackets. This coloring makes it so quick and easy to tell which brackets align on the left and right sides, and makes it very easy to tell when you're missing a closing bracket.

6. Toggle Quotes

Toggle Quotes

Toggle Quotes is a fun, little extension that allows you to toggle back-and-forth between double-quotes and single-quotes. Just put your blinking cursor inside the quotes to change and press Ctrl+'.

7. Copy Relative Path Posix

Copy Relative Path Posix

If you are like me and you work on a Windows machine but use git-bash or have a project with file paths that need forward-slashes, and you need your copied file paths to also have forward slashes, Copy Relative Path Posix will save you so much time. If you right-clicking a file in the left-hand file browser, in addition to the standard "Copy Path" and "Copy Relative Path", there will now be an option to "Copy Relative Path (Posix)". This option will copy the file path relative to your project root, but with forward-slashes instead of backslashes.

8. Auto Close Tag

Auto Close Tag 1 Auto Close Tag 2

Auto Close Tag is an extension that automatically places closing tags on HTML and XML tags. Just type an opening tag, and as soon as you type the > to finish the tag, the extension will create a matching closing tag and place your cursor between the opening and closing tags. It is also smart enough to know certain tags that should not receive a closing tag (such as <br>), and you can extend that list of non-closed tags.

9. Auto Rename Tag

Auto Rename Tag 1 Auto Rename Tag 2

Auto Rename Tag recognizes a pair of opening and closing HTML or XML tags. If you edit the opening tag from that pair, it will change the closing tag to match. For example, if you replace h2 with p from your opening tag, the extension will change the closing tag at the same time. So <h2>Some text</h2> becomes <p>Some text</p> without you having to find the closing tag and change it yourself.

10. Highlight Matching Tag

Highlight Matching Tag

As with brackets, it can be difficult to match an opening HTML or XML tag to its closing tag, especially when there is a lot of nested code in between the two. Highlight Matching Tag simply highlights (with a yellow underline) the opposing closing tag when your blinking cursor is on an opening tag or the opposing opening tag when your blinking cursor is on a closing tag, making it so you can find one or the other with ease.

11. Color Highlight

Color Highlight

Color Highlight highlights all CSS color codes in your codebase the color they represent. So if I write #fff in my code (in any file, not just a CSS file), that #fff block of code is colored white. This coloring also works with RGB colors like rgb(255, 255, 255), or named colors like pink. The named colors, however, will only highlight their respective color in a CSS file. This extension is great for easily seeing what colors look like inline in your code. I certainly don't memorize (most) hex codes and would have no idea what #af1 corresponds to without looking it up or without this extension.

12. Path Intellisense

Path Intellisense 1 Path Intellisense 2 Path Intellisense 3

Path Intellisense knows your file tree. When you open a file and start typing a path inside a set of quotation marks, Path Intellisense will suggest options for the next directory or file in the path. You can then press tab or enter to add the suggestion to the path you are typing. It can detect paths relative to the current file with ./relative/path/notation or relative to the project root with /absolute/path/notation.

13. vscode-faker

VS Code Faker 1 VS Code Faker 2 VS Code Faker 3

Vscode-faker is an awesome extension for adding fake data to your file. Press Ctrl+Shift+P to open the VS Code command bar, then type faker. The dropdown menu will populate with a whole list of data categories to fake out including names, phone numbers, email addresses, vehicles... the list goes on and on. One of the most useful fakes for me is the Faker: Lorem, which you can use to generate paragraphs of lorem ipsum to fill your HTML pages out with to see how they look before you replace that lorem ipsum with real content. Once an item-to-fake is selected, it will appear in the file at your cursor.

14. Prettier - Code formatter

Prettier 1 Prettier 2

Prettier is a code formatter that supports a wide range of file types including HTML, CSS, Javascript, Markdown, and several others. Once installed, you can right-click anywhere in a supported file and select the option Format Document to have Prettier automatically format your code in a consistent, easy-to-read format.

15. CSS Peek

CSS Peek

CSS Peek adds Go To Definition functionality to your HTML classes. While in an HTML file, hold Ctrl while hovering a custom CSS class to see a pop-up of the CSS class above your hovered cursor position. You can then click said CSS class to go to its definition in the CSS file for easy editing.

16. Sourcery

Sourcery 1 Sourcery 2 Sourcery 3 Sourcery 4

Sourcery is a cool extension for python. It finds patterns in your opened python file that could be refactored to be made clearer, and it underlines the affected code. If you hover over the underlined code, Sourcery will tell you (in a pop-up below your cursor) what should be refactored. It also shows you what the refactored code would look like compared with the current code in a diff within the pop-up. If you then left-click the underlined code, a lightbulb will appear on the left-hand side of the screen with an option for Sourcery to change your code to its suggested refactoring. If you disagree with the suggested refactoring, there are options to skip this instance of the refactoring or even tell Sourcery never to show the suggested type of refactoring again.

While the extension is great for everyone, it is especially awesome for beginner python developers as it can point out un-pythonic patterns in their code to make them better developers in the future.

17. flask-snippets

Flask Snippets 1 Flask Snippets 2

Flask-snippets provides shortcuts for Flask and jinja code patterns. On the Flask side of things, you can start typing fapp, and as you type, a completion suggestion will appear for fapp which you can select by pressing Tab or Enter. This will generate the following code for you:

from flask import Flask, render_template
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
  app.run(host='127.0.0.1', port=8000, debug=True)

The above code is the code for a basic Flask application. You can also start typing froute to generate a basic Flask route that looks like this:

@app.route('path')
def func_name(foo):
    return render_template('expression')

There are 18 such basic flask snippets for quick code completion that you can see by going to the flask-snippets extension page. While those flask snippet code completions are helpful, the completions I find most helpful are for jinja template code completions. With an HTML jinja file open, start typing ffor to get the following code completion snippet:

{% for element in collection %}
    {{ element|e }}
{% endfor %}

Or start typing felif in an HTML jinja file to get the following code:

{% if expression %}
    blockofcode
{% elif expression2 %}
    blockofcode
{% else %}
    blockofcode
{% endif %}

There are 17 such jinja template code completion snippets which I find to be great time savers. And while jinja templates are used extensively by Flask, other web frameworks (such as FastAPI) can also make use of jinja templates, making this extension very useful when working on those web frameworks as well.

18. Language support

Language Support (bash IDE)

These last three extensions aren't really extensions so much as they are categories of extensions. This category is all about language support extensions. VS Code is great for working with any programming language under the sun because most likely any language you want to code with has a VS Code language support extension for it with features like code completion, go to definition, syntax error highlighting, etc. This support makes it so much easier to write new code, understand old code, and spot syntax errors in your code quickly. For the language you are interested in working with, just type that language into the extension search bar and the first hit will probably be language support for that language. Here is a list of the languages I use all the time alongside their supporting extensions:

  • Markdown ==> markdownlint + Markdown All in One
  • HTML and CSS ==> HTML CSS support
  • Jinja ==> Jinja
  • Python ==> Python
  • YAML ==> YAML
  • Bash ==> Bash IDE (this is shown in the above picture)

19. Color Themes

One Dark Pro Color Theme

VS Code can look exactly the way you like with color themes. While color themes are just extensions and can be installed just like any other extension, the more typical way to install a color theme is by going to File > Preferences > Color Theme. From this drop-down, you can scroll up and down in the color themes with your keyboard arrows. Your VS Code will instantly switch to the highlighted theme so you can quickly find what looks good to you. Note that these default themes are a limited selection. To get a fuller picture of the themes available you can browse themes at https://vscodethemes.com/. I am personally quite partial to One Dark Pro.

20. Icon themes

Material Icon theme

The other cool place you can customize your VS Code visual experience is with icon themes. Icon themes transform the icons in the left-hand file browser, making them "pop" a little more (or less). While the default theme for VS Code icons (called Seti) is pretty nice looking, it's worth giving other icon themes a chance. The easiest way to find icon themes is by going to the extensions panel and typing icon theme into the search bar. Then, scroll through and click on a few of the options to see how their icons look on their description pages. I picked up the material icon theme. This theme supports just about any file extension out there and makes it easy for me to distinguish between various file types and important folder types.

Conclusions

VS Code is an awesome, fast, and lightweight text editor. With extensions, you can customize it to look and behave just about any way you like. I hope you liked my picks for my top 20 favorite VS Code extensions, and maybe you found a couple of new ones to pick up for yourself. Did I miss any VS Code extensions that you truly love? I'd love to hear about them in the comments below!


About the author


Theodore Williams

Hi, my name is Teddy Williams. I'm a software developer with a special love for python programming. 🐍👨‍💻 I have a wide range of programming interests including web development, hobby video game development, IoT, data science and just writing scripts to automate everyday boring tasks. I'd love it if you check out some of my other posts or take a look at my portfolio! :)

Thanks for reading this post! 💚 If you like the post, let me know by hitting the icon below, and if you have any questions or comments I'd love to hear them in the comments section. Thanks, and happy coding! 🎉

like post (3) Comments (0)


Log in to comment with your own custom profile. That way you can edit and delete your comments. Plus you can pick out a fun profile picture to show-off next to your comment. 😃🤖👽😻 Not Registered? It's easy! 🤓 Or... fast-comment without a login below (no comment editing/deleting 💩).

User avatar not found

This post has no comments yet.