Make coding a joy with these core VSCode extensions and settings

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+Pbeau 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+Pprett.

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,
"": "C:\\Program Files\\Git\\bin\\bash.exe",
"": ["-l"]



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Coster

Adam Coster

CTO and Fullstack Webdev at Butterscotch Shenanigans