Favorite VSCode Extensions
March 14, 2020 - 3 min
VSCode is the most popular code editor currently, thanks in part to its Marketplace for extensions. Most of the following list is universally applicable, with some specifically targeting Front End web development.
Basics
-
ESLint - Standard linter for JavaScript and TypeScript
-
Prettier - Code formatter for JavaScript and TypeScript
-
Gitlens - Adds git blame to lines/files. Highliy customizable with a settings editor UI
-
Material Icon Theme (or any icon theme) - Icon themes make files look more appealing
-
Atom Keybindings - Adds useful keyboard shortcuts if coming from the Atom editor
Importing & Intellisense
-
npm Intellisense - Autocomplete for NPM module import statements
-
Path Intellisense - Autocomplete for local import statements
-
SCSS Intellisense - Autocomplete and 'Go To' functionality for SCSS
-
Auto-import - Auto-import TypeScript modules
-
Microsoft Intellicode - Smarter Intellisense gives you more relevant suggestions
Editor Enhancements
-
Reopen Closed Tab - Adds menu item and keyboard shortcut (Cmd + Shift + T) to reopen closed tabs
-
File Utils - Adds 'Duplicate File' functionality
-
Active File in Status Bar - Shows the path of the current file in the status bar
-
Bracket Pair Colorizer 2 - Matching brackets are identified with colors
-
Zoombar - Control the window's zoom level from the status bar and command pallette
-
Terminal Zoom - Control the terminal font size from the status bar and command pallette. I made this one :)
-
Alphabetical Sorter - Sort lists alphabetically
Specific Filetypes
-
Mardown Lint - Provides linting for Markdown files
-
Shell Format - Syntax highlighting and formatting to shell scripts, Docker files, and more
-
Dotenv - Color theming for dotenv files
-
MDX - Color theming for mdx files
MVPs 🎂
-
Settings Sync - Sync your settings, keyboard shortcuts, extensions and more to your GitHub account. Next time you setup a new computer, this is the only thing you have to worry about.
-
Activitus Bar - Moves the sidebar (usually on the left) to the bottom status bar (see picture). More space!
-
Wrap Console Log - Insert console log statements for highlighted text using a keyboard shortcut. You may want to add a keyboard shortcut like this:
{
"key": "cmd+l",
"command": "console.log.wrap.down.prefix",
"when": "editorTextFocus"
}