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

Editor Enhancements

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! Activitus Bar example

  • 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"
}

Tips

  • Install ‘code’ command in PATH - Microsoft

  • Enable format-on-save with the setting "editor.formatOnSave": true,

  • Remove clutter with the right-click menu on the status bar - View demo

  • Enormous guide with more - Microsoft