Impactful VSCode Extensions
The most impactful extensions I use in my day-to-day workflow!
Now I'm not going to be pointing out the obvious ones, like "As a Python developer, I recommend the Python extension", or others that are covered by every other extension-recommendation list, like "Use Prettier to make your code prettier!". If you can find it without scrolling when searching for it in the extensions tab, I'm not going to mention it.
Which leads right into my main piece of advice for finding extensions: simply search for them, no matter how "small" of a technology you're using there's likely a extension or two for it.
Now onto the list, ordered within their individual categories by how impactful they are to my workflow.
Generic
Error Lens
Brings all info, warnings, and errors out from the Problems tab and into the code itself, making it easier to see what's wrong with your code at a glance.
Indent Rainbow
Colors the different levels of indentation, making it easier to see where you are in the code.
Bracket Lens
Adds the opening content to the ending bracket, making it easier to see what the bracket is for.
Code Spell Checker
Checks the spelling of words, makes is easier to focus on the code itself.
Better Comments
Adds some much-needed styling variations to comments, supporting nearly every language and comment style, making it much easier to jump betwwen comments and code.
Open in GitHub, Bitbucket, Gitlab
Provides quick shortcuts to open the current file/line in GitHub, Bitbucket, or Gitlab, making it easy to link to the current code.
Open
Adds the Open in default application command and context-menu option to open a file in the OS-default application, from opening HTML in the browser, to opening images in the default image viewer, making it easier to view files without leaving VSCode.
Partial Diff
Provides many ways to compare text, no matter if they're in the same file, different files, or even in your clipboard! Even supports normalizing the text to reduce noise, and ignoring whitespace changes, making it easier to compare large or noisy content.
Formatting Toggle
Adds a button to the status bar that allows you to toggle formatting on and off, makes it easy switching between unformatted and formatted projects without digging into the settings.
Todo+
Makes all files named TODO instant Todo lists, allowing you to quickly add and manage tasks without having to open a separate file or spin up a whole project board. Makes it easy to keep organized without having the upfront investment of a Kanban board or more complex project management tools.
When you do find it to be inadequate, that's usually an indication that your project has grown to a scale at which a project board is warranted, Kanbn Extension for Visual Studio Code could be a next step.
Quick and Simple Text Selection
Adds the ability to select all the text between two symbols - usually quotes, but additionally supports brackets, braces, and even carets. Makes it easy to select text within symbols, especially when working with multiple cursors and the content within the symbols is different.
EditorConfig for VS Code
Attempts to override the editor's settings with the settings defined in the .editorconfig file in the project's root directory, makes onboarding onto new projects much easier.
Trailing Spaces
Simply highlights trailing spaces, makes it impossible to accidently make a bunch of unintended whitespace changes, keeping your commits clean!
Live Share
Lets you share/join a workspace with other developers, from simply showing both of your cursors within a document, to sharing terminals, ports, and even debugging sessions. Makes working with others on a codebase much easier, instead of them telling you to jump to a file or add a logging statement somewhere, they can do so themselves!
Code Tour
Allows users to create and follow code tours, makes both onboarding new developers and simply showing off your codebase a breeze!
Image preview
Shows a preview of image links in the gutter, not only making it easy to see what the image actually is, but additionally makes it obvious when there are broken image links!
Fold Plus
Adds additional folding-related commands, of which I personally only care for the Fold All Same Level as Cursor - allowing you to fold all the code at the same level as the cursor, makes it easy to traverse between indentation-based siblings quickly, like HTML elements or test cases!
Sensitive Replace
Allows replacing all selections while preserving the individual case of each selection, making it easy to rename not just single variables, but entire concepts and maintain the original casing.
Output Colorizer
Add highlighting to common outputs and log files, making the reading of these logs much easier.
VSCode Position
Shows you your current offset position in the file, and allows you to jump to the nth character in the file or make relative jumps. Makes it easier to jump straight to where some obtuse error messages is telling you things went wrong, like JSON parsing errors which only give you the offset of the token that failed to parse.
Kanbn Extension for Visual Studio Code
Adds a local-only Kanban board to your project, allowing you to quickly add and manage tasks without having to open a separate file or spin up a whole project board. Makes it easy to keep track of tasks and such without having to create and manage some complicated onliny project board.
If this fails to meet your needs, then your project has likely grown to a scale at which online-based project board with more features is warranted.
Chance Case
Quickly switch the selection between different case types!
Coverage Gutters
After falling in love with testing and discovering Code Coverage reports, this extension will be able to parse the most common report formats and display the coverage of each line in the gutter, making it a breeze to see which code is still uncovered without having to read line numbers or generate and then open some report file.
Select By
Adds a bunch of selection and cursor movement commands, of which I primarily care for the Swap Active command, which moves the cursor to the opposite side of the selection. As Quick and Simple Text Selection always places your cursor at the end of the selection, this is a great way to quickly move it to the start.
Real-Time Debugging
Adds highlights to currently executing lines while debugging, additionally outputting the content written to the terminal beside the lines. I personally run my own fork of this extension, adding additional customizations, commands, and support for break and log points.
The most valuable feature of this is the ability to see the output of the terminal beside the lines, so while this is the best extension for doing that language-agnostic, Console Ninja now accomplishes this even better for JavaScript.
Hediet Power Tools
A collection of neat little tools, of which I only desire the Stack Frame Line Highlighter, which highlights all lines of the current stack when debugging - makes it easy to quickly grasp the context of a call.
Jumpy2
Makes it even quicker to jump around your code by adding two-letter shortcuts to every word, allowing you to jump to the word by typing the two letters in sequence after activating the extension, making it even quicker to jump around your code!
Paste JSON as Code
Provides the ability to convert JSON to a variety of languages, generating types where possible, additionally generating parsing and serialization code, making it easy to get started from a data-first approach.
Slowbug
Provides the ability to run the VSCode debugger in slow mode, stepping through the code one line at a time, making it easy when you know something is wrong, but not the exact moment, allowing you to follow the executation until you find where it goes wrong.
GitHub Repositories
Adds the ability to quickly open, browse, and make edits to Github repositories without cloning locally, making it a breeze to quickly open a repo in VSCode and get all the benefits of the editor without having to clone it locally - from improved searching, to anything your extensions provide!
Not as revolutionary as Visual Studio Code for the Web, but this can before that, though now simply hitting
.on the page of a Github repository could be quicker then using this extension.
Debug Visualizer
Allows for easy visualization of data structures while debugging, supporting basic structures and the writing of custom outputs. Makes generating visualizations of concepts a breeze, allowing you to quickly demonstrate the state of the program.
AppMap
A runtime-analysis tool that generates a visual map of your code's execution, the bigger your project the more useful it is.
Language-Specific
Markdown
Markdown All in One
Provides a number of Markdown related features, from auto formatting tables, to generating and updating Table of Contents, and more!
markdownlint
A simple linter for Markdown files, making it easier to write good Markdown.
Markdown Preview Github Styling
Updates the styling of the Markdown preview to match Github's styling, making it easy to be confident that your Markdown will look good on Github.
Markdown Preview Mermaid Support
Renders Mermaid diagrams in Markdown previews, making it much quicker to write and preview Mermaid diagrams.
Markdown Checkboxes
Replaces [ ] and [x]s with actual checkboxes in Markdown previews.
Markdown Emojis
Replaces :emoji-name: with the emoji in Markdown previews.
Markdown yaml Preamble
Turns YAML preambles into a table in Markdown previews.
Markdown Footnotes
Add [^1] and [^1]: footnotes support to Markdown previews.
Web Development
Live Server
Starts up a local server and opens your file in it, with live reloading, making working with static sites a breeze - and even dynamic ones if you pick up the companion extension.
Color Highlight
Highlights colors right in your editor - hexadecimals, rgb, rgba, hsl, hsla - making it easy to tell at a glance the colors without having to calculate the color yourself.
CSS Peak
Links up CSS classes to their definitions, allowing you use the built-in VSCode "Go to Definition" functionality to jump to the CSS class definition, makes it a breeze to jump to the correct CSS class definition.
Highlight Matching Tag
Highlights the opening and closing HTML/XML tags where the cursor is, making it easier to see where the tag starts and ends.
Auto Rename Tag
Allows you to rename the opening tag of an HTML element and have the closing tag renamed automatically, and vice versa, making it easier to rename HTML elements.
HTML End Tag Labels
Adds a greyed-out label to the end of HTML tags, making it easier to identify which tag is ending, making it easier to tell between closing tags.
ESDoc MDN
Adds a MDN-opening macro comment that makes it easy to open the MDN page for the given topic, making it that much quicker to look up documentation.
CSS Initial Value
Shows the initial value of CSS properties on hover, making it easier to not only remove redundant CSS, but also to know the default value of a CSS property.
CSS to JSS
Easily convert between CSS and JSS, makes it a breeze when converting between the two - commonly done when moving CSS components into React or such.
JSS for the uninformed is the way CSS is written in JavaScript, commonly seen in React as inline styles, but also used in other frameworks.
Preview.js
Provides a embedded real-time preview of various web component types instantly - React, Vue, Storybook, Svelte, etc - making it easy to debug components individually and quickly see how they respond to various props.
Inline Fold
Primarily for folding HTML classes - but customizable to anything - creates inline folds for the specified text, hiding away clutter, making it easier to work with Tailwind CSS.
Headwind
This automatically sorts and de-duplicates Tailwind CSS classes, making it easier to focus on the content and not the order of the classes.
JavaScript
Console Ninja
Displays console.log, errors, breakpoints, and more directly inline with your code - and in most cases without needing any special configuration! Makes the feedback loop super short, allowing you to quickly see the information you need without switching contexts!
Quokka.js
Constantly reruns your code, showing the output in the editor, making rapid prototyping and debugging a breeze!
Wallaby.js
Makes your tests that much more responsive by including the results directly in the editor, along with the inclusion of storybook-like debugging walkthroughs and more! Makes the test-driven-development feedback loop that much shorter!
Sort JS object keys
Sorts the keys of a selected JavaScript object, making it easier to keep objects consistent and easily comparable.
npm Dependency Links
Turns the names of dependencies in package.json into links to their npm page, making it that much quicker to look up documentation.
Template String Converter
Saves you a bit of time by automatically converting a string using single or double quotes to a template string upon typing ${} within, making it that much easier to evaluate an expression without having to think about the quote type
Version Lens
Brings the versions of dependencies right into your package.json, showing the latest version and making updating a breeze!
Copy JSON Path
Provides a command that allows you to copy the JavaScript object path of the cursor location in a JSON/JavaScript object, makes working with highly nested data structures a breeze!
Flame Chart Visualizer for JavaScript Profiles
Great for profiling your JavaScript code, showing both a realtime view during debugging and converting profiles to interactive flame charts, making it easier to see where your code is spending its time.
TypeScript
Pretty TypeScript Errors
Turns those unreadable and smushed TypeScript errors into something that's much easier to read and understand, adding syntax highlighting and spacing! Making TypeScript easier to work with no matter your experience level!
| Before | After |
|---|---|
|
|
Total Typescript
Helps you learn TypeScript by providing hints as you come across unique TypeScript usages, additionally shows human-translations of complex TypeScript errors, making it easier to jump into TypeScript.
TwoSlash Queries
Add support for the TwoSlash TypeScript markup format - allowing users to query TypeScript code for additional information, making it easy to see multiple types at once without having to hover between them and remember what they were.
Python
Wolf
Adds live inline-feedback to your Python code, showing you the standard output and result of any expression directly in the editor - inspired by the similar extension Quokka.js - making the feedback loop when working with Python that much quicker.
It's not as mature as Quokka, so be careful working with infinite loops - I have been able to crash my computer with it.
isort
Automatically sorts imports in Python files, making it easy to keep the imports sorted - and most importantly, your linter happy!
Birdseye
Describes itself as a expression-centric, graphical Python debugger using the AST, which basically means it's a after-the-fact visualizer of the code you just ran, making it great to step through your code execution and see where things went wrong.
While it aging and may not support all the latest Python features, it's a great learning tool.
Personal
Inline Watch Expressions
Adds inline watch expressions to the VSCode debugger, allowing you to see the value of variables as you step through your code, making it easy to setup a piece of code to demonstrate how the values change as you step through it.
Full List of Extensions in order of Impact
At least my attempt to order them by how much they impact my day-to-day workflow.
- Error Lens
- Indent Rainbow
- Bracket Lens
- Code Spell Checker
- Better Comments
- Console Ninja
- Quokka.js
- Wallaby.js
- Open in GitHub, Bitbucket, Gitlab
- Open
- Partial Diff
- Formatting Toggle
- Todo+
- Quick and Simple Text Selection
- EditorConfig for VS Code
- Trailing Spaces
- Live Share
- Code Tour
- Image preview
- Fold Plus
- Sensitive Replace
- Output Colorizer
- Pretty TypeScript Errors
- Sort JS object keys
- VSCode Position
- Kanbn Extension for Visual Studio Code
- Chance Case
- Coverage Gutters
- Select By
- Realtime Debugging
- Hediet Power Tools
- Jumpy2
- Live Server
- Paste JSON as Code
- Color Highlight
- CSS Peak
- Highlight Matching Tag
- Auto Rename Tag
- HTML End Tag Labels
- ESDoc MDN
- CSS Initial Value
- Template String Converter
- Slowbug
- Version Lens
- Copy JSON Path
- GitHub Repositories
- Wolf
- Total Typescript
- Inline Fold
- isort
- npm Dependency Links
- Debug Visualizer
- CSS to JSS
- Headwind
- TwoSlash Queries
- Preview.js
- Flame Chart Visualizer for JavaScript Profiles
- Markdown All in One
- markdownlint
- Markdown Preview Github Styling
- Markdown Preview Mermaid Support
- Markdown Checkboxes
- Markdown Footnotes
- Birdseye
- Markdown Emojis
- Markdown yaml Preabmle
- AppMap
Conclusion
If you've made this far, I hope you've found at least one extension that improves your workflow! If you happen to know of a niche one that isn't on this list, I'd love to hear about it - always on the hunt for new tools to improve my workflow!
For those that have already been here, you know this isn't the first time I've shared my extensions, and as it evolves I will attempt to keep this page the most up-to-date version of my extensions.