Make coding a joy with these core VSCode extensions and settings

Visual Studio Code (VSCode) has rapidly become the favored editor/IDE for a huge swath of web developers. This is in no small part due to its robust extensions marketplace and the fact that you can change how pretty much every little aspect works.

I’ve been using it for the past few years of webdev work with a myriad of technologies (Node.js, Typescript, vanilla JavaScript, Vue.js, Svelte.js, HTML/CSS, Docker, and on and on), and it’s only let me down when I strayed too far from web technologies.

Below are the core extensions and settings I’ve settled on for general JavaScript/Node-centered web development, that have collectively made my work an absolute joy.

VSCode Extensions

There are extensions for pretty much everything, and you’ll definitely need to track down the best ones for your particular technology stack. For most JavaScript-based stacks, the following extensions form a great core:

• ESLint is basically required. You’ll still have to install ESLint locally (npm i eslint) or globally (npm i -g eslint) via npm.
• npm for validating your package.json file. It'll show you any obvious errors in VSCode when you have your package.json file open.
• npm intellisense for autocompleting import/require statements.
• Path Intellisense for autocompleting things that look like paths, making it much easier to correctly type out file/folder paths.
• Better Comments for comment highlighting based on keywords.
• Beautify for cleaning up janky-looking files of various types. Use with Ctrl+Shift+P → beau and choose the option you want.
• change-case for toggling between all the classic casing strategies. Particularly great for converting snake-cased JavaScript into kebab-cased HTML. Use with Ctrl+Shift+P and then starting typing the case name you want to convert to.
• Prettify JSON to make JSON readable. Use with Ctrl+Shift+P → prett.

VSCode Settings

Code environment settings can be very personal, or can be dictated from above for matching across a team. In any event, here are the ones I’ve settled on over time (to edit yours in VSCode, Ctrl+Shift+P then Preferences: Open Settings (JSON) ):

{
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "js/ts.implicitProjectConfig.checkJs": true,
  "eslint.validate": ["javascript","html","vue","typescript"],
  "git.autofetch": false,
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.shellArgs.windows": ["-l"]
}

If you want to use the Fira Code font, you’ll need to first install it.

The terminal... fields are for setting Git Bash as the default terminal, if that's the sort of thing you're into.